1-1、Vue3 生命周期

详情： 生命周期钩子 API 手册

• setup
• onMounted
• onUpdated

案例

<template>
  <div>{{val1}}</div> <br>
  <button @click="btnclick">点击</button>
</template>

<script>
import { onMounted, onUpdated, ref } from '@vue/runtime-core'
export default {
    setup(){
        let val1 = ref(100);
        //
        let btnclick = ()=>{
            val1.value = 102
        }
        //
        onMounted(()=>{
            console.log('onMounted --- ');
            val1.value = 101
            
        })   
        onUpdated(()=>{
             console.log('onUpdated --- ');
        })
        //
        return {
            btnclick,
            val1
        }
    }
}

</script>

image.png