ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VUE 监视属性——watch

2021-11-27 13:02:27  阅读:214  来源: 互联网

标签:VUE handler watch isHot newValue Vue 监视 监听


 

  watch: {

    isHot: {

      immediate: true, // 初始化时让 handler 调用一下

      // handler 什么时候调用?当 isHot 发生改变时

      handler(newValue, oldValue) {

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

      }

    }

  }

 

 

  • 简写形式

    watch: {

      isHot(newValue, oldVaule) {

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

      }

    }

  • 深度监听

    deep: true

      (1)Vue 中的 watch 默认不监测对象内部值的改变(一层)。

    (2)配置 deep: true 可以监测对象内部值改变(多层)。

    备注:

      (1)Vue 自身可以监测对象内部值的改变,但 Vue 提供的 watch 默认不可以!

      (2)使用 watch 根据数据的具体结构,决定是否采用深度监听。

总结:

  1. 当被监听的属性变化时,回调函数自动调用,进行相关操作

  2. 监听的属性必须存在( data 或 computed 中存在),才能进行监听

  3. 监听的两种写法:

    (1)new Vue时传入 watch 配置

    (2)通过 vm.$watch 监听,vm.$watch('xxx') 要加引号,否则会读取变量是否存在

标签:VUE,handler,watch,isHot,newValue,Vue,监视,监听
来源: https://www.cnblogs.com/bulu08042/p/15611565.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有