生命周期及回调:
- 不要在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的方式