watch:

深入响应式原理:
每个vue实例初始化渲染时,都有对应的watcher,data里的属性会经过Object.defineProperty,全部转化为getter、setter,并记录为watcher的依赖,当依赖的setter被触发时,watcher触发re-render。但是有两个问题:
watcher对属性的收集只发生在初始化渲染,所以动态生成的data不能被监听。可以使用this.$set({},”key”, “value”)。
watcher对data属性的转化,只在第一层,如果data某个属性是引用值,对其新添了新的属性,视图并不会更新,
可以用Object.assign({}, oldObj, newKeyObj)浅拷贝新的引用,赋值给data替换以前的引用。

handler:

watch高级用法

1
2
3
4
5
6
7
8
9
watch: {
obj: {
handler(newval) {
this.obj = newval
},
deep: true,
immediate: true
}
}

deep为true可以让watch遍历Object下面所有属性,收集为依赖,转化为getter、setter。immediate为true,可以让初始化渲染就执行handler。开销很大。

1
2
3
4
5
watch: {
"obj.a": {
handler (newval) {this.obj.a=newval}
}
}

用字符串的形式,让watcher只收集obj.a

其他总结

  1. 用箭头函数,普通函数会this指向调用他的对象,箭头是往外层找,就是定义时所在的对象

  2. 是当前组件的作用域。没写是全局的作用域。可以混用。编译后,通过postcss转换。所以有一个动画帧,想要实现动画,失败,因为名字定义在编译时转化了,不能找到。父组件样式会影响子组件的根元素样式。v-html动态生成的元素不会受scoped样式的影响,根会影响,但根下面的不会影响。

  3. 异步请求可以使用async和await,更方便,错误失败情况优先考虑