Vue之侦听属性:watch

2021-08-26 19:01:52 阅读：196 来源： 互联网

侦听属性: watch

当属性变化时, 回调函数自动调用, 在函数内部进行计算
监视的属性必须存在,才能进监视

监视的两种写法:

new Vue时传入watch配置

watch:{
 isHot:{
 immediate:true,//初始化时，让handler调用一下
 deep:true,//深度监视
//当isHot发生改变时，handler被调用
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
  }
 }
}

通过vm.$watch监视

vm.$watch('isHot',{
  immediate:true,//初始化时，让handler调用以下
  //当isHot发生改变时，handler被调用
   deep:true,//深度监视
 handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
  }
})

监视属性的简写：配置项不需要immediate\deep时才能使用

isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
}

深度监视:

vue中的watch默认不监测对象内部值的改变(一层）
配置deep:true可以监测对象内部值改变(多层）
备注:Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以;使用watch时根据数据的具体结构,决定是否采用深度监视。

computed和watch之间的区别:

computed能完成的功能，watch都可以完成。

watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作
两个重要的小原则;

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

总结:

vue会监视data中所有层次的数据
如何监测对象中的数据?
- 通过setter实现监视，且要在new Vue时就要传入监测数据
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API
  - Vue.set(target.propertyName/index.value) 或
  - vm.$set(target.propertyName/index.value)
如何监测数组中的数据
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
在Vue修改数组中的某个元素一定要使用以下方法
- 使用这些API：push()、pop()、shift()、unshift()、splice()、reverse()
- Vue.set()或vm.$set()
  - 特别注意Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

标签：Vue,watch,isHot,vm,oldValue,监视,侦听
来源： https://www.cnblogs.com/EvanYou068/p/15191119.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。