【Vue】监视属性

太过爱你忘了你带给我的痛 2024-04-01 09:21 103阅读 0赞

#### 目录 ####

*   *   *  1. 场景引入
         *  2. watch
         *  3. 深度监视
         *  4. 监视属性简写
         *  5. 小结

#### 1. 场景引入 ####

在实际开发中，有时开发者需要根据某个属性的变化，做出相应的决策，因此`Vue`为开发者提供了`watch`.这一监视属性，用于实现此类需求。比如下面这个场景，开发者要监测天气的变化，每次点击切换天气，就会变化，要求我们对不同的天气做出不同的处理。

![在这里插入图片描述][0d151dcfd68d4b05bdd310133b6955e5.png]

![在这里插入图片描述][81b6097a3f354cbabd6fa45da20c2387.png]

#### 2. watch ####

我们在vm中加入watch属性，

监视属性中的**函数**，能够通过获取**newValue**和**oldValue**的值，进行监视到属性改变后的一些操作；

接收**两个**参数：

\*\*newValue：\*\*表示新的值

\*\*oldValue：\*\*表示改变前的值

![在这里插入图片描述][ce74e5884961497ca66faf1d09fcdf21.png]

watch:{
                isHot:{
                    handler(newValue,oldValue){
                        console.log("天气被修改了"+newValue+oldValue);
                    }
                }

我们再次尝试，控制台打印出了天气的变化

![在这里插入图片描述][ad949e5990774884b48cfa0420efec4d.png]

**immediate属性**

实现**初始化**的时候**调用一次**监视函数handler，默认为**false**

watch:{
                isHot:{
                    immediate:true,
                    handler(newValue,oldValue){
                        console.log("天气被修改了"+newValue+oldValue);
                    }
                }

![在这里插入图片描述][d145d296795f4129ba8d58d20b14f2b2.png]

同时watch存在第二种写法，在vm对象外面

![在这里插入图片描述][b3d722dac3d94b079067cec2b4665c3c.png]

#### 3. 深度监视 ####

`watch`默认监视单层属性的改变，想实现监测多层结构需要使用`deep`属性

监视多级结构中某个属性的变化  
watch:\{ “numbers.a”:\{ … \} \} //numbers是data上的一个key，里面包含a

这里注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号

**`deep`属性**  
用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化  
![在这里插入图片描述][d5d31c8051a5494c8cf6734a8a60bbf6.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    <div id="root">
        <h2>今天天气很{
       {info}}</h2>
        <button @click="changeWeather">切换天气</button><hr/>
        <button @click="numbers.a++">点我a++</button>
        <h3>{
       {numbers.a}}</h3>
        <button @click="numbers.b++">点我b++</button>
        <h3>{
       {numbers.b}}</h3>
    </div>
    </body>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
          
            el:'#root',
            data:{
          
                isHot:true,
                numbers:{
          
                    a:1,
                    b:1,
                }
            },
            computed:{
          
                info(){
          
                    return this.isHot ? '炎热':'寒冷'
                }
            },
            methods:{
          
                changeWeather(){
          
                    this.isHot = !this.isHot
                }
            },
            watch:{
          
                numbers:{
          
                    deep:true,
                    handler(){
          
                        console.log('numbers被修改');
                    }
                }
            }
    
        })
      /*  vm.$watch('isHot',{
            immediate:true,
            handler(newValue,oldValue){
                console.log("天气被修改了"+newValue+oldValue);
            }
        })*/
    </script>
    </html>

![在这里插入图片描述][a9f33d9c8f294e58b41d29f3477722e9.png]

可以看到，点击a或者b++的按钮是有被检测到的  
![在这里插入图片描述][544758c8c9ce4fd2a2814edab424c052.png]

#### 4. 监视属性简写 ####

与计算属性类似，当**不需要使用其他属性**，**只使用handler属性**时，可以使用简写形式

isHot(newValue,oldValue){
                    console.log("天气被修改了"+newValue+oldValue);
                }

函数写法：

vm.$watch('isHot',function(newValue,oldValue){
                console.log("天气被修改了"+newValue+oldValue);
            }

#### 5. 小结 ####

小结一下：  
![在这里插入图片描述][ab7023f3167b4be491ed4b461933b2c8.png]

[0d151dcfd68d4b05bdd310133b6955e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1195ec87260043d0b8d619e543cb6603.png
[81b6097a3f354cbabd6fa45da20c2387.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c5e4fcadc0954ed2bfe96c70b56afc34.png
[ce74e5884961497ca66faf1d09fcdf21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/841284ead66140eabc5a1c8613be8ecb.png
[ad949e5990774884b48cfa0420efec4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/86e95acd13c64be3be9f7b5ee90ae457.png
[d145d296795f4129ba8d58d20b14f2b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/50b83977084b4c70827543f22c4d22d6.png
[b3d722dac3d94b079067cec2b4665c3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a1c61014d0aa4cd58971807ed88ad41c.png
[d5d31c8051a5494c8cf6734a8a60bbf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/594f53893da045e9983663b246fdd094.png
[a9f33d9c8f294e58b41d29f3477722e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/628587f492d04252ac2ac250bef621b3.png
[544758c8c9ce4fd2a2814edab424c052.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b593ec201d1c43dea5fd140da23281f5.png
[ab7023f3167b4be491ed4b461933b2c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/52d2aebf49744649990efd0a7e4a3bdd.png