vue3中,如何通过点击事件二次调用onMounted生命周期
时间: 2023-11-16 21:08:59 浏览: 392
vue生命周期和react生命周期对比【推荐】
在Vue 3中,可以使用`ref`和`watchEffect`来实现类似于Vue 2中`mounted`生命周期的效果。具体实现步骤如下:
1. 在组件中定义一个`ref`变量,用来表示需要监听的数据:
```javascript
import { ref, watchEffect } from 'vue'
export default {
setup() {
const count = ref(0)
watchEffect(() => {
console.log('count changed', count.value)
})
}
}
```
2. 在组件的template中绑定一个点击事件,每次点击都会修改`count`的值:
```html
<template>
<div>
<button @click="count++">Click me</button>
</div>
</template>
```
这样,每次点击按钮都会触发`watchEffect`中的回调函数,实现了类似`mounted`生命周期的效果。
阅读全文