vue watch compute,vue计算属性和watch的区别
本文主要介绍vue2.x版本中computed和watch的使用、关联和区别。文章围绕主题，详细介绍内容。需要的朋友可以参考一下。
目录
前言差异补充结论
前言
第一章介绍了computed和watch的基本用法，2.x版详细解释了computed和watch的用法。
这两者之间的区别将继续通过代码实现来具体理解。
html
Li初始值：{{ name }}/li
li计算的计算值：{{ computedName }}/li
里
手表的修改值：{{ watchName }}
输入类型=text v-model=watchName /
/李
Utton @ click= handleNumber 修改名称/button/li
JS
data() {
返回{
姓名：张三，
手表名称：“张三”，
};
},
观察：{
watchName(newVal，oldVal) {
Console.log(旧值-，new val)；
Console.log(新值-，old val)；
Console.log(watch下的watch状态会监听this.name -，this . name)；
console.log(
所有受监视的州都将监听此消息，
this.computedName
);
this . watch name=new val；
},
},
计算值：{
computed name:function(current this){
console.log(
当与计算属性无关的状态发生变化时，不会执行，只有当依赖状态发生变化时，才会更新缓存，
当前This
);
返回依赖于名称，$ { this . name } `；
},
},
方法：{
handleNumber() {
this.name= lisi
},
},
区别
依赖值：计算取决于使用的状态，类似于数据中声明的名称，
但是，watch中的监控值并不依赖于某个值。只要组件状态改变，被监控的值将实时获得最新值。
computed的实现使用getter和setter来获取值，这是一个同步操作。
使用方法：
最后，computed需要返回返回值，可以使用更深的getter和setter。有关详细信息，请参考VUE版本2。x来解释computed和watch的用法。除了回调函数，watch还有两个带布尔值的属性，用来第一次绑定immediate，深度监控对象。两者的相似之处在于都可以通过方法参数获取新值，并结合其他状态处理相关业务。
补充
在官方文档中，除了组件中使用的手表之外，还有对官方文档中示例中手表的介绍。
具体用法可以在官网中：
https://cn.vuejs.org/v2/api/#vm-watch
$watch基础使用来自官方文档例子
官方文档提示：
注意：当改变(不是替换)对象或数组时，旧值将与新值相同，因为它们的引用指向相同的对象/数组。Vue不会保留更改前的值的副本。
vm。$watch(a.b.c ，function (newVal，oldVal) {
//做点什么
})
//函数
vm。$watch(
函数(){
//每当获得不同的结果时，表达式‘this . a this . b’
//所有的处理函数都会被调用。
//就像听一个未定义的计算属性
归还这个
},
函数(newVal，oldVal) {
//做点什么
}
)
需要注意的是，如果vm。使用了$watch，那么使用unwatch会帮助我们取消对某个状态的监控，减少不必要的监控和交互开销。
var unwatch=vm。$手表( a ，cb)
//然后取消观察。
取消观看()
结语
用了两页来介绍watch和computed的用法，以及这两个钩子函数之间的区别。在实际的企业项目开发中，使用的场景和次数比较多，尽量写的详细一点。同时把笔记的代码放在开源仓库里，希望对大家开发vue2.x项目有所帮助。
关于vue2.x版本中computed和watch的使用、关联和区别的文章到此为止。更多相关vue2.x计算和观察内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。