Vue2基础-Vue2中的计算属性和监视属性（HTML版）

大脑不能为空

已于 2022-07-06 15:04:59 修改

阅读量1k

点赞数

分类专栏： Vue2-Vue3全套学习教程文章标签： javascript 前端开发语言 vue.js html

于 2022-07-04 14:51:03 首次发布

本文链接：https://blog.csdn.net/qq_33399435/article/details/125599110

版权

Vue2-Vue3全套学习教程专栏收录该内容

41 篇文章 14 订阅

订阅专栏

一、Vue2中的计算属性computed

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？
1. 初次读取时会执行一次。
2. 当依赖的数据发生改变时会被再次调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
1. 计算属性最终会出现在vm上，直接读取使用即可。
2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

案例：实现一个姓名动态拼接展示输入的姓和名

实现方法一：通过插值语法直接拼接实现

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<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>

实现方法二：通过插值语法+methods方法实现，此时已经有了computed计算属性的雏形。

	<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: {
				// 当依赖的数据被改变时，则方法会被调用。但是methods不会缓存数据
				fullName(){
					console.log('@---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/>
			测试：<input type="text" v-model="x"> <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:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				// 完整写法
				// fullName是将get的返回值赋值给vm上，而不是fullName对象赋值给vm
				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]
					}
				},
				// 简写，不可与完整写法同时存在
				/* fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				} */
			}
		})
	</script>

二、Vue2中的监视属性watch

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
1. new Vue时传入watch配置
2. 通过vm.$watch监视
深度监视：
1. Vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测对象内部值改变（多层）。
备注：
1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>今天天气很{{info}}</h2>
		<button @click="changeWeather">切换天气</button>
		<hr/>
		<h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<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(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			},
			isHot:{
				// immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			},
			//监视多级结构中某个属性的变化
			'numbers.a': {
				handler(newVal,oldVal) {
					console.log("numbers中a的值发生了变化",newVal,oldVal)
				}
			},
			//监视多级结构中所有属性的变化
			numbers: {
				deep: true,
				// 注意：监视数组的时候是不需要开启deep的。
				handler(newVal,oldVal) {
					console.log("numbers中的值发生了改变")
				}
			},
		} 
	})

	// 简写
	vm.$watch('isHot',(newValue,oldValue)=>{
		console.log('isHot被修改了',newValue,oldValue,this)
	})

	// 官方文档格式，vm.$watch(expOrFn, cellback, [options])
	vm.$watch(
		'isHot', 
		function (newValue, oldValue) {
			//function什么时候调用？当isHot发生改变时。
			console.log('isHot被修改了',newValue,oldValue)
		}, 
		{
			// immediate:true, //初始化时让handler调用一下
			immediate: true
		}
	)

</script>