Vue：（九）深度监视

最新推荐文章于 2024-02-21 00:29:00 发布

置顶空谷有来人

最新推荐文章于 2024-02-21 00:29:00 发布

阅读量277

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128167718

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）
配置deep:true可以监测对象内部值的改变（多层）

备注：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>天气案例_深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>今天天气很{{info}}</h2>
      <button @click="changeWeather">天气切换</button>
      <br />
      <h3>a的值是{{number.a}}</h3>
      <button @click="number.a++">点我实现a+1</button>
      <h3>b的值是{{number.b}}</h3>
      <button @click="number.a++">点我实现b+1</button>
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el: '#root',
        data: {
          isHot: true,
          number: {
            a: 1,
            b: 1,
          },
        },
        computed: {
          info() {
            return this.isHot ? '炎热' : '凉爽'
          },
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot
          },
        },
        watch: {
          isHot: {
            immediate: true, // 初始化时让handler调用一下
            handler(newValue, oldValue) {
              console.log('isHot被调用了', newValue, oldValue)
            },
          },
          // 监视多级结构中某个属性的变化
          // 'number.a': {
          //   handler() {
          //     console.log('a改变了')
          //   },
          // },
          number: {
            deep: true,
            handler() {
              console.log('number被调用了')
            },
          },
        },
      })
    </script>
  </body>
</html>

以上就是深度监视的全部内容了，关键点就是deep属性。我是空谷有来人，谢谢大家。