Vue的监视属性

最新推荐文章于 2024-09-21 11:29:05 发布

dragoned_123

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量465

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dragoned_123/article/details/122385093

版权

本文详细介绍了Vue.js中如何监视属性的变化，包括一级监视、多级监视和简写形式。通过`watch`对象实现对数据变化的监听，展示了在不同场景下如何设置`handler`回调以及使用`deep`选项进行深度监听。此外，还提到了计算属性与`watch`的交互，以及如何在初始化时触发监视器。

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

监视属性

一级监视

	<div id="root">
        <h1>今天天气很{{info}}</h1>
        <!-- 可以写一些简单的语句 -->
        <button @click='isHot = !isHot'>切换天气</button>

        <button @click='changeWeather'>切换天气</button>
        <hr/>
        <h2>a的值为：{{number.a}}</h2>
        <button @click='number.a++'>点我a++</button>
        <h2>b的值为：{{number.b}}</h2>
        <button @click='number.b++'>点我b++</button>
	</div>

    <script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
                number:{
                    a:1,
                    b:1
                }
			},
			methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
			},
            computed:{
                info(){
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            //监视
            watch:{
                isHot:{
                    // immediate:true,//初始化时让handler调用一下
                    //当isHot改变时调用，同时计算属性info也可以被监视
                    handler(newValue,oldValue){
                        alert(newValue+''+oldValue)
                    }
                },
		});
        //监视属性的两种写法
        vm.$watch('isHot',{
            // immediate:true,//初始化时让handler调用一下
                    //当isHot改变时调用，同时计算属性info也可以被监视
                    handler(newValue,oldValue){
                        alert(newValue+''+oldValue)
                    }
        })
	</script>

多级监视

    <script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
                number:{
                    a:1,
                    b:1
                }
			},
			methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
			},
            computed:{
                info(){
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            //监视
            watch:{
                //多级监视属性中某个属性变化
                'number.a':{
                    handler(){
                        console.log(this.number.a);
                    }
                },
                //多级监视里面任意一个属性发生变化会触发handler
                'number':{
                    deep:true,//关键
                    handler(){
                        console.log('number改变')
                    }
                },

	</script>

简写形式

    <script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
                number:{
                    a:1,
                    b:1
                }
			},
			methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
			},
            computed:{
                info(){
                    return this.isHot ? '炎热':'凉爽'
                }
            },
            //监视
            watch:{
                //简写形式
                isHot(newValue,oldValue){
                    alert(newValue+''+oldValue)
                }
            }
			
		});
	</script>