第十五节——观察者watch

编程入门行业动态更新时间:2024-10-10 03:33:19

第十五节——<a href=https://www.elefans.com/category/jswz/34/1765125.html style= 观察者watch"/>

第十五节——观察者watch

一、概念

在Vue中，watch是一个用于监听数据变化的功能。它可以监听一个或多个数据，并在数据发生变化时执行相应的操作。当我们需要在数据变化时执行异步操作、计算属性或执行一些副作用时，watch就派上了用场啦。注意。watch默认只能进行浅层次监听，如果数据非常复杂，则需要进行深度监听

二、基本使用

观察num变化，每次变化都会触发hello

<template><div>{{ num }}<button @click="num+=1">+1</button></div>
</template><script>
export default {data () {return {num: 1}},watch: {/*** 在watch中，要观察那个属性就直接把对应属性定义乘方法* * 接收两个参数* newVal 更新后的值* oldVal 更新前的值*/num (newVal, oldVal) {console.log(newVal, oldVal, '哈喽')}}
}</script>

三、immediate 立即触发

立即触发监听默认情况下，watch在初始化时不会立即执行。如果我们希望在初始数据加载后立即触发监听，可以使用immediate选项

<template><div>{{ num }}<button @click="num+=1">+1</button></div>
</template><script>
export default {data () {return {num: 1}},watch: {/*** 把要观察的属性写成一个对象* 每次改变 都会触发 handler 方法 注意：只能叫handler* immediate 立即执行*/num: {handler (newVal, oldVal) {console.log(newVal, oldVal, '哈喽')},immediate: true}}
}</script>

四、深度监听

<template><div><!-- {{ num }} --><!-- <button @click="num += 1">+1</button> --><button @click="update">改变</button>{{ arr }}</div>
</template><script>
export default {data() {return {arr: [{ name: "张三", child: [{ name: "张三儿子" }] }],};},watch: {arr: {handler () {console.log("改变了吗")},deep: true}},methods: {update () {this.arr[0].child[0].name = '李四'}}
};
</script>