vue3生命周期写法案例

1.script标签内写法

<script>
//按需引入所需方法
import { reactive, toRefs, onBeforeMount, onMounted,onBeforeUpdate,onUpdated } from 'vue'
export default {
 name:'about',
 setup(){
    const data = reactive({
        msg:'hello vue3',
        msg2:'你好，hutong',
        userName:'',
        userInput:''
    })
    // 声明事件后，一定要在return中返回，否则不生效
    const handlerClick = ()=>{
        alert(1111)
    }
    // 提交函数
    const submit = ()=>{
        alert(`${data.userName}的建议是${data.userInput}`)
    }
    // 数据渲染前
    onBeforeMount(()=>{
        console.log("onBeforeMount",document.querySelector('#dom'));
    })
    // 数据渲染后
    onMounted(()=>{
        console.log("onMounted",document.querySelector('#dom'));
        setTimeout(() => {
            data.msg = 'hello hutong'
        }, 2000);
    })
    // dom更新前
    onBeforeUpdate(()=>{
        console.log("onBeforeUpdate");
    })
    // dom更新后
    onUpdated(()=>{
        console.log("onUpdate");
    })
    return{
        ...toRefs(data),
        handlerClick,
        submit
    }
 }
}
</script>

2.模板写法

<template>
  <h2>生命周期</h2>
  <div id="dom">{{ msg }}</div>
  <!-- 事件 v-on:事件明="事件方法" -->
  <!-- 事件及方法写在setUp里面 -->
  <button @click="handlerClick">touch me</button>
  <hr>
  <!-- v-model 双向绑定 -->
  <input type="text" placeholder="请输入姓名" v-model.lazy="userName">
  <textarea placeholder="请输入您的建议" cols="30" rows="10" v-model.lazy="userInput"></textarea>
  <p>{{ userName }}--{{ userInput }}</p>
  <button type="submit" @click="submit">提交</button>
</template>