Vue -- 监视属性

最新推荐文章于 2024-06-02 09:41:29 发布

zmm_mohua

最新推荐文章于 2024-06-02 09:41:29 发布

阅读量226

点赞数

分类专栏： vue学习记录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42250642/article/details/123019340

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js中的监视属性（watch）的使用，包括在属性变化时自动调用回调函数、如何设置初始调用以及两种定义方式。同时，详细讲解了深度监视的概念，即如何通过配置`deep:true`来监听对象内部值的改变。还对比了computed和watch的区别，并给出了在不同场景下选择的原则。最后展示了监视属性的基本使用和深度监视的代码示例。

摘要由CSDN通过智能技术生成

Vue – 监视属性

小结

监视属性watch：
   1、当被监视的属性变化时，回调函数自动调用，进行相关操作
   2、监视的属性必须存在，才能进行监视
   3、监视的两种写法：
      1）new Vue 时传入 watch 配置
      2）通过 vm.$watch 监视
   
深度监视：
   1）Vue 中的 watch 默认不监测对象内部值的修改（一层）
   2）配置 deep:true 可以监测对象内部值的改变（多层）
   备注：
      1）Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以
      2）使用 watch 时根据数据的具体结构，决定是否采用深度监视
computed 和 watch 之间的区别：
    1、computed 能完成的功能，watch 都可以完成
    2、watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作
    两个重要的小原则：
       1、所有被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象
       2、所有不被 Vue 所管理的函数（定时器的回调函数、ajax的回调函数，Promise的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象

代码

监视属性基本使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>天气案例_监视属性</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root"> 
            <h3>今天天气很{{info}}</h3>
            <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
            <button @click="changeWeather">点击切换天气！！！</button>
        </div>
    </body>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed: {
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            /*watch:{
                isHot:{
                    immediate:true, //初始化时让handler调用一下,默认值是false
                    //handle什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                }
            }*/
        })

        vm.$watch('isHot',{
            immediate:true, //初始化时让handler调用一下,默认值是false
            //handle什么时候调用？当isHot发生改变时
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        })
    </script>
</html>

深度监视：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>天气案例_深度监视</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root"> 
            <h3>今天天气很{{info}}</h3>
            <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
            <button @click="changeWeather">点击切换天气！！！</button>
            <hr>
            <h3>a的值是：{{numbers.a}}</h3>
            <button @click="numbers.a++">点击，a+1</button>
            <h3>b的值是：{{numbers.b}}</h3>
            <button @click="numbers.b++">点击，b+1</button>
        </div>
    </body>
    
    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed: {
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            watch:{
                isHot:{
                    //immediate:true, //初始化时让handler调用一下,默认值是false
                    //handle什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                },
                //监视多级结构中某个属性的变化
                /*'numbers.a':{
                    handler(newValue,oldValue){
                        console.log("a发生了改变",newValue,oldValue)
                    }
                }*/
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log("numbers发生了改变")
                    }
                }
            }
        })

    </script>
</html>