温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中的watch监视属性怎么应用

发布时间:2023-04-27 10:55:39 来源:亿速云 阅读:119 作者:iii 栏目:开发技术

这篇“Vue中的watch监视属性怎么应用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue中的watch监视属性怎么应用”文章吧。

    一、监视属性watch

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

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

    3.监视的两种写法

    (1)new Vue时传入watch配置

    (2)通过vm.$watch监视

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>天气案例_监视属性</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				监视属性watch:
    					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
    					2.监视的属性必须存在,才能进行监视!!
    					3.监视的两种写法:
    							(1).new Vue时传入watch配置
    							(2).通过vm.$watch监视
    		 -->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h3>今天天气很{{info}}</h3>
    			<button @click="changeWeather">切换天气</button>
    		</div>
    	</body>
     
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				isHot:true,
    			},
    			computed:{
    				info(){
    					return this.isHot ? '炎热' : '凉爽'
    				}
    			},
    			methods: {
    				changeWeather(){
    					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>
    </html>

    二、深度监视

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

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

    备注:

    • vue自身可以监视对象内部值的改变,但vue提供的watch默认不可以

    • 使用watch时根据数据的具体结构,决定是否采用深度监视

    天气案例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>天气案例_深度监视</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 
    				深度监视:
    						(1).Vue中的watch默认不监测对象内部值的改变(一层)。
    						(2).配置deep:true可以监测对象内部值改变(多层)。
    				备注:
    						(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
    						(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
    		 -->
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h3>今天天气很{{info}}</h3>
    			<button @click="changeWeather">切换天气</button>
    			<hr/>
    			<h4>a的值是:{{numbers.a}}</h4>
    			<button @click="numbers.a++">点我让a+1</button>
    			<h4>b的值是:{{numbers.b}}</h4>
    			<button @click="numbers.b++">点我让b+1</button>
    			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
    			{{numbers.c.d.e}}
    		</div>
    	</body>
     
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				isHot:true,
    				numbers:{
    					a:1,
    					b:1,
    					c:{
    						d:{
    							e:100
    						}
    					}
    				}
    			},
    			computed:{
    				info(){
    					return this.isHot ? '炎热' : '凉爽'
    				}
    			},
    			methods: {
    				changeWeather(){
    					this.isHot = !this.isHot
    				}
    			},
    			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>
    </html>

    三、监视属性简写

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>天气案例_监视属性_简写</title>
    		<!-- 引入Vue -->
    		<script type="text/javascript" src="../js/vue.js"></script>
    	</head>
    	<body>
    		<!-- 准备好一个容器-->
    		<div id="root">
    			<h3>今天天气很{{info}}</h3>
    			<button @click="changeWeather">切换天气</button>
    		</div>
    	</body>
     
    	<script type="text/javascript">
    		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    		
    		const vm = new Vue({
    			el:'#root',
    			data:{
    				isHot:true,
    			},
    			computed:{
    				info(){
    					return this.isHot ? '炎热' : '凉爽'
    				}
    			},
    			methods: {
    				changeWeather(){
    					this.isHot = !this.isHot
    				}
    			},
    			watch:{
    				//正常写法
    				/* isHot:{
    					// immediate:true, //初始化时让handler调用一下
    					// deep:true,//深度监视
    					handler(newValue,oldValue){
    						console.log('isHot被修改了',newValue,oldValue)
    					}
    				}, */
    				//简写
    				/* isHot(newValue,oldValue){
    					console.log('isHot被修改了',newValue,oldValue,this)
    				} */
    			}
    		})
     
    		//正常写法
    		/* vm.$watch('isHot',{
    			immediate:true, //初始化时让handler调用一下
    			deep:true,//深度监视
    			handler(newValue,oldValue){
    				console.log('isHot被修改了',newValue,oldValue)
    			}
    		}) */
     
    		//简写
    		/* vm.$watch('isHot',(newValue,oldValue)=>{
    			console.log('isHot被修改了',newValue,oldValue,this)
    		}) */
     
    	</script>
    </html>

    以上就是关于“Vue中的watch监视属性怎么应用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI