Vue中的watch监视属性

最新推荐文章于 2024-04-08 06:39:38 发布

仙女不下凡

最新推荐文章于 2024-04-08 06:39:38 发布

阅读量260

点赞数 2

分类专栏： Vue知识点集合文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_55181759/article/details/120140354

版权

Vue知识点集合专栏收录该内容

7 篇文章 0 订阅

订阅专栏

🍓 作者主页：💖仙女不下凡💖

🍓 欢迎点赞👍 收藏⭐ 留言📝 如有错误敬请指正！

🍓 前言介绍：以下👇 内容主要探讨监视属性watch的基本使用，另外大家在学习监视属性时，是否也跟我一样考虑过这个属性有什么存在的意义呢？与计算属性component等有什么区别呢？我会在近期更新它们的对比，请持续关注！

🌷1.监视属性watch的基本使用

🌞 通过watch监听data数据的变化，数据发生变化时，就会打印当前的值，基本使用方法如下。

<body>
  <div id="root">
    <h2>{{isHot}}</h2>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
    el: '#root',
    data: {isHot: true},
    watch: {  /第一种监视watch方法/
      isHot(newValue, oldValue) {
          console.log(newValue),  /这个是变化之前的数据/
          console.log(oldValue),  /这个是变化之后的数据/
      }
    }
  })
</script>

<script>
  /第二种监视watch方法, 不常用, 但是更灵活/
  vm.$watch(isHot(newValue, oldValue){})
</script>

🌞 所以监视属性最方便的就是更加容易获取数据变化前后的值。

🌷2.详解watch中的immediate、handler、deep属性

🌞 因为使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

<body>
  <div id="root">
    <h2>{{isHot}}</h2>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
    el: '#root',
    data: {isHot: true},
    watch: {
      isHot:{  /这里isHot是配置对象,也是监视的对象/
        immediate:true,  /初始化时让handler调用一下, 默认值为false/
        handler(newValue,oldValue){  /这个里面写方法/
          console.log(newValue,oldValue) 
        }  
      }
     }
  })
</script>

🌞 什么是深度监视deep？通过该案例理解深度监视-检测a和b的变化。

🌞 深度监视总结❶Vue自身可以监测对象内部值的变化，但Vue提供的watch默认不可以！❷使用watch时根据数据的具体结构，决定是否采用深度监视。

仙女不下凡

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中的watch监视属性

???? 作者主页：????仙女不下凡???????? 欢迎点赞???? 收藏⭐ 留言???? 如有错误敬请指正！???? 前言介绍：以下???? 内容主要探讨监视属性watch的基本使用，另外大家在学习监视属性时，是否也跟我一样考虑过这个属性有什么存在的意义呢？与计算属性component等有什么区别呢？我会在近期更新它们的对比，请持续关注！????1.监视属性watch的基本使用???? 通过watch监听data数据的变化，数据发生变化时，就会打印当前的值，基本使用方法如下。<bod
复制链接

扫一扫