vue3中的watch与vue2中的watch的对比
新版的 watch
和旧版对比,在使用方式上变化非常大!旧版是这样用的,和 data
、 methods
都在同级配置:
// 旧版的写法:
export default { watch: { // ... }, data () { return { // ... } }, methods: { // ... } }
新版的 watch
需要在 setup
里使用,在使用之前,还需要先导入该组件。
import { defineComponent, ref, watch } from 'vue' export default defineComponent({ setup () { const name = ref<string>('Petter'); // 2s后改变数据 setTimeout(() => { name.value = 'Tom'; }, 2000); // 你可以监听一个响应式对象 watch( name, () => { console.log('监听整个 ref ', name.value); }) // 也可以监听对象里面的某个值(此时需要写成 getter 函数) watch( () => name.value, () => { console.log('只监听 value ', name.value); }) } })
需要注意的是,你只能监听响应式数据,如果通过 let
定义一个普通的字符串变量,然后去改变字符串内容,这样是无法监听的。
另外,默认情况下,watch
是惰性的,即只有当被侦听的源发生变化时才执行回调。
TIP
vue3中的watch
默认是深度监听,无需再手动指定 deep
。
另外, watch
可以接受两个参数:
参数 | 类型 | 作用 |
---|---|---|
newVal | any | 变化后的新值 |
oldVal | any | 变化前的旧值 |
这里返回的参数类型并没有特定限制,取决于你监听的数据类型变化。
export default defineComponent({ setup () { const name = ref<string>('Petter'); // 2s后改变数据 setTimeout(() => { name.value = 'Tom'; }, 2000); // 你可以监听一个响应式对象 watch( name, (newVal, oldVal) => { console.log('打印变化前后的值', { oldVal, newVal }); }) return { name } } })
注意:第一个参数是新值,第二个才是原来的旧值!