一、Object.freeze()
如果我们已知该数据是不会改变的，就不需要Vue将其设置成响应式的了，利用 Object.freeze()，该方法可以冻结一个对象，使该对象不能被修改。Vue就不能够为对象添加，setter getter等数据劫持的方法。
代码语言：javascript复制export default {
data() {
return {
obj: {}
}
},
created() {
// 返回一个冻结的对象参数和返回值是全等的。
this.obj = Object.freeze({a: 0, b: 1})
console.log(this.obj)
}
}
二、v-if 和 v-show
v-if 会根据条件进行元素的销毁和重建，如果初始状态下条件为假，则根本不会渲染。
v-show 不论条件是什么都会渲染元素，只是基于 css 的 display 属性进行切换。
综上，v-if 适用于元素很少进行显示与隐藏的切换，而v-show适用于，元素需要频繁的进行切换。
三、computed和watch的使用
computed和watch都有监听数据的作用，但两者使用上有所不同。
computed 是计算属性，是描述依赖响应式状态的复杂逻辑，也就是说，计算出来的值，是依赖vue中其他的响应式数据的。
watch 是侦听器，用来监听数据的改变，并执行一些操作。
他们之间的不同除了应用场景外，计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。
代码语言：javascript复制<template>
<div>
{{ totalPrice }}
{{ totalPrice }}
{{ totalPrice }}
{{ totalPrice }}
{{ init() }}
{{ init() }}
{{ init() }}
{{ init() }}
<button @click="count "> 1</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 1,
price: 12
}
},
computed: {
totalPrice() {
console.log('computed')
return this.count * this.price
}
},
watch: {
totalPrice(newValue, oldValue) {
console.log('watch')
}
},
methods: {
init() {
console.log('method')
}
}
}
</script>
四、v-for key 和 v-if
v-for 遍历时要给遍历的元素添加一个 key（唯一） ，这样做是为了方便vue内部准确找到该元素，当数据变化时根据key对比，从而判断是否复用旧节点。；且避免同时使用 v-if，因为v-for的优先级比v-if高，每次都会先遍历整个数组；可以先把数据筛选好了在进行遍历，不要用 v-if 再进行判断了。
五、事件的销毁
Vue组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内，我们需要手动关闭定时器，取消订阅的消息，解除自定义事件等收尾操作。
六、图片懒加载
vue-lazyload 插件
七、路由懒加载
代码语言：javascript复制// 导入组件的收用该方式
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})八、第三方插件按需引入
可以减小项目体积
九、使用 keep-alive 缓存组件
通过<keepAlive>组件强制被切换掉的组件仍然保持“存活”的状态。
