Vue 3 - 09 监听属性

2022-05-03 | 0 浏览

Vue3 监听属性

监听属性关键词: watch. 监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue监听属性</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<span >{{ message }}</span>
		<p>计数器：{{ counter }}</p>
		<button @click="counter++">点击</button>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				counter: 1,
				message: ""
			}
		},
		watch: {
			counter: function(newValue, oldValue) {
				this.message = '计数器值的变化 :' + oldValue + ' 变为 ' + newValue + '!'
			}
		}
	}
	Vue.createApp(app).mount("#app");
</script>
</html>

深度监听

Vue 是可以监听到多层级数据改变的，且可以在页面上做出对应展示。但是 Vue 提供的 watch 方法，默认是不提供深度监听的( deep 默认为 false，也就是不开启深度监听)

1, 监听数组示例

data() {
    return {
        winChips: new Array(11).fill(0)   
    }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}

2, 监听对象示例

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 1,
　　　　　　pokerHistory: 'local'
　　　　}   
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

监听属性和计算属性的区别


1, 计算属性是依赖的值改变后重新计算结果更新DOM，会进行缓存。
2, 属性监听的是属性值，当定义的值发生变化时，执行相对应的函数。
3, 计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务，因为耗时可能会比较长，我们的计算	 属性要实时更新。所以这个异步任务就可以用监听属性来做。
4, watch监听属性通常可以用在 数据持久化、派发事件并同步/异步执行，验证格式等…

前端