前两篇介绍了computed和watch的基本使用watch文章和computed文章的区别，继续深入了解html通过代码实现
初始值：{{name}}计算值：{{computedName}}watch修改值：{{watchName}}修改名称JSdata(){return{name:"zhangsan",watchName:"张三",};},watch:{watchName(newVal,oldVal){console.log("旧值---->",newVal);console.log("新值---->",oldVal);console.log("所有被监听的状态都会监听this.name---->",this.name);console.log("所有被监视的状态都会监听这个.computedName---->",this.computedName);this.watchName=newVal;},},computed:{computedName:function(currentThis){console.log("当与计算属性无关的状态发生变化时，不会执行。只要依赖状态发生变化，就会更新缓存",currentThis);返回`取决于名称，：${this.name}`；},},方法：{handleNumber(){this.name="lisi";},},区别依赖值：computed依赖于使用的状态，类似于data中声明的名称，而watch中监控的值不依赖于某个值，只要组件的状态发生变化，监控的值会实时获取最新值。computed的实现使用getter和setter来获取值，属于同步操作的方法：computed需要在最后return对返回值进行处理，可以使用更深层次的getter和setter。详见计算章节。除了callback回调函数，watch还有两个布尔值的属性，分别用于首次绑定immediate，以及对象的深度监听。两者相似。可以通过方法参数获取新的值，结合其他状态处理相关的业务**补充在官方文档中，除了组件中使用的watch，在官方文档中，还有watch的介绍在这个例子中。具体用法可以参考官网：https://cn.vuejs.org/v2/api/#...$watch基本用法——来??自官方文档示例官方文档提示：注意：当更改（不是替换）一个对象或数组，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue不会保留更改前值的副本。vm.$watch('a.b.c',function(newVal,oldVal){//做某事})//functionvm.$watch(function(){//表达式`this.a+this.b`everyEachtime获得不同的结果//将调用处理程序。//这就像监听一个未定义的计算属性returnthis.a+this.b},function(newVal,oldVal){//Dosomething})请注意，如果您使用vm.$watch，那么使用unwatch可以帮助我们取消对某个状态的监听，减少不必要的监听和交互开销varunwatch=vm.$watch('a',cb)//unwatchafterunwatch()endwatcharticlecomputedarticleflower分三页介绍使用watch和computed，以及这两个钩子函数的区别。在实际企业项目开发中，使用的场景和次数很多，尽量写的详细一点。同时将notes代码放在开源仓库中，希望对大家开发vue2.x项目有所帮助码云https://gitee.com/lewyon/vue-notegithubhttps：//github.com/akari16/vue-note文章个人博客地址：详细介绍vue2.x版本中computed和watch的使用-关联与区别欢迎关注公众号：程序员布欧，不易不定期更新一些前端入门文章，转载请注明出处和作者。
