生命周期及回调：
- 不要在vue组件的固定选项（生命周期钩子、watcher等）或者回调使用箭头函数：
类似created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())这种都不要做，这会导致this传递错乱，最终导致执行报错（例如找不到方法或者属性等）。
模板：
-
不要让v-for和v-if处在同一个标签上，这可能导致多余的渲染行为（本应该被隐藏的元素被渲染）。v-for的列表数据最好取自计算属性，v-if最好直接控制列表元素。
-
v-for循环过程中，请带上key；同时key要用基本数据类型，不要用对象或者数组。
3.[性能] v-show特点是切换开销小，初审渲染开销大；v-if是惰性渲染，如果条件是false初始不渲染。如果首屏渲染压力大，可以考虑优先v-if。另外v-show不支持<template>标签
-
绝不要在用户输入的区域使用v-html，这会有xss隐患。
-
模板中可以写表达式，但是不要写语句
-
[性能] 如果是移动端，scroll事件最好加上".passive"，表示允许浏览器默认行为，可以让滑动正常执行，不受回调js代码影响。
数据：
-
对数组的操作不要直接操作数组下标，因为不会触发数据劫持，尽量使用数组api操作（push、pop、shift、unshift、sort、splice、reverse），或者直接替换整个数组
-
对象属性动态扩展，请使用vm.$set(obj, key, value)的形式，因为直接增加的属性并不会被劫持。
-
复杂的数据处理逻辑请先放到computed，然后在模板中引入。
-
如果子组件想直接改变props的值，请使用emit('update:title', newTitle)的形式，然后父组件推荐使用".sync"修饰符，可以简化代码：v-bind:title.sync="parentData.value"。同时注意".sync"修饰的绑定值不能是表达式或者字面量的对象（{key: value}）
组件
-
[性能] 如果你的项目越来越大，可能会遇到加载的问题，可以考虑把首屏不需要的代码异步加载，在vue中可以使用异步组件，常用的地方有路由组件等。通常可以使用import()语法动态加载。
异步组件 -
尽量不要直接操作dom，如果必要，请使用ref属性。不要在模板或者computed中出现$refs
-
组件的提炼过程可以考虑使用slot的方式
网友评论