onBeforeMount/onMounted 组件挂载前/挂载后
onBeforeUpdate/onUpdated 组件更新前/更新后
<template>
<button @click="add">Add - {{ count }}</button>
</template>
<script>
import { onBeforeUpdate, onUpdated } from 'vue'
export default { setup() { // 入口函数
let count = ref(0) onBeforeUpdate(() => {
console.log('onBeforeUpdate')
})
onUpdated(() => {
console.log('onUpdated')
})
const add = () => {
count.value++
}
return {
add,
count
}
}
} </script>
此时组件会被更新
<template>
<button @click="add"> Add </button>
</template>
<script>
import { onMounted, onBeforeMount, ref, onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() { // 入口函数
let count = ref(0)
onBeforeUpdate(() => {
console.log('onBeforeUpdate')
})
onUpdated(() => {
console.log('onUpdated')
})
const add = () => {
count.value++
}
return {
add,
count
}
}
}
此时组件不会被更新
