vue监听对象属性的变化,vue监视属性
监控属性可以监控某个属性，当被监控属性的值发生变化时，就会执行相应的功能。下面这篇文章主要介绍Vue的监听属性的相关信息，有需要的朋友可以参考一下。
目录
什么是倾听属性？监控属性和计算属性有什么区别？监听属性深度监听调用的使用写在最后。
什么是监听属性？
所谓监控，就是对内置对象的状态或属性的变化进行监控和响应的反应。监控属性意味着您可以监控其他数据的变化。
监听属性和计算属性的区别？
计算是在依赖值改变后重新计算结果并更新DOM，会被缓存。
属性监视属性值，当定义的值改变时，执行相应的函数。
使用上的主要区别：
属性不能执行异步任务。一般不使用计算属性来请求服务器或者执行异步任务，因为这可能需要很长时间，我们的计算属性要实时更新。因此，这个异步任务可以通过监听属性来完成。
总之：computed能实现的，watch都能实现，computed不能实现的，watch也能实现
监听属性的使用
使用watch配置项，在配置项中写入要监控的属性。每次属性值发生变化，都会回调处理函数，还可以监控计算出的属性的变化。
示例：
监视输入框中的变化。
密码
模板
div class=main
me:El-input v-model= name placeholder=请输入您的姓名/el-input
1el-input v-model= friends . friend _ 1 placeholder=请输入您的名字/el-input
2el-input v-model= friends . friend _ 2 placeholder=请输入您的名字/el-input
/div
/模板
脚本
导出默认值{
data(){
返回{
名称：“浪漫共耕”，
朋友：{friend_1:张三，friend_2:李四 }
}
},
观察：{
名称：{
Handler (newvalue，oldValue) {//newvalue新值，oldValue更改前的值。
console.log(新值，旧值)
This.friends.friend_1=王五
}
},
//监视多级结构中属性的变化
friends.friend_1 :
处理程序(新值，旧值){
console.log(新值，旧值)
}
},
friends.friend_2 :
处理程序(新值，旧值){
console.log(新值，旧值)
}
},
}
};
/脚本
深度监听
当我们的对象具有多层结构时，我们要监控的对象的属性有很多，因此我们需要避免单独编写每个属性。这时候就需要深度监控了。
在监视配置中，在监视属性对象中，将配置深度设置为true，以监视多级对象或数组的内部值的变化。
观察：{
//监控多级结构中所有属性的变化
朋友：{
处理程序(新值，旧值){
console.log(新值，旧值， aa )
},
Deep:true，//打开深度监听
}
}
注意：这里有个问题。深度监控中，新旧值相同？
原因：
官方解释是：
当改变(不替换)一个对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue不保留突变前值的副本。
是指针的变化。我的js就不能深度复制吗？这篇文章谈到了数据存储。
立即调用
与深度配置相同。
将immediate设置为true将立即触发当前处理程序回调。
观察：{
名称：{
Handler (newvalue，oldValue) {//newvalue新值，oldValue更改前的值。
console.log(新值，旧值)
This.friends.friend_1=王五
},
即时：正确
},
}
它在页面加载时执行一次，所以旧数据是未定义的。
写在最后
watch属性通常可用于持久化数据、调度事件并同步/异步执行它们，以及验证格式。
关于Vue监控属性的这篇文章到此为止。有关Vue监控属性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。