项目笔记整理11-Vue中watch和computed的使用

1.watch和computed的区别：

1.1.method是需要点击手动触发的；created，mounted是视图渲染时触发的，不能实时更新；而wacth和computed的数据是根据依赖数据进行实时的更新变化的。

1.2.wacth监听数据，watch监听的参数可以是data中定义的数据； 不支持缓存，数据变，直接会触发相应的操作；watch支持异步。

1.3.computed是计算属性，计算结果依赖于参数数据； 但是computed的结果数据，即例子中的allname不能是data中定义的数据名，而是直接运用到html中{{allname}}； 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算； 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。

2.watch监听

当一条数据影响多条数据的时候就需要用watch eg:搜索数据

data(){ return{ number:01 level:{ res:"second" } } }, watch: { number:function(newone,oldone){//可以监听data的数据 console.log(newone,oldone)//两个参数 } }, //深度监听 watch: { resChange:{ handler(newval,oldval){ console.log(newval,oldval) }, deep:true } } //或者 watch: { level.res:function(newval,oldval){ console.log(newval,oldval) } }

3.computed使用

当一个属性受多个属性影响的时候就需要用到computed eg： 购物车商品结算的时候

data: { fname: 'Sean', lname: 'Xiao' }, computed: { allname: function () { let all = this.fname + ' ' + this.lname return all } } //get和set的使用 computed: { allname: { get(){ //回调函数,当需要读取当前属性值是计算后的结果，根据相关数据计算并返回当前属性的值 let all = this.fname + ' ' + this.lname return all }, set(val){ //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据 //val就是fullName的最新属性值 const names = val.split(' '); console.log(names) this.fname = names[0]; this.lname = names[1]; } } }