Vue2 + Vue3学习笔记（七）计算属性和侦听属性

最新推荐文章于 2023-12-22 10:49:15 发布

yggjdle

最新推荐文章于 2023-12-22 10:49:15 发布

阅读量428

点赞数

分类专栏： Vue 前端前端项目文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41867900/article/details/121720321

版权

前端同时被 3 个专栏收录

53 篇文章 1 订阅

订阅专栏

前端项目

15 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

本节内容：

计算属性
侦听属性
二者的对比

计算属性和侦听属性都是Vue中常用的，本文会根据两个简单的例子来进行讲解。

1. 计算属性

第一个例子想要实现的是一个可以将输入的姓和名拼接到一起的页面，并且实现双向绑定。
在这里插入图片描述
实现的方法有三种：

插值语句
methods
计算属性

方法一：

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 因为要实现双向绑定，所以这里使用的是v-model -->
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{firstName}}-{{lastName}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>

方法二：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName()}}</span>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>

方法三：

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						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]
					}
				}
			}
		})
	</script>

从第三个实现方法中，我们可以得知什么时候需要用到计算属性：要用的属性不存在，要通过已有属性计算得来。 例子中的全名就是通过已有属性姓和名计算得来的。

计算属性实现的原理底层借助了Objcet.defineproperty方法提供的getter和setter。

有同学可能会疑问，为什么要用计算属性，不直接用methods，与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。因为get函数会在初次读取时会执行一次，当依赖的数据发生改变时会被再次调用，如果不发生改变就不会执行get函数。

如果计算属性不需要进行修改，只需要get属性的话，可以对计算属性进行简写。

//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}

2. 侦听属性

想要实现的功能是指，点击按钮之后，天气会进行改变。

在这里插入图片描述
点击之后

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句，但太长的不推荐这么写 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<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)
					}
				}
			},
		})
		//watch的第二种写法
		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>

当被侦听的属性变化时, 回调函数自动调用, 进行相关操作。不光可以对data进行侦听，函数也可以进行侦听。

如果想要监视多层的是对象内部值，需要注意到深度监视：
Vue中的watch默认不监测对象内部值的改变（一层），配置deep:true可以监测对象内部值改变（多层）。

3. 二者的对比

在学习完计算属性和侦听属性之后，我们可能会疑问，这两种属性可以实现相同的功能，这两者之间到底用哪一种好，之间有什么区别吗？
首先我们先将第一个姓名的例子再用侦听属性实现一下。

<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<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>