Vue-监视属性(watch)简单说明和使用

╰半夏微凉° 2023-09-25 19:16 78阅读 0赞

## 前言 ##

可以先使用技术属性的方式编写天气案例，然后使用监视属性，通过对比，更加清晰明了

## 编写案例 ##

我们可以使用三木运算符实现对天气的更换，如果属性为真就是炎热，为假就是寒冷

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

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

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

但是不建议在插值语法里面做复杂操作，可以使用技术属性操作，利用插值语法获取计算属性的结果

## 计算属性完善案例 ##

使用计算属性完善案例，同时给按钮绑定单击事件去升级案例改变天气

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

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

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

代码到这对于这个案例基本就写完了，但是我想分享一个坑和一个使用技巧

## 坑 ##

我们改下代码，注意看，现在已经不用info这个计算属性和isHot这个属性了

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

我们单击按钮，发现vue开发工具对应的数据并没有改变，其实已经改变了，只是它觉得既然页面上已经没有用到这些改变数据的地方了，那么它就没必要更新了，反正它更新你也不用

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

通过控制台验证数据已经更新

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

这个问题也不严重，只是目前存在，说不定某天版本迭代就把这个坑填上了，只是希望大家知道这个坑！

## 使用技巧 ##

注意观察代码和案例，按钮只想做一件事，就是更改属性的值，那么我就不需要写那么多的代码去做一个简单的事情，而是把逻辑都写在单击事件里面

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

效果也是一样的，但是要说明下，如果事件的逻辑很简单只有一件事，这样写没有问题，如果有多个事，需要用;分开，比如：

<button @click="isHot=!isHot;a++">点击切换天气</button>

如果有多个逻辑需要处理，那么还是建议写在函数里面

## 监视属性完成案例 ##

在原有的技术上，通过监视属性的方式完成案例，监视isHot属性的变化，如果改变了，就要通知我，由我执行对应的逻辑,有两种监视方式，一一说明

### 监视方式1 直接使用watch ###

vue中通过watch实现监视，有一个handler函数，如果我们对监视属性的值进行修改的时候就会被调用，handler有两个参数，分别是修改前的值和修改后的值

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

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

还有一个函数叫immediate,默认为false，如果设置为true表示初始化时候让handler调用一下

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

我还没点击呢就自己调用了，还有更多的函数就不一一列举了

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

不只是可以监视data中的属性，也可以监视computed里面的计算属性

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

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

相关代码

### 监视方式2 使用$watch() ###

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

### 两种监视方式如何选择 ###

如果很明确的知道需要监视哪个属性，那么直接使用方式1的watch监视比较合适，如果说不知道要检测谁，后续根据用户的行为才知道检测谁，那么方式2使用$watch无疑是更好的

## 总结watch ##

监视属性watcher:  
1 当被监视的属性发生变化时，回调函数自动调用，进行相关逻辑处理  
2 监视的属性必须存在，才能进行监视  
3 监视的两种写法：  
（1）.new Vue时传入watch配置  
（2）通过vm.$watch监视

## 深度监视 ##

在监视属性的技术上，再学习深入的深度监视，还是天气的案例，再次基础上加一个新的功能

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

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

接下来提出需求，我想要监视a的变化，我们如果直接写number,a的话会报错，因为这个key是错误格式的，所以面对这种情况，我们需要还原成原始key的写法，也就是’number.a’,这种写法适用于多级属性结构

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

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

如果我想要监视属性b呢？  
我一开始想到的笨办法是，复制a的监视改为b，但是如果number里面如果有成千上万个数据呢。。  
不如直接监视number，并且配置一个新的属性：deep(有深度的)，默认false，改为true就表示深度监视对象的每一个属性变化

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            <h2>今天天气很{
       {info}}</h2>
            <button @click="changeWeather">点击切换天气</button>
            <hr/>
            <h2>a的值是:{
       {number.a}}</h2>
            <button @click='number.a++'>点我让a自增</button>
            <hr/>
            <h2>b的值是:{
       {number.b}}</h2>
            <button @click='number.b++'>点我让b自增</button>
        </div> 
        <script type="text/javascript">
            //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键
            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:{
                     //监视多级结构中某个属性的变化
                   /*   'number.a':{
                        immediate:true, //初始化时候让handler调用一下
                        handler(newValue,oldValue){
                            console.log('a被修改了',newValue,oldValue)
                        }
                    } */
                    //监视多级结构中所有属性的变化
                    number:{
                        deep:true, //开启深度监视
                        immediate:true, //初始化时候让handler调用一下
                        handler(newValue,oldValue){
                            console.log('number被修改了',newValue,oldValue)
                        }
                    }
                }
            })
            
        </script>
    </body>
    
    </html>

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

## 总结深度监视 ##

深度监视：  
（1）vue中的watch默认不监测对象内部值的改变（一层）  
（2）配置deep:true可以监测对象内部值改变（多层）  
备注：  
（1）vue自身可以监测对象内部值的改变，但vue提供的watch默认  
（2）使用watch时根据数据的具体结构，决定是否采用深度监视

## 监视的简写形式 ##

### watch简写 ###

监视是可以简写的，但是有两个前提：  
1 不需要immediate（初始化调用）  
2 不需要deep（深度监视）  
也就是说当配置项只有handler的时候，就可以开启简写形式  
写法如下：

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

效果也是一样的

### watch简写 ###

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

友情提示：函数要用普通函数去写，不能使用箭头函数，不然this就不是vue实例对象了

完整代码如下

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            <h2>今天天气很{
       {info}}</h2>
            <button @click="changeWeather">点击切换天气</button>
        </div> 
        <script type="text/javascript">
            //Vue.config.keyCodes.huiche=13 // 定义了一个叫huiche的别名按键，这个按键对应的键码是13,也就是enter回车键
            const vm=new Vue({
                el:'#root',
                data:{
                    //布尔值，如果为真就是天气热，为假就是天气冷
                    isHot:true
                },
                computed:{
                    info(){
                        return this.isHot?'炎热':'寒冷'
                    }
                },
                methods: {
                    changeWeather(){
                        // 直接两极反转
                        this.isHot=!this.isHot
                    }
                },
                watch:{
                    // 正常写法
                   /*  isHot:{
                        immediate:true, //初始化时候让handler调用一下
                        // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值
                        handler(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                        }
                    } */
                    // 简写写法
                   /*  isHot(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                    } */
                }
            })
            // $watch正常格式
            /*   vm.$watch('isHot',{
                immediate:true, //初始化时候让handler调用一下
                        // handler什么时候被调用？ 当isHot发生改变时，就会发生调用 有两个参数，分别是修改前的值和修改后的值
                        handler(newValue,oldValue){
                            console.log('isHot被修改了',newValue,oldValue)
                        }
              }) */
                // $watch简写格式
                vm.$watch('isHot',function(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
    
                })
        </script>
    </body>
    
    </html>

## computed和watch之前的区别 ##

computed和watch之前的区别  
1 computed能够完成的功能，watch都能完成  
2 watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作  
两个重要的小原则：  
1 所被vue管理的函数，最好都写成普通函数，这样this指向的才是vue实例对象  
2 所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数等），最好都写成箭头函数，这样this指向的才是vm或组件实例对象

[2942f89b37fd4fc49b787d75e0bcea70.png]: https://img-blog.csdnimg.cn/2942f89b37fd4fc49b787d75e0bcea70.png
[8ad951e3b70045788498c9472d4d3c87.png]: https://img-blog.csdnimg.cn/8ad951e3b70045788498c9472d4d3c87.png
[2b4d787a2f8c4c5f8d3a48ab5d35c481.png]: https://img-blog.csdnimg.cn/2b4d787a2f8c4c5f8d3a48ab5d35c481.png
[c20b2dc0bb44471d8563b401e7f6e218.png]: https://img-blog.csdnimg.cn/c20b2dc0bb44471d8563b401e7f6e218.png
[41d2edc2068f4f9499d87d298166508c.png]: https://img-blog.csdnimg.cn/41d2edc2068f4f9499d87d298166508c.png
[f352637f4eb44867a1f2345822cb59e8.png]: https://img-blog.csdnimg.cn/f352637f4eb44867a1f2345822cb59e8.png
[12eeb4ba82a44c8fab0a7e0f4ee8799d.png]: https://img-blog.csdnimg.cn/12eeb4ba82a44c8fab0a7e0f4ee8799d.png
[c0da531428e348bbaec33d404d75484c.png]: https://img-blog.csdnimg.cn/c0da531428e348bbaec33d404d75484c.png
[6cc9266b31fc4018bb553548292b9750.png]: https://img-blog.csdnimg.cn/6cc9266b31fc4018bb553548292b9750.png
[5ddd88ad96214cb291fd320a34155997.png]: https://img-blog.csdnimg.cn/5ddd88ad96214cb291fd320a34155997.png
[1af45d023c9b4797a1dbc76044f560cb.png]: https://img-blog.csdnimg.cn/1af45d023c9b4797a1dbc76044f560cb.png
[4c60a6b81bab4a8dbbcc1ea3202e95cd.png]: https://img-blog.csdnimg.cn/4c60a6b81bab4a8dbbcc1ea3202e95cd.png
[763089290d304b03b5c686c5995b5923.png]: https://img-blog.csdnimg.cn/763089290d304b03b5c686c5995b5923.png
[3d58d5e259794700bc57a50f1d82c345.png]: https://img-blog.csdnimg.cn/3d58d5e259794700bc57a50f1d82c345.png
[0db64f6988cc4240b0fc51b46e0dfa7c.png]: https://img-blog.csdnimg.cn/0db64f6988cc4240b0fc51b46e0dfa7c.png
[129004f337854e879624d6cbceccf2c8.png]: https://img-blog.csdnimg.cn/129004f337854e879624d6cbceccf2c8.png
[129a44d7e00e45fe8cd4f719b13b3530.png]: https://img-blog.csdnimg.cn/129a44d7e00e45fe8cd4f719b13b3530.png
[f609ed2c3c004c4e9821d62fa4f05893.png]: https://img-blog.csdnimg.cn/f609ed2c3c004c4e9821d62fa4f05893.png
[b71e1a118b1c46cb89419d870418c04e.png]: https://img-blog.csdnimg.cn/b71e1a118b1c46cb89419d870418c04e.png
[debdbd9148fc4517bddc35aa7302941e.png]: https://img-blog.csdnimg.cn/debdbd9148fc4517bddc35aa7302941e.png
[05385565254845c1a9fcd80afecc33e3.png]: https://img-blog.csdnimg.cn/05385565254845c1a9fcd80afecc33e3.png
[745f116f338948598e73417efcaf4366.png]: https://img-blog.csdnimg.cn/745f116f338948598e73417efcaf4366.png
[8328c58b14d64306a6938dc47013ad84.png]: https://img-blog.csdnimg.cn/8328c58b14d64306a6938dc47013ad84.png
[633ecb28f96b4353937a5e3a498755d5.png]: https://img-blog.csdnimg.cn/633ecb28f96b4353937a5e3a498755d5.png