Vue 计算属性&侦听属性

爱菜鸟高高飞

于 2022-06-01 17:00:40 发布

阅读量95

点赞数

分类专栏：每日一更 vue 前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/u010074478/article/details/125085736

版权

vue 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

每日一更

9 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

总结

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

计算属性

一. 插值

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{firstName}}-{{lastName}}</span>
</div>
new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	}
})

二. methods 实现

<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	全名：<span>{{fullName()}}</span>
</div>
new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三'
	},
	methods: {
		fullName(){
			console.log('@---fullName')
			return this.firstName + '-' + this.lastName
		}
	},
})

三. 计算属性实现 computed ,用get和set

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

</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		x:'你好'
	},
	methods: {
		demo(){
			
		}
	},
	computed:{
		fullName:{
			//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			},
			//set什么时候调用? 当fullName被修改时。
			set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}

        //简写,和上面的get,set只用一种
        fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
})
</script>

二.侦听属性

逻辑 : 方法changeWeather方法控制isHot值, 计算属性改变info的值

计算属性 +methods 实现监听

<div id="root">
	<h2>今天天气很{{info}}</h2>
	<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
	<!-- <button @click="isHot = !isHot">切换天气</button> -->
	<button @click="changeWeather">切换天气</button>
</div>
<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
			}
		},
	})
</script>

用watch监听

<body>
	<!-- 
			监视属性watch：
				1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
				2.监视的属性必须存在，才能进行监视！！
				3.监视的两种写法：
						(1).new Vue时传入watch配置
						(2).通过vm.$watch监视
	 -->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>今天天气很{{info}}</h2>
		<button @click="changeWeather">切换天气</button>
	</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)
				}
			}
		} */
	})

	vm.$watch(
		'isHot',{
			deep:true,  深度监视,如果是数组也能监视内部变化
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}
	)
</script>

侦听属性延时执行

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>