Vue监视属性

最新推荐文章于 2024-10-05 01:22:45 发布

HeX_7

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量118

点赞数

分类专栏： # Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/hex_7/article/details/124495436

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

监视属性watch：

1.当被监视属性发生变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
        
    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

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

        })

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

深度监视:

(1).Vue中的watch默认不监测对象内部值的改变(一层)。

(2) .配置deep:true可以监测刈象内部值改变(多层)

备注:

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2) .使用watch时根据数据的具体结构，决定是否采用深度监视。

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="add">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers={a:666,b:888}">彻底替换掉numbers</button>
    </div>
        
    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

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


                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了');
                    }
                }

            }

        })

       
    </script>
</body>

computed和watch之间的区别:

1. computed能完成的功能。watch 都可以完成。

2. watch能完成的功能，computed不定能完成，例如: watch可以进行异步操作。

两个重要的小原则:

1.所被Vue管理的函数，最好写成普通函数。这样this的指向小是vm或组件实例对象。

2.所有不被Vue所管理的函数( 定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是 vm 或组件实例对象。

<body>
    <div id="root">
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model:value="lastName"><br><br>
        全名：<span>{{fullName}}</span>
    </div>

    <script>

        
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                firstName:'张',
                lastName:'三',
                fullName:'张-三'
            },
            
            watch:{
                firstName(newValue){
                    //更改名后 全名一秒钟后再变
                    setTimeout(()=>{
                        console.log(this);
                        this.fullName = newValue + '-' + this.lastName;
                    },1000)
                },
                lastName(val){
                    this.fullName = this.firstName + '-' + val;
                }
            }
        })
    </script>
</body>