vue中computed表示,vue中计算属性和watch的区别
本文分析了Vue的计算和手表的区别。computed用于监控自身定义的变量，可以直接在页面上使用。观察是监视Vue实例上的数据变化。通俗地说，就是检测数据中申报的数据。有需要的朋友可以参考一下。
:
目录
1.computed介绍1.1、get和set的用法1.2、计算属性的缓存2、watch介绍3、二者的区别3.1、computed介绍3.2、应用场景4
一、computed介绍
Computed用于监控自身定义的变量。这个变量不是在数据中声明的，而是在computed中直接定义的，可以直接在页面上使用。
//基本用法
{{msg}}
输入v-model=name /
//计算属性
计算值：{
消息：函数(){
返回this.name
}
}
在输入框中，当值得更改名称时，msg也会更改。这是因为computed监听自己的属性msg，发现一旦名称改变，msg会立即更新。
注意：消息不能在数据中定义，否则将报告错误。
1.1、get 和 set 用法
输入垂直模型=完整 br
输入v-model=first br
输入垂直模型=秒
data(){
返回{
第一：“美”，
第二：“姐姐”
}
},
计算值：{
满：{
Get(){ //需要读取当前属性值时执行回调函数，根据相关数据计算并返回当前属性的值。
返回this.first this.second
},
Set(val){ //监控当前属性值的变化，属性值变化时执行，更新相关属性数据。
let names=val.split( )
this.first=names[0]
this.second=names[1]
}
}
}
get 方法：当第一个和第二个发生变化时，将调用get方法更新full的值。
set 方法：修改full的值时，调用set方法，val是full的最新值。
1.2、计算属性缓存
我们通过方法，拼接数据，也可以实现该效果，代码如下。
div {{ full() }} /div
data(){
返回{
第一：“美”，
第二：“姐姐”
}
},
方法：{
完整(){
返回this.first this.second
}
},
在一个页面中，数据可能会被多次使用。我们将computed和method这两种方法放在一起，并在页面中多次引用这些数据。下面我们来试试效果。
差异
计算的计算值：
{ {完整}} { {完整} } { {完整} } { {完整} } { {完整} }
/div
差异
方法计算值：
{ {完整}} { {完整} } { {完整} } { {完整} } { {完整} }
/div
data(){
返回{
第一：“美”，
第二：“姐姐”
}
},
计算值：{
full:function(){
console.log(computed )
返回this.first this.second
}
},
方法：{
fullt(){
Console.log(“方法”)
返回this.first this.second
}
}
运行结果为：
根据结果不难发现，根据方法得到的数据在使用几次后需要重新计算几次，但是计算出来的属性并没有根据其响应的依赖关系进行缓存，然后在依赖属性的值发生变化时会重新计算。由于计算量少，它具有较高的性能。
二、watch介绍
就是监控watchvue实例上的数据变化，通俗地说就是检测数据中声明的数据。您不仅可以监视简单的数据，还可以监视对象或对象属性。
Demo1：监控简单数据
输入v-model=first br
data(){
返回{
第一：“美”，
}
},
观察：{
first( newVal，oldVal ){
console.log的最新值( newval ，newval)//first
Console.log (oldval ，old val)//第一个先前值
}
},
//修改first的值时，会立即打印最新的值。
Demo2：监控对象
听对象的时候，需要用深度听。
输入v-model=per.name
data(){
返回{
per:{
姓名：“千千”，
年龄：“18岁”
}
}
},
观察：{
per:{
处理程序(oldVal，newVal){
console.log(newVal ，newVal)
console.log(oldVal ，oldVal)
},
深：真的，
}
},
修改per.name时，发现newVal和oldVal的值是一样的，因为它们存储的指针指向同一个地方。所以深度监控虽然可以监控对象的变化，但是无法监控哪个属性发生了变化。
Demo3：监听对象的单个属性
//方法一：直接引用对象的属性
输入v-model=per.name
data(){
返回{
per:{
姓名：“千千”，
年龄：“18岁”
}
}
},
观察：{
per.name:function(newVal，oldVal){
console.log(newVal-，newVal)
console.log(oldVal-，oldVal)
}
},
也可以借助 computed 作为中间转换，如下：
//方法二：借助于computed
输入v-model=per.name
data(){
返回{
per:{
姓名：“千千”，
年龄：“18岁”
}
}
},
观察：{
perName(){
Console.log(“名称已更改”)
}
},
计算值：{
perName:function(){
返回this.per.name
}
},
Demo4：监听props组件传递的值
道具：{
字符串
},
//不要使用立即
观察：{
mm(newV，oldV){
console.log(newV ，newV)
console.log(oldV ，oldV)
}
}
//立即使用
观察：{
嗯：{
即时：真的，
处理器(新的，旧的){
console.log(newV ，newV)
console.log(oldV ，oldV)
}
}
不使用immediate时，第一次加载页面时，不会执行watch监控的以mm为单位的打印。
使用immediate时，结果也会在第一次加载时打印出来：newV 11 oldV undefined。
immediate的主要作用是当一个组件被加载时，回调函数会被立即触发。
三、两者区别
3.1、对于 computed
computed监视的数据未在data中声明。
Computed不支持异步。当computed中存在异步操作时，不可能监视数据更改。
Computed有缓存，页面被重新呈现。值不变时，直接返回之前的计算结果，无需重新计算。
如果一个属性是由其他属性计算出来的，那么这个属性依赖于其他属性，一般使用computed。
当计算的计算属性值是函数时，默认情况下使用get方法。如果属性值是属性值，则该属性有一个get和set方法，当数据发生变化时将调用set方法。
计算值：{
//属性值是一个函数
perName:function(){
返回this.per.name
},
//属性值就是属性值
满：{
get(){ }，
set(val){ }
}
},
3.2、对于 watch
被监控的数据必须在data或data in props中声明。
支持异步操作
没有缓存。重新呈现页面时，会在值不变的情况下执行。
当属性的值改变时，需要执行相应的操作。
当监控数据发生变化时，会触发其他操作。该函数有两个参数：
立即：组件加载立即触发回调函数deep:深度监控，主要针对复杂数据。例如，如果在监视对象时添加深度监视，任何属性值更改都会触发它。注意：添加深度监听对象后，输出的新旧值相同。
重新呈现计算后的页面时，不会重复计算，但观察器会重新计算，因此计算出的性能更高。
四、应用场景
当需要数值计算并依赖于其他数据时，应该使用Computed，因为它可以利用computed的缓存功能来避免每次获得值时都要重新计算。
当数据更改时需要执行异步操作或开销较大的操作时，应该使用Watch。computed不支持异步。如果需要限制操作的频率，可以使用computed作为中间状态。
总结：
关于分析Vue的computed和watch的区别的这篇文章到此为止。有关Vue的computed和watch之间的差异的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。