1. 计算属性
- vs模板表达式
模板只能处理简单运算,在模板中多次引用应该使用计算属性computed - vs methods
结果相同,但是计算属性是基于它们的依赖进行缓存的,只有相关依赖发生改变时它们才会重新求值;每当触发重新渲染时,调用方法将总会再次执行函数 - vs watch
监听属性watch代码重复 - 计算属性的getter
计算属性默认只有getter,因为一般为展示元素,也可以提供setter
2. 监听器
watch选项响应数据的变化,当需要在数据变化时执行异步或开销比较大的操作时使用。
3. 用key管理可复用元素
Vue会复用已有元素,而非从头开始渲染,不同input框会共享已输入的内容,想要表达两个元素是完全独立的,不要复用他们,添加对应唯一的key值
4. v-if vs v-show
- v-if
切换过程中条件块中的事件监听器和子组件会被销毁和重建;直到条件第一次为真时才会渲染条件块,更高切换开销 - v-show
不管初始条件是什么,条件块总会被渲染,并且只是简单地基于CSS进行切换,更高初始开销
5. v-for优先级比v-if高
v-if可以重复运行于每个v-for循环中,可以选择性地渲染节点
<ul>
<li v-for="todo in todos" v-if="!todo.isComplete">color</li>
</ul>
6. 数组变更检测
数组的变异方法,可以触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
数组的非变异方法,总是返回一个新数组,可以用新数组替换旧数组
- filter()
- map()
- concat()
由于js的限制,Vue不能检测以下变动的数组:
- 使用索引值设置数组项目
vm.items[index] = newValue
---> Vue.set(vm.items, index, newValue) - 修改数组的长度
vm.length = newLengh
---> vm.splice(newLengh)