不讲实现不会,讲用法
watch的用法定义
watch?: Record<string, WatchOptionsWithHandler<any> | WatchHandler<any> | string>;
export interface WatchOptions {
deep?: boolean;
immediate?: boolean;
}
export interface WatchOptionsWithHandler<T> extends WatchOptions {
handler: WatchHandler<T>;
}
export type WatchHandler<T> = (val: T, oldVal: T) => void;
key:value的形式
value可以是字符串,可以是一个函数,还可以是一个对象
- 字符串的形式
这样就很明显的看出来,字符串的形式其实就是调用methods里面这个名字的方法,其实说是methods不是很准确,应该是说调用vm里面这个名字的方法,然后是有两个参数
这个形式可以说大家基本不会用,所以我发现有的同行就会忘记这个用法,个人表示emmm
虽然是相同的功能写在methods里面,也会采用函数的形式然后去调用methods里面定义的公共的方法,个人也喜欢这样, ̄□ ̄||
- 函数的形式
函数的形式就是平常用的最多的,监听一个vm的属性然后执行一些操作,这个写法可以说是比较的简单好用,偶尔我们会出现监听对象这样的,这个就不行了就得用对象的形式
- 对象的形式
对象的形式也是用的比较多,毕竟监听一个对象的变化一定是用这个,也就是使用对象形式里面的deep,深度去监听对象里面的变化,这个变化有一点是要注意的就是这个变化是要支持响应式数据的才能,不支持响应式的是不会触发的,如果没有使用深度监听,那么对象的监听就是监听这个对象地址的改变,也就是你必须要直接给这个对象赋值才会触发监听,这个在计算属性中也有这个问题
对象里面还有一个就是立即触发一次,immediate,组件创建的时候就会立即调用一次handler,这个在监听这个属性去改变其他的数据很好用,就不需要在生命周期里面再写一遍通过这个数据去触发初始化其他数据的函数