vue-computed,methods,watch的区别

作者: 撕心裂肺1232 | 来源:发表于2019-05-30 16:11 被阅读0次

vue-computed,methods,watch的区别
2018-12-12
Vue
computed methods watch区别
computed、watch、methods区别
computed、methods、watch的区别
computed、methods、watch的区别？
methods、computed、watch的区别
vue中methods 和 computed 和 watch方法
Vue methods computed watch 区别

1.computed和methods
共同点: computed能实现的methods也能实现
不同点：computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。而只要它的相关依赖没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。也就是说当我们不希望有缓存，用方法来替代。
2.watch和computed
共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同点：
a. watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。vm.$watch === watch
b. computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM;
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

<div>{{Name}}</div>
data(){
return {
num:0,
lastname:'',
firstname:'',
}
}
//当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
    console.log(val,oldval);
}
},
//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
    Name:function(){
        return this.firstname+this.lastname;
    }
}

参考：
https://www.cnblogs.com/hwldyz/p/9204614.html
https://blog.csdn.net/zfz5720/article/details/79550882