14_Vue监视属性

顾名思义，监视一个属性的变化

1|0需求

• 按照之前案例，isHot的值发生改动的时候
• 我需要知道这件事，isHot发生改变，就需要通知我

2|0watch

• key值：你想监视的属性名（data配置项中的isHot）
• value值：对象类型

1|0handler配置项

• handler函数
  • isHot发生改变的时候调用
• handler的返回值
  • newValue修改后的值
  • oldValue修改前的值

测试

1|0immediate配置项

• 初始化页面的时候，让handler调用一下

2|1不写watch配置

后续根据用户行为，可以使用这个，其实都差不多

• 在vue实例当中也准备了一个watch的属性供我们调用
• 需要两个参数
  • 监视的属性名
  • 内部有一个配置项，用来配置内部的key-value

// vue自带的
    vm.$watch('isHot', {
        // 页面加载完毕的时候，调用一下handler
        immediate: true, // 默认为false

        // 修改后的值，修改前的值
        handler(newValue, oldValue) {
            console.log("isHot发生了修改，修改后为：" + newValue + "修改前：" + oldValue);
        }
    })

• 我们需要注意一下层级关系
• 这是层级关系图
• vm实例和下方调用vm的$watch是同级关系

isHot是带了引号的，不能直接写

3|0深度监视

3|1需求

1. 现在我data当中有一个对象类型的属性，numbers
   • 这个numbers当中有很多很多子属性
   • 
2. 分别为a与b设置点击事件，该事件 让其+1
3. 现在提一个需求，我如何监视到a的变化（b不管）

3|2多级结构监视变量写法

• 需求是，监视 data 当中 的 numbers对象当中
• 属性a的变化，当a发生变化的时候，出现提示

1|0分析

• 既然是监视属性，那么就需要使用watch配置项或者vue实例上的$watch
• 按照原来的写法
  • 
  • isHot为我们监视的属性，他可以这么写，但实际上在对象当中的属性
  • 属性名原始写法是需要写引号的，不写引号就会报错
• 这种写法也可以用来书写多级目录结构
  • 
  • 

1|0代码

html

<!-- 创建一个容器 -->
    <div class="app">
        <!-- a -->
        <h1 class="number">a的值为:{{numbers.a}}</h1>
        <!-- 按钮 -->
        <input type="button" value="点我让a+1" @click="numbers.a ++">
        <!-- b -->
        <h1 class="number">b的值为:{{numbers.b}}</h1>
        <!-- 按钮 -->
        <input type="button" value="点我让b+1" @click="numbers.b ++">
    </div>

js

<script>
    var vm = new Vue({
      el: '.app',
      data: {
        name: 'wavesbright',
        numbers:{
            a:1,
            b:1
        }
      },
      watch:{
        // 监视numbers当中a值发生变化的时候
        'numbers.a':{
            handler(){
                console.log("numbers的a属性发生变化，发生了累加");
            }
        }
      }

    });
</script>

1|0测试

1|0问题

• 如果我要 监视属性b，那么用这个写法也可以做到
• 但是，如果这个numbers的配置当中有100个、1000个key-value呢
• 这样写不是原地爆炸？

1|0需求

• 当numbers的内部属性只要发生变化，那么就要通知我
• 那这时候，直接监听numbers不就行了？
• 试试就逝世
  • 

测试

• 控制台并没有打印输出信息哦，为什么呢？
• 这个写法是，我们监听的是numbers这个整体
• 在其内部的属性发生变化是检测不到的，不能这么写
• 我们测试一下就知道了

问题来了，如何完成需求，内部属性发生变化，外部能检测到？

3|3watch的deep配置项

• 开启深度监视
• 监视多及结构中，所有属性的变化
• 默认值是false

测试

4|0总结

1. Vue当中watch这个配置项，默认情况下，不会检测对象内部值的改变

   • numbers:{a:1,b:2}
     

2. watch中配置deep = true，即可监视内部多级结构的改变

   • watch:{deep:true}
     

3. 注意

   1. Vue自身是可以监视的，Vue提供的watch是默认是不可以的
   2. 使用watch可以根据属性的具体结构，决定是否采用 深度监视

5|0监视的简写形式

5|1前提

你不需要使用深度监视（deep），页面发生变化的时候调动handler（immediate）

5|2watch写法

其实和计算属性一样，包装成函数形式

5|3$watch写法

__EOF__

本文作者：muzlei
本文链接：https://www.cnblogs.com/wavesbright/p/16836530.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！