vue侦听属性怎么使用,vue监听器和计算属性
属性用于处理复杂的业务逻辑。vue提供了一个检测数据变化的属性。watch可以通过newVal获得改变后的值。本文主要介绍Vue中计算属性和属性截取的相关信息。有需要的朋友可以参考一下。
:
目录
1.计算属性语法：1。缩写：语法：2。完成写作：
2.监控(监听)属性
1.监控属性手表：2。深度监控3。差异和原则总结。
1. 计算属性
定义
计算属性：要使用的属性不存在。要通过现有属性计算它，计算的属性必须有一个全新的计算的配置项。
对于Vue来说，数据中的数据就是属性。只要Vue中的数据发生变化，就会重新解析模板，再次调用插值语法中的方法。
原则
底层依赖于Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
它在第一次被读取时执行一次。
当相关数据改变时，它将被再次调用。
优势
与方法实现相比，内部有一个缓存机制(多路复用),更高效，调试更方便。
评论
计算属性最终会出现在vm(Vue实例)上，可以直接读取和使用。
如果要修改计算属性，必须编写集合函数来响应修改，计算所依赖的数据在集合中也会发生变化。
语法： 1.简写方式：
计算值：{
计算属性名(){
返回“值”
}
}
需求： 求2个数的和显示到页面上
模板
差异
p{{ num }}/p
/div
/模板
脚本
导出默认值{
data(){
返回{
甲：10分钟，
乙：20
}
},
//计算属性：
//场景：一个变量的值需要由另一个变量来计算。
/*
语法：
计算值：{
计算属性名(){
返回值
}
}
*/
//注意：计算属性和数据属性都是变量，它们不能同名。
//注2:如果函数中的变量发生变化，结果会自动重新计算并返回。
计算值：{
num(){
归还这个
}
}
}
/脚本
风格
/风格
语法： 2.完整写法：
计算属性以配置对象的格式编写：对象中使用get和set函数。
get函数：当有人读取fullName时，会调用get，返回的值作为计算属性的值(get必须写return)
什么时候会被叫去？1.第一次读全名的时候。2.当相关数据发生变化时。
get(){
Console.log(get被调用)
//console.log(this) //这里是vm(Vue实例)
返回this.firstName - this.lastName
},
Set:当计算属性的值被修改时，被调用的参数接收传入的新值。
.
计算值：{
全名：{
//get的作用是什么？当有人读取fullName时，会调用get，将返回值作为fullName的值。
//什么时候会调用//get？1.第一次读全名的时候。2.当相关数据发生变化时。
get(){
Console.log(get被调用)
//console.log(this) //这里是vm
返回this.firstName - this.lastName
},
//什么时候调用//set？当全名被修改时。
设置(值){
console.log(set ，值)
const arr=value.split(-)
this.firstName=arr[0]
this .姓氏=arr[1]
}
}
}
})
2. 监视（侦听）属性
！-绑定事件时：@xxx=yyy yyy可以写一些简单的语句-
button @click=isHot=！切换天气/按钮
1. 监视属性watch：
当被监控的属性发生变化时，自动调用处理程序回调函数执行相关操作。
监控前被监控的属性必须存在！
.
//写法1。传入观察器配置listening ishot属性。
观察：{
isHot:{
Immediate:true，//初始化时让handler调用它。
//什么时候调用//handler？当我改变的时候。
处理程序(新值，旧值){
Console.log(isHot已修改，newValue，oldValue)
}
}
}
})
//写2。由虚拟机监控。$手表
vm。$watch(isHot ，{
Immediate:true，//初始化时让handler调用一次，默认为false。
//什么时候调用//handler？当我改变的时候。
Handler(newValue，oldValue){ //有两个参数，一个是新值，一个是旧值。
Console.log(isHot已修改，newValue，oldValue)
}
})
2. 深度监视
深入监控：
1) watch in 1)Vue默认不监控对象内部值的变化(一层)。
2)配置deep:true以监控对象的内部值变化(多层)。
备注：
1)Vue本身可以监控对象内部值的变化，但是Vue提供的watch默认不能！
2)使用watch时，根据数据的具体结构决定是否采用深度监控。
数据：{
isHot:没错，
数字：{
答：1，
乙：1
}
},
观察：{
//监控多级结构中某个属性的变化(原写法要加引号，缩写可以省略，但这种情况要加，否则报错)
/* " numbers . a :{
处理程序(){
Console.log(a已更改)
}
} */
//监控多级结构中所有属性的变化
数字：{
Deep:true，//如果不打开这个，它会监控号码的地址是否有变化。
处理程序(){
Console.log(数字已更改)
}
}
}
物业监控-速记
当监控属性中只有handler()且不需要打开其他配置项时，可以缩写。
观察：{
isHot(新值，旧值){
Console.log(isHot已修改，newValue，oldValue，this)
}
}
/* vm。$watch(isHot ，function (newValue，oldValue) {
Console.log(isHot已修改，newValue，oldValue，this)
}) */
3. 区别和原则
计算机和手表的区别
手表能做计算机能做的所有功能。
watch能完成的功能，computed可能完成不了，比如watch可以执行异步操作。
两个重要原则
Vue管理的所有函数都应该写成普通函数，这样的重点就是vm或者组件实例对象。
所有不被Vue管理的函数(timer的回调函数，ajax的回调函数，Promise的回调函数等。)最好写成箭头函数，这样它就指向vm或组件实例对象。
观察：{
名字(val){
setTimeout(()={
Console.log(this) //vue实例对象，如果使用普通函数，将返回窗口
this . full name=val - this . last name
},1000);
},
姓氏(值){
this . full name=this . first name - val
}
}
总结
关于Vue中计算属性和属性截取的这篇文章到此为止。关于Vue中计算属性和属性拦截的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。