Vue官网学习（计算属性和侦听器：二、侦听器:监听data之下的直属属性以及data下面对象的属性）

程序员文章站 2022-05-17 07:53:48

...

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

监听某个属性的变化：（监听data之下的直属属性以及data下面对象的属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<div>全名： {{name}}</div>
			<div>年龄： {{person.age}}</div>
			<button @click="changeName">改变</button>
		</div>
	</body>
	<script src="../js/vue.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				name: "名称",
				person: {
					age: 20
				}
			},
			watch: {
				// data下面的一级属性监听
				 name(newValue, oldValue){
					 // 第一个参数为改变后的值，第一个参数为改变前的值
					 console.log(newValue)
					 console.log(oldValue)
				 },
				 // 此种方式监听person整个对象的改变，任意一个属性改变都会执行此方法，比较消耗性能
				 // 建议监听单个属性的变化
				 person: {
					 handler(newValue, oldValue){
						 console.log("整个对象监听：" ,newValue)
						 console.log("整个对象监听：" ,oldValue)
					 },
					 deep: true
				 },
				 // 监听单个属性的变化
				 'person.age': {
					 handler(newValue, oldValue){
						 console.log("单个属性监听：" ,newValue)
						 console.log("单个属性监听：" ,oldValue)
					 }
				 }
				
			},
			methods: {
				changeName(){
					this.name = "改变后的名称"
					this.person.age = 35
				}
			}
		});
	</script>
</html>

相关标签： Vue JS ES6 vue js javascript

上一篇： Vue侦听器对象内部属性的监听

下一篇： Vue.js学习之计算属性和侦听器（四）