Vue 监视属性

最新推荐文章于 2024-02-16 14:13:52 发布

挚夕

最新推荐文章于 2024-02-16 14:13:52 发布

阅读量90

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52549425/article/details/131542277

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简介

通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

使用

两种写法
监视属性被改变， handler被调用

<body>
    <div id="app"> 
        <h1>今天天气: <span>{{info}}</span></h1>
        <button @click="change">切换天气</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    isHot : true
                }
            },
            methods: {
                change(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot? '炎热' : '寒冷';
                }
            },

            //方式一
            // watch:{
            //     isHot:{
            //         immediate: true,    //初始化时调用一次handler
            //         handler(newValue, oldValue){
            //             console.log("isHot被修改", newValue, oldValue);
            //         }
            //     }
            // }
        });

        //方式二
        vm.$watch("isHot", {
            immediate: true,    //初始化时调用一次handler
            handler(newValue, oldValue){
                console.log("isHot被修改", newValue, oldValue);
            }
        });
    </script>
</body>

深度监视

监视多级属性结构中所有属性的变化

vm.$watch("isHot", {
    deep: true;
    handler(newValue, oldValue){
        console.log("isHot被修改", newValue, oldValue);
    }
});

简写

<body>
    <div id="app"> 
        <h1>今天天气: <span>{{info}}</span></h1>
        <button @click="change">切换天气</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    isHot : true
                }
            },
            methods: {
                change(){
                    this.isHot = !this.isHot;
                }
            },
            computed:{
                info(){
                    return this.isHot? '炎热' : '寒冷';
                }
            },

            watch:{
                //简写 handler
                isHost(newValue, oldValue){
                    console.log("isHot被修改", newValue, oldValue);
                }
            }
        });
    </script>
</body>