vue watch compute,vue中watch与计算属性的区别
本文主要介绍了Vue中的手表是什么，以及手表和电脑的区别。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
一、手表是什么？二。应用程序的基本用法。手表和计算机之间的差异。computed和Watch的综合应用示例需求：实现代码(helloworld.vue实现代码)
一、watch是什么？
一种监控Vue实例变化的表达式或方法。回调函数得到的参数是新值和旧值，用函数替换。
简单来说，watch可以监控一个值的变化，调用因为变化而需要执行的方法。您可以通过watch动态更改关联的状态。
二、应用基本用法
当名字值改变时，手表监视并执行手表中的名字功能。
差异
pFullName: {{fullName}}/p
PFI rstname:input type= text v-model= first name /p
/div
新Vue({
el: #root ，
数据：{
名字：“科比”，
姓氏：“布莱恩特”，
全名：“”
},
观察：{
名字(新名字，旧名字){
this . full name=newName this . last name；
}
}
})
handler方法和immediate属性：
在上面的例子中，只有当值改变时，手表才被执行。我们希望组件加载触发回调函数立即执行，所以我们使用了handler和immediate属性。
观察：{
名字：{
处理程序(新名称，旧名称){
this . full name=newName this . last name；
},
//表示在wacth中声明firstName方法后立即执行handler方法。如果设置为false，效果与上面的示例相同。
即时：正确
}
}
deep属性（深度监听，常用于对象下面属性的改变）：
差异
pobj.a: {{obj.a}}/p
pobj.a:输入类型=text v-model=obj.a/p
/div
新Vue({
el: #root ，
数据：{
目标
甲：123
}
},
观察：{
目标
处理程序(新名称，旧名称){
console . log(“obj . a changed”)；
},
即时：正确
}
}
})
当我们在输入框中进入数据视图改变obj.a的值时，发现它是无效的。由于现代JavaScript的限制(以及Object.observe的废弃)，Vue无法检测对象属性的添加或删除。
因为Vue在初始化实例时将对属性执行getter/setter转换过程，所以属性必须存在于数据对象上，Vue才能转换它并使其响应。
和object array都是引用类型，引用类型变量存储的是地址，地址没有变，不会触发watch。这时，当我们需要深度监控时，我们需要添加一个值为true的属性deep。
比如我们在 mounted事件钩子函数中对obj进行重新赋值：
已安装：{
this.obj={
答：“456”
}
}
这时候deep属性就派上用场了：
观察：{
目标
处理程序(新名称，旧名称){
console . log(“obj . a changed”)；
},
即时：真的，
深：真的
}
}
这种方法对性能影响很大。修改obj中的任何属性都会触发这个监听器中的处理程序。我们可以将watch monitoring的属性设置为‘obj . a’并删除deep:true:
观察：{
目标a :
处理程序(新名称，旧名称){
console . log(“obj . a changed”)；
},
即时：真的，
//deep: true
}
}
最后：实际开发中，手表会和组件一起销毁。
不要在watch中使用arrow函数，因为这在arrow函数中指向当前作用域。
三、Watch和computed的区别
计算属性computed (如果一个值依赖多个属性)：
支持缓存，只有在数据发生变化时才会再次执行计算(这意味着只要姓氏和名字不变，多次访问全名计算属性会立即返回之前的计算结果，而无需再次执行函数。)不支持异步。当computed中存在异步操作时，它是无效的，并且无法监控数据的变化。默认情况下，计算属性值将被缓存，计算属性将根据其响应依赖关系进行缓存，即根据数据中声明的或由父组件传递的属性中的数据计算的值。如果一个属性是由其他属性计算出来的，这个属性依赖于其他属性，那就是多对一或者一对一。通常，使用computed。即使要计算的变量没有直接在数据中声明，也可以直接写在computed中。如果计算出的属性的属性值是一个函数，默认会采用get方法，函数的返回值就是属性的属性值；在computed中，所有属性都有一个get方法和一个set方法。当数据改变时，调用set方法。
侦听属性watch(一个值变化会引起一系列值的变化或某个数据变化时做一些事情)：
如果您希望执行异步操作，或者在数据更改时有较大的开销，那么Watch是最佳选择。不支持缓存，数据变化会直接触发相应的操作；手表支持异步；的监控功能接收两个参数，第一个参数是最新值；第二个参数是输入前的值；当一个属性发生变化时，需要进行相应的操作；一对多；监控数据必须是数据中声明的或者props中父组件传递的数据，当数据发生变化时会触发其他操作。
computed和watch的综合运用实例
需求：
1.点击按钮切换天气；
2.用手表监控天气变化的数据；
实现代码（helloworld.vue实现代码）
模板
！-准备一个容器-
div id=root
H2今天的天气非常{{info}}/h2
按钮@click=changeWeather 切换天气/按钮
/div
/模板
脚本
导出默认值{
名称：“HelloWorld”，
data(){
返回{
isHot:没错，
}
},
计算值：{
信息(){
把这个还回去。是吗？“热”:“冷”
}
},
方法：{
changeWeather(){
this.isHot=！这是照片
}
},
观察：{
isHot(val){
Console.log(isHot已修改，isHot值为：，val)
}
}
}
/脚本
风格
/风格
注意：手表监控数据()中定义的所有数据。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。