简介Computed和watch都是基于watcher的。rendering函数,源码中computed和watch共享的一个watcher类,根据传入的参数不同,定义了不同的watcher。computed和watch的区别1.computedwatcher默认不执行。需要在用户获取时触发。2.Computed有缓存作用,数据不变化不会触发。3.Computed是一对多的。4.watch是多对一的。5.watch支持异步wacth使用在讲解原理之前,我们先来看看wacth的使用方法。wacth的三种使用方式:1String2Array3Function1.StringnewVue({watch:{name:'fn'},methods:{fn(newVal,oldVal){}}})2.ArraynewVue({watch:{name:[{handler:'fn',async:true}]},methods:{fn(newVal,oldVal){}}})3.functionnewVue({watch:{name(newVal,oldVal){}}})源码分析1.初始化wacthervm是newVue时传入的对象functioninitState(vm){...constopts=vm.$options//如果用户传入wacthif(opts.watch){initWatch(vm,opts.watch)}}2.处理以上三种不同类型的输入functioninitWatch(vm,watch){//循环wacth对象for(constkeyinwatch){//处理程序接收每个项目,这里是名称consthandler=watch[key]//如果名称是一个数组if(Array.isArray(handler)){//循环命名这个数组for(leti=0;i
