vue3的watch写法
时间: 2023-05-17 07:07:52 浏览: 77
Vue3的watch写法与Vue2有所不同,它使用了新的API——watchEffect。watchEffect会自动追踪响应式数据的变化,并在变化时执行回调函数。例如:
```
import { watchEffect } from 'vue';
watchEffect(() => {
console.log('count is now: ', count.value);
});
```
在上面的例子中,我们使用watchEffect来追踪一个名为count的响应式变量,当count变化时,回调函数会被执行。需要注意的是,watchEffect会在组件渲染时立即执行一次回调函数,因此不需要手动调用一次。
另外,如果需要手动停止watchEffect的追踪,可以使用返回值中的stop函数,例如:
```
const stop = watchEffect(() => {
console.log('count is now: ', count.value);
});
// 停止追踪
stop();
```
这就是Vue3中watch的写法。
相关问题
vue3 watch写法
Vue3中的watch写法与Vue2有所不同,具体如下:
1. 监听单个响应式数据的变化:
```javascript
watch('count', (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`)
})
```
2. 监听多个响应式数据的变化:
```javascript
watch({
count: (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`)
},
name: (newValue, oldValue) => {
console.log(`name从${oldValue}变为${newValue}`)
}
})
```
3. 监听ref对象的变化:
```javascript
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`)
})
```
4. 监听reactive对象的变化:
```javascript
const state = reactive({
count: 0,
name: 'Tom'
})
watch(state, (newValue, oldValue) => {
console.log(`state从${JSON.stringify(oldValue)}变为${JSON.stringify(newValue)}`)
})
```
5. 监听ref或reactive对象的变化,可以指定监听的属性:
```javascript
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`)
}, { deep: true, immediate: true, flush: 'sync' })
```
其中,deep表示是否深度监听,immediate表示是否立即执行回调函数,flush表示回调函数的执行时机。
vue3watch写法
在Vue3中,watch函数有三种常见的写法。
第一种写法是监听一个响应式数据的变化,例如:
watch(nums, () => {})
在这种写法中,nums是一个响应式数据,当nums发生变化时,回调函数会被触发执行。
第二种写法是监听一个对象的子属性的变化,例如:
watch(() => demo.name, () => {})
在这种写法中,demo是一个对象,监听的是demo对象的name属性的变化。
第三种写法是监听整个对象的变化,例如:
watch(demo, (newValue, oldValue) => {})
在这种写法中,demo是一个对象,当demo对象的任意属性发生变化时,回调函数会被触发执行。
需要注意的是,第二种和第三种写法都是监听对象的变化,但是它们的区别在于:
第二种写法是只监听对象的子属性的变化,只有demo对象的name属性发生变化时,回调函数才会被触发执行。
而第三种写法是监听整个对象的变化,即使是demo对象的其他属性发生变化,回调函数也会被触发执行。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [VUE3 中的 Watch 详解](https://blog.csdn.net/weixin_42776027/article/details/125759685)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]