vue 实践心得和技巧（一）

X1nFLY 发布于2019-08-22 10:35 / 2703人阅读

摘要：原文这个系列记录我在一年开发中总结的一些经验和技巧。利用提升性能是新增的特性，可以冻结一个对象，防止对象被修改。仅在不得已的时候使用。一个指令应该表示一个独立的功能，可以为不同的标签和组件提供相同的功能。

原文： https://github.com/Coffcer/Bl...

这个系列记录我在一年vue开发中总结的一些经验和技巧。

利用Object.freeze()提升性能

Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。

vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。

如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。

并且，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉。举个例子：

{{ item.value }}

new Vue({
    data: {
        // vue不会对list里的object做getter、setter绑定
        list: Object.freeze([
            { value: 1 },
            { value: 2 }
        ])
    },
    created () {
        // 界面不会有响应
        this.list[0].value = 100;

        // 下面两种做法，界面都会响应
        this.list = [
            { value: 100 },
            { value: 200 }
        ];
        this.list = Object.freeze([
            { value: 100 },
            { value: 200 }
        ]);
    }
})

vue的文档没有写上这个特性，但这是个非常实用的做法，对于纯展示的大数据，都可以使用Object.freeze提升性能。

使用 vm.$compile 编译dom

$compile函数可以用来手动调用vue的方式来编译dom。在你需要处理某个jQuery插件生成的html或者服务端返回的html的时候，这个函数可以派上用场。但注意这是个私有api，随时都有可能变动，并且这种做法有违vue的理念。仅在不得已的时候使用。

new Vue({
    data: {
        value: "demo"
    },
    created () {
        let dom = document.createElement("div");
        dom.innerHTML = "{{ value }}";
        this.$compile(dom);
    }
})

合理使用track-by="$index"

track-by是vue为循环提供的优化方法，可以复用多次v-for中id相同的dom。如果你的数据没有一个唯一的id，也可以选择使用track-by="$index"，但必须注意一些副作用。

举个例子:

new Vue({
    data: {
        list: [1, 2, 3]
    }
})


    {{ item }}


    {{ item }}

这时候执行this.list = [4, 5, 6]，可以通过F12观察到，demo-1里的dom被全部删除，然后重新循环list生成dom，而demo-2不会删除dom，只是把他们的text格子修改为4，5，6。这就是track-by="$index"的效果，复用了两次v-for中$index相同的dom。

这是一个很好的优化方法，但不是所有场景都适用，比如循环中包含表单控件或子组件时，由于dom并不会被删除重新生成，会导致第二次执行的v-for，原有表单控件的值不会改变，可以看这个例子：
https://jsfiddle.net/jysboza9/1/

不要滥用Directive

网上有一种说法，认为dom操作都应该封装在指令中。实际开发中，我认为并不应该遵循这种教条。是否使用指令应该看你实现的是什么功能，而不是看是否操作了dom。比如说你想用vue封装一个jQuery插件，来看看下面哪种封装方法比较好：

个人认为无疑是第一种方法更好，datepicker是一个独立的组件，你并不需要关心他的内部是否操作了dom，是否封装了jQuery插件。

那么什么时候使用指令呢？来看一下浏览器原生提供的指令：

title属性为不同的标签提供tooltip功能，这就是一个指令。一个指令应该表示一个独立的功能，可以为不同的标签和组件提供相同的功能。

（待续...）

混合云私有云使用心得与技巧 vue20开发实践 Vue开发技巧 webrtc和vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90900.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论0 收藏0
2017-09-16 前端日报

摘要：前端日报精选深入理解绑定请使用千位分隔符逗号表示网页中的大数字跨页面通信的各种姿势你所不知道的滤镜技巧与细节代码质量管控复杂度检测中文翻译基于与的三种代码分割范式掘金系列如何构建应用程序冷星的前端杂货铺第期美团旅行前端技术体系 2017-09-16 前端日报精选深入理解 js this 绑定请使用千位分隔符(逗号)表示web网页中的大数字跨页面通信的各种姿势你所不知道的 CSS 滤...

cheng10 2019-08-22 11:08 评论0 收藏0
1月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享视频前端技术论坛融合不可错过的迷你库测试框架实例教程为你详细解读请求头的具体含意解析的库如果要用前端框架，开发流程是怎样的与有什么区别正确使用的方法是什么流程图插件小如何让元素只能输入纯文本前端技术中更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 评论0 收藏0
Python 2.6 升级至 Python 2.7 的实践心得

摘要：前言安装，因为软件版本上的需求所以考虑将升级至，加上生产环境还是以为主，互联网自动化运维平台大多数也推荐以来操作，选择还是也没有定论，找到适合的搭配即可。前言 CentOS 6.8 安装 Python 2.7.13，因为软件版本上的需求所以考虑将 Python 升级至 2.7.13，加上生产环境还是以 RHEL 6 为主，互联网自动化运维平台大多数也推荐以Python 2.7.x +...

godlong_X 2019-07-31 10:55 评论0 收藏0