Vue学习：监视属性--深度监视

最新推荐文章于 2024-05-15 12:56:18 发布

¡Venceremo

最新推荐文章于 2024-05-15 12:56:18 发布

阅读量634

点赞数

分类专栏： Vue 文章标签： vue.js 学习 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/128935768

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

监视一个多级对象的某一个属性变化（监视对象中的a变化）

需要对点击事件里面的事件处理进行简单函数编写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js引入/测试版本/vue.js"></script>
</head>

<body>
     <!-- 准备容器 -->
    <div id="root">
        <!-- 但是过于麻烦使用计算属性 -->
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点击使得a+1</button>
        
    </div>
    <script type="text/javascript">
     new Vue({
            el: '#root',
            data: {
                isHot: true,//使用布尔值进行两个判断
                numbers:{
                    a:1,
                    b:1
                }
             
            },
            computed:{
                //当有人读取 info的时候
                info(){//返回值就是info的值,必须写this拿到该属性
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            methods: {//方法
                changeWeather(){
                    //多个语句写在方发里面
                    this.isHot=!this.isHot
                }
              
            },
            watch:{//监视属性
                isHot:{//监视对象
                    //立刻执行的，值为布尔值。默认是false。
                    immediate:false,//true初始化的时候就会调用，一上来没有修改就没有旧的值 所以是 undefined
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('isHot被修改',newValue,oldValue)
                    }

                },
                info:{//计算属性也可以监视
                    //handler调用的时机：监视对象发生变化
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('info被修改',newValue,oldValue)
                    }
                },
                //监视多级结构中某个属性的变化
               'numbers.a':{
                    handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('a被修改',newValue,oldValue)
                    }
               },
            
          
            }

        }); 
        
    </script>
    
</body>



</html>

监视多级对象中的某一属性变化，就进行输出

               //如果需要监视属性里面的多级对象的中的一个对象改变，不可以使用
               numbers:{
                //不会发生变化因为监视的是地址值
                handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('numbers被修改',newValue,oldValue)
                    }
               }

此方法不通//不会发生变化因为监视的是地址值

除非：你改变的numbers的值，类似

 <hr>
        <h3>numbers的值是：{{numbers}}</h3>
        <button @click="numbers = {a:3,b:7 }">点击使得number</button>

解决办法：使用配置项deep

               //如果需要监视属性里面的多级对象的中的一个对象改变，不可以使用
               numbers:{
                //不会发生变化因为监视的是地址值
                deep:true,
                handler(newValue,oldValue){//变化后的值 变化前的值 可以进行一些计算
                        console.log('numbers被修改',newValue,oldValue)
                    }
               }

watch默认不能监视多级数据改变，需要进行编写deep

总结：

Vue中的watch不监测对象内部值的改变（一层）

配置 deep:true,可以检测对象内部值的改变（多层）

Vue自己可以监测对象内部值的改变，但是Vue提供的watch默认不可以

使用watch时候需要根据数据的具体结构，决定是否采用深度监视

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习：监视属性--深度监视

1. Vue中的watch不监测对象内部值的改变（一层）2. 配置 deep:true,可以检测对象内部值的改变（多层）3. Vue自己可以监测对象内部值的改变，但是Vue提供的watch默认不可以4. 使用watch时候需要根据数据的具体结构，决定是否采用深度监视
复制链接

扫一扫