vue 实践心得和技能（一）

2024年3月25日 236次阅读 来源: Coffce

原文： 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()凝结的是值，你依然能够将变量的援用替换掉。举个例子：

<p v-for="item in list">{{ item.value }}</p>
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]
    }
})
<div id="demo-1">
    <p v-for="item in list">{{ item }}</p>
</div>
<div id="demo-2">
    <p v-for="item in list" track-by="$index">{{ item }}</p>
</div>

这时刻实行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插件，来看看下面哪一种封装要领比较好：

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

个人认为无疑是第一种要领更好，datepicker是一个自力的组件，你并不须要体贴他的内部是不是操纵了dom，是不是封装了jQuery插件。

那末什么时刻运用指令呢？来看一下浏览器原生供应的指令：

<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>

title属性为差别的标签供应tooltip功用，这就是一个指令。一个指令应当示意一个自力的功用，能够为差别的标签和组件供应雷同的功用。

（待续…）

    原文作者：Coffce
    原文地址: https://segmentfault.com/a/1190000006191558
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞