vue监听器和计算属性,vue监视属性
本文介绍了Vue中的计算属性和监控属性，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
:
目录
1.为什么要用计算属性？2.计算属性和方法的区别？1.差异？3.计算属性的使用场景？4.修改后的计算属性的值汇总？1.监控属性？2.监控属性和计算属性的区别？3.监控复杂物体。
一、为什么要使用计算属性
什么是计算属性
计算属性：可以理解为一种属性，在其中可以编写一些计算逻辑。具有以下功能：
减少模板中的计算逻辑。数据缓存。当我们的数据没有改变时，将不会再次执行计算过程。从属数据类型(响应数据)不能是普通的全局数据。当数据量较大时，计算属性可以帮助我们提高性能，因为计算属性只有在数据发生变化时才会被计算。
在解释计算属性之前，让我们看一下下面的示例：
需求：外卖套餐A在15元，顾客订了3份，总价打八折。送货费是5元。界面上需要显示总价，代码如下：
模板
差异
Div您总共购买了{{info.name}}份副本/div。
H1总价：{ { info . count * info . price * info . saleinfo . freight } }元/h1
/div
/模板
脚本
导出默认值{
名称：“测试”，
data(){
返回{
信息：{
userId:1，
价格：15，
名称： A包，
计数：3，
销售额：0.8，
运费：5英镑
}
}
}
}
/脚本
界面操作效果：
看了上面的例子，可能有人会问：如果已经用这种方法实现了需求，为什么还需要使用计算属性呢？我们知道，vue中模板中的表达式是非常方便的，最初是为了简单操作而设计的。如果在模板中放入过多的逻辑会使模板过于沉重，难以维护，那么看看上面的代码：
H1总价：{ { info . count * info . price * info . saleinfo . freight } }元/h1
在这段代码中，模板不再是简单的声明性逻辑，而是复杂的逻辑计算。如果要参考多个地方的总价，就很难维持了。因此，对于任何复杂的逻辑，都应该使用计算属性。
请看以下使用计算属性的示例：
模板
差异
H1计算属性/h1
Div您总共购买了{{info.name}}份副本/div。
！-使用计算属性：与绑定普通属性相同-
H1总价：{{totalPrice}}元/小时
/div
/模板
脚本
导出默认值{
名称： ComputedDemo ，
data(){
返回{
信息：{
userId:1，
价格：15，
名称： A包，
计数：3，
销售额：0.8，
运费：5英镑
}
}
},
计算值：{
//定义计算属性totalPrice
totalPrice:function(){
return this . info . count * this . info . price * this . info . sale this . info . freight
}
}
}
/脚本
界面显示效果：
注意：计算属性是一个属性，而不是一个方法。它不能写在方法中，而是放在计算属性中。
上述计算属性也可以写成ES6:
//写入ES6
总价格(){
return this . info . count * this . info . price * this . info . sale this . info . freight
}
二、计算属性和方法的区别
1、区别
除了计算属性之外，还可以使用方法来实现上面的示例：
模板
差异
H1计算属性/h1
Div您总共购买了{{info.name}}份副本/div。
！-使用计算属性：与绑定普通属性相同-
H1使用计算属性得到总价：{{totalPrice}}元/h1
使用h1方法得到总价：{{getTotalPrice()}}元/h1
/div
/模板
脚本
导出默认值{
名称： ComputedDemo ，
data(){
返回{
信息：{
userId:1，
价格：15，
名称： A包，
计数：3，
销售额：0.8，
运费：5英镑
}
}
},
计算值：{
//定义计算属性totalPrice
//totalPrice:function(){
//返回this . info . count * this . info . price * this . info . sale this . info . freight；
//}
//写入ES6
总价格(){
返回this . info . count * this . info . price * this . info . sale this . info . freight；
}
},
方法：{
getTotalPrice(){
返回this . info . count * this . info . price * this . info . sale this . info . freight；
}
}
}
/脚本
界面显示效果：
从上面的例子可以看出，计算属性和方法的最终效果是一样的。那么计算属性和方法有什么区别呢？属性基于它们的响应依赖关系被缓存，并且仅当响应依赖关系改变时才被重新评估。这意味着，只要响应依赖关系没有改变，对计算属性的多次访问将立即返回先前的计算结果，而不必再次执行计算。相反，调用方法总是会再次执行函数。总价属性和方法的区别如下：
依赖关系改变时，计算属性自动改变，而依赖关系改变时，需要触发方法改变。当依赖项更改时，会重新计算属性，并且每次调用方法时都会执行该方法。请看下面的例子：
模板
差异
H1计算属性/h1
！- div您总共购买了{{info.name}}份{{info.count}}的/div-
！-使用计算属性：与绑定普通属性相同-
您购买了输入type= text v-model= info . name /
数量输入类型= text v-model= info.count/
H1使用计算属性得到总价：{{totalPrice}}元/h1
Button @click=getTotalPrice 计算属性/button
H1用该方法得到的总价为：{{data}}元/h1
/div
/模板
脚本
导出默认值{
名称： ComputedDemo ，
data(){
返回{
信息：{
userId:1，
价格：15，
名称： A包，
计数：3，
销售额：0.8，
运费：5英镑
},
数据：0
}
},
计算值：{
//定义计算属性totalPrice
//totalPrice:function(){
//返回this . info . count * this . info . price * this . info . sale this . info . freight；
//}
//写入ES6
总价格(){
Console.log(计算属性)；
返回this . info . count * this . info . price * this . info . sale this . info . freight；
}
},
方法：{
getTotalPrice(){
Console.log(“方法”)；
this . data=this . info . count * this . info . price * this . info . sale this . info . freight；
}
}
}
/脚本
当依赖关系改变时，会多次打印“计算属性”，直到点击按钮，方法才会改变。在依赖关系不变的情况下点击按钮，也会打印出“方法”。如下图所示：
2、计算属性使用场景
如果我们有一个高性能代价的计算属性A，它需要遍历一个巨大的数组，做大量的计算，然后我们可能会有其他依赖于计算属性A的计算属性，如果你不使用计算属性，它必然会被计算很多次，会消耗很多性能。在这种情况下，您需要使用计算属性。
三、修改计算属性的值
在上面的例子中，计算属性的值是通过使用获得的，那么如何修改计算属性的值呢？请看下面的例子：
模板
差异
H1修改计算属性/h1
h2num:{{num}}/h2
H2计算属性num2:{{num2}}/h2
Button @click=change 更改计算属性/按钮的值
/div
/模板
脚本
导出默认值{
名称： ComputedDemo2 ，
data(){
返回{
数量：100
}
},
计算值：{
num2(){
返回this . num-10；
}
},
方法：{
更改(){
this.num2=60
}
}
}
/脚本
效果：
这时你会发现，直接修改计算属性的值会给出一个错误，因为你不能直接修改计算属性的值。如果要修改计算属性的值，需要修改其依赖项的值。请参见以下代码：
模板
差异
H1修改计算属性/h1
h2num:{{num}}/h2
H2计算属性num2:{{num2}}/h2
Button @click=change 更改计算属性/按钮的值
/div
/模板
脚本
从“http”导入{ get }；
导出默认值{
名称： ComputedDemo2 ，
data(){
返回{
数量：100
}
},
计算值：{
num2:{
//当要修改计算属性时，首先触发set方法。
//读取当前计算属性中的值。get方法可以隐藏，默认条目是get方法。
get:function(){
返回this . num-10；
},
集合：函数(val){
this.num=val
}
}
},
方法：{
更改(){
//不能直接修改计算属性。
this.num2=60
}
}
}
/脚本
修改前的效果：
修改后的效果：
总结
不能修改计算属性的值。如果要修改计算属性的值，必须通过计算属性中的set方法修改其依赖项的值。
四、监听属性
监控属性(watch)用于监控数据中的数据是否发生变化，通常是监控数据中的某个属性。
一个更加灵活和通用的API。Watch可以执行任何逻辑，比如函数节流、Ajax异步数据获取，甚至DOM操作。
1、监听普通属性
请看下面的代码：
模板
差异
H1监听属性/h1
name:input type= text v-model= username /
h1 { {用户名}}/h1
年龄：输入类型=text v-model=age/
h1 { {年龄}}/h1
/div
/模板
脚本
导出默认值{
名称：观看演示，
data(){
返回{
用户名：“abc”，
年龄：23岁
}
},
方法：{
更改(){
}
},
观察：{
//侦听用户名的更改
//有两个参数，newValue表示更改后的值，oldValue表示更改前的值。
用户名：函数(新值，旧值){
Console.log(修改前值： old value )；
Console.log(修改值： new value )；
},
//倾听年龄的变化
年龄：函数(新值，旧值){
Console.log(修改前值： old value )；
Console.log(修改值： new value )；
}
}
}
/脚本
界面效果：
2、监听属性和计算属性的区别
监视属性和计算属性之间的主要区别如下：
属性表现更好。一个监控属性只能监控一个属性的变化。如果要同时监控多个属性，就要写多个监控属性，而计算属性可以同时监控多个数据的变化。侦听属性以获取更改前的属性值。属性能做什么，手表就能做什么，反之亦然。您可以使用计算属性。尽可能使用计算属性。
要求：当用户名或年龄改变时，打印出当前的用户名和年龄值。
用监听属性实现：
模板
差异
H1监听属性/h1
name:input type= text v-model= username /
h1 { {用户名}}/h1
年龄：输入类型=text v-model=age/
h1 { {年龄}}/h1
！-打印用户名和年龄的值-
h1{{info}}/h1
/div
/模板
脚本
导出默认值{
名称：观看演示，
data(){
返回{
用户名：“abc”，
年龄：23，
信息：“”
}
},
方法：{
更改(){
}
},
观察：{
//侦听用户名的更改
//有两个参数，newValue表示更改后的值，oldValue表示更改前的值。
用户名：函数(新值，旧值){
//console.log(修改前的值： old value )；
//console . log( modified value: new value )；
This.info=我的名字： this.userName ，年龄： this . age ；
},
//倾听年龄的变化
年龄：函数(新值，旧值){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
this.info=我的姓名：这个用户名，年龄：“this.age
}
}
}
/脚本
如果要实现上述的需求，则需要对用户名和年龄都进行监听，监听属性里面的代码都是重复的，如果有多个，那么就要写多个监听属性。在看计算属性：
模板
差异
氕监听属性/h1
姓名：输入类型=text v-model=userName/
h1 { {用户名}}/h1
年龄：input type=text v-model=age/
h1 { {年龄}}/h1
！-打印用户名和年龄的值-
！- h1{{info}}/h1 -
！-使用计算属性-
h1{{getUserInfo}}/h1
/div
/模板
脚本
导出默认值{
名称：观看演示，
data(){
返回{
用户名：“abc”，
年龄：23,
信息：""
}
},
方法：{
更改(){
}
},
//观察：{
////监听用户名的变化
////有两个参数，新值表示变化后的值，旧值表示变化前的值
//userName:function(newValue，oldValue){
////console.log(修改前的值：旧值)；
////console.log(修改后的值：新值)；
//this.info=我的姓名：这个用户名，年龄：“this.age
//},
////监听年龄的变化
//age:function(newValue，oldValue){
////console.log(修改前的值：旧值)；
////console.log(修改后的值：新值)；
//this.info=我的姓名：这个用户名，年龄：“this.age
//}
//}
计算值：{
getUserInfo(){
返回我的姓名：这个用户名，年龄：“this.age
}
}
}
/脚本
如果使用计算属性则只需要写一次就可以实现上面的需求了。
3、监听复杂对象
上面的例子中是监听的普通属性，那么如何监听对象里面的属性呢？看下面的代码：
模板
差异
氕监听属性/h1
姓名：输入类型=text v-model=userName/
h1 { {用户名}}/h1
年龄：input type=text v-model=age/
h1 { {年龄}}/h1
！-打印用户名和年龄的值-
！- h1{{info}}/h1 -
！-使用计算属性-
h1{{getUserInfo}}/h1
！-监听对象属性-
氕监听对象属性/h1
姓名：输入类型= text v-model= obj。名称/
h1{{obj.name}}/h1
/div
/模板
脚本
导出默认值{
名称：观看演示，
data(){
返回{
用户名：“abc”，
年龄：23,
信息：,
//对象
目标
名称："123"
}
}
},
方法：{
更改(){
}
},
观察：{
//监听用户名的变化
//有两个参数，新值表示变化后的值，旧值表示变化前的值
用户名：函数（新值，旧值){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
this.info=我的姓名：这个用户名，年龄：“this.age
},
//监听年龄的变化
年龄：函数（新值，旧值){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
this.info=我的姓名：这个用户名，年龄：“this.age
},
//监听对象中属性的变化
obj.name:function(newValue，oldValue){
console.log(修改前的值：旧值)；
console.log(修改后的值：新值)；
}
},
计算值：{
getUserInfo(){
返回我的姓名：这个用户名，年龄：“this.age
}
}
}
/脚本
效果：
能不能执行监听对象呢？答案是可以的，看下面代码：
模板
差异
氕监听属性/h1
姓名：输入类型=text v-model=userName/
h1 { {用户名}}/h1
年龄：input type=text v-model=age/
h1 { {年龄}}/h1
！-打印用户名和年龄的值-
！- h1{{info}}/h1 -
！-使用计算属性-
h1{{getUserInfo}}/h1
！-监听对象属性-
氕监听对象属性/h1
姓名：输入类型= text v-model= obj。名称/
h1{{obj.name}}/h1
！-监听对象-
氕监听对象/h1
姓名：输入类型= text v-model= obj。名称/
h1{{obj.name}}/h1
/div
/模板
脚本
导出默认值{
名称：观看演示，
data(){
返回{
用户名：“abc”，
年龄：23,
信息：,
//对象
目标
名称："123"
}
}
},
方法：{
更改(){
}
},
观察：{
//监听用户名的变化
//有两个参数，新值表示变化后的值，旧值表示变化前的值
用户名：函数（新值，旧值){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
this.info=我的姓名：这个用户名，年龄：“this.age
},
//监听年龄的变化
年龄：函数（新值，旧值){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
this.info=我的姓名：这个用户名，年龄：“this.age
},
//监听对象中属性的变化
//obj.name:function(newValue，oldValue){
//console.log(修改前的值：旧值)；
//console.log(修改后的值：新值)；
//}
//直接监听对象
目标
//处理程序表示默认执行的函数
处理程序（新值，旧值){
console.log(修改前的值：)
console.log(旧值);
console.log(修改后的值：);
控制台。log(新值)；
},
//表示深度监听
//真：表示处理者函数会执行
//false:表示处理者函数不会执行
深：真的
}
},
计算值：{
getUserInfo(){
返回我的姓名：这个用户名，年龄：“this.age
}
}
}
/脚本
效果：
开源代码库代码地址：https://github。/江1988/计算机。饭桶
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。