读Vue文档笔记2:Vue的响应式原理
2018-08-26 本文已影响0人
焦糖大瓜子
1.当你把一个普通JavaScript对象传给vue实例的data选项,Vue将遍历此对象的所有属性,病使用Object.defineProperty把这些属性全部转为getter/setter。
2.每个组件实例都有相应的watcher实例对象 ,它会在组件渲染的过程中,把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而让它关联的组件得以更新。
3.检测变化的注意事项:
3.1 vue不能检测到对象属性的添加或者删除,vue会在初始化实例是对属性getter/setter执行中转化过程,所以属性必须在data对象上存在,才能让它是响应的。
3.2 vue不允许在已经创建的实例上动态添加新的根级响应式属性。可以使用Vue.set(object, key, value)方法将响应式属性添加到嵌套对象
3.3 有时候想向已有的对象上添加属性,使用Object.assign创建一个新的对象,让它包含原有的对象的属性和新的属性。
4.异步更新队列 :
4.1 vue异步执行DOM更新。只要观察到数据变化,vue将开启一个队列,并换从同一事件循环中的发生所有的数据变化,如果同一个wather被多次触发,只会被推入队列中一次,即去重。
4..2 想在数据完成DOM更新使用执行别的操作,使用 Vue.nextTrick(),组件内使用,this.$nextTrick()
Vue中的filters(过滤器)和computed(计算属性),methods(方法):
- filters,主要用于常见的文本格式化,用在: 双花括号中、v-bind表达式
- computed,计算属性基于它们的依赖进行缓存,只有相关依赖改变是才会重新求值。用于处理模板中比较复杂逻辑应该放到计算属性中
- methods主要用于触发状态改变,意味它可能触发computed、filters重新计算