一、如何触发组件的更新
数据驱动
Vue是数据驱动的视图框架，所谓数据驱动，就是我们的DOM是通过数据来映射的，只有数据发生改变时，视图才会改变。没有特殊情况，不要去操作DOM。
数据的开源（单向的）
状态data VS 属性props
- 状态是组件自身的数据
- 属性是来自父组件传递的数据
- 状态的改变未必会触发组件的更新
- 属性的改变未必会触发组件的更新
响应式更新
Vue在实例化的时候，会对Data下面的数据做一些getter、setter的转化。所谓的转化，说直白一点就是对数据做一些中间代理层，不管是获取数据还是设置数据重复赋值，都需要经过代理层执行相应的操作。组件在render的时候，会对Data里面用到的数据，会放到watcher池中，当数据发生改变时，才会执行触发视图的更新。
二、计算属性 computed
计算属性只在数据发生变化时才会执行，所有其依赖的数据必须是响应式的。
使用计算属性的作用：
- 减少模板中计算逻辑
- 可对数据进行缓存
- 必须依赖固定的数据类型（响应式的数据：状态、属性）
侦听器 watch
- 更加灵活、通用
- watch中可以执行任何逻辑，如函数节流
简单版输入框防抖功能
<div>
输入框: <input v-model="personName" />
</div>
watch: {
personName (val) {
let self = this
clearTimeout(self.firstTimeout)
self.firstTimeout = setTimeout(() => {
self.startSearchBar(val)
}, 500)
}
},
methods: {
startSearchBar (val) {
console.log('执行搜索', val)
}
}转载微信公众号：高级web前端进阶
