13监视属性

监视属性

    监视属性watch:
        1.当被监视的属性变化时,回调函数自动调用,进行相关操作
        2.监视的属性必须存在,才能进行监视!!
        3.监视的两种写法:
    		(1).new Vue时传入watch配置
			(2).通过vm.$watch监视

实例

<body>
    <!-- watch既可以监听属性也可以监听计算属性 -->

    <div id="container">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">改变天气</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#container',
            data:{
                isHost: true,
            },
            computed:{
                info(){
                    return this.isHost ?'炎热':'凉爽'
                }
            },
            methods:{
                changeWeather(){
                    this.isHost = !this.isHost;
                }
            },
            watch:{
                isHost:{
                    // immediate: true, // 初始化时，直接调用handler一次。
                    // handler什么时候才会调用？ 当isHost 属性发生改变时.
                    handler(newvalue,oldvalue){
                        console.log('isHost被修改了',newvalue,oldvalue);
                    }
                }
            }
        });

        /*
        // 第二种方法：
        vm.$watch('isHost',{
            // immediate: true, // 初始化时，直接调用handler一次。
            handler(newvalue,oldvalue){
                console.log('isHost被修改了',newvalue,oldvalue);
            }
        })
        */
    </script>
</body>

深度监视：deep

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

实例

<body>
    <div id="container">
        <h2>a:{{numbers.a}}</h2>
        <button @click="numbers.a++">a加1</button>
        <h2>b:{{numbers.b}}</h2>
        <button @click="numbers.b++">b加1</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#container',
            data:{
                numbers:{
                    a:10,
                    b:20
                }
            },
            watch:{
                numbers:{
                    immediate:false;
                    deep:true,  // deep 深度监视：默认时false，为了提高效率。
                    handler(newvalue,oldvalue){
                        console.log('numbers被修改了',newvalue,oldvalue)
                    }
                }
            }
        });
        
		// 第二种写法
        vm.$watch('numbers',{
            deep:true,
            handler(newvalue,oldvalue){
                console.log('numbers被修改了',newvalue,oldvalue)
            }
        })
    </script>
</body>

监视属性（监听属性）与计算属性的区别

watch可以进行异步操作

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

computed

<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName}}</span>
</div>
<script>
    Vue.config.produtionTip=false;
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
            fullName(){
                return this.firstName +"-"+this.lastName;       //此处的this是vm
            }
        }
    });
</script>

watch

<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName">
    姓名：<span>{{fullName}}</span>
</div>
<script>
    Vue.config.produtionTip=false;
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(val){
                // 可以开辟异步操作，()=>函数，没有this，向外找-> vm
                setTimeout(()=>{
                    this.fullName =  val+ '-' + this.lastName;
                },1000)
            },
            lastName(val){
                this.fullName =  this.firstName+ '-' + val;
            },
        }
    });
</script>
posted @ 2022-09-06 16:07  Redskaber  阅读(35)  评论(0)    收藏  举报