VUE框架Vue3的生命周期函数选项式效果实现------VUE框架

<template>
    <!-- 传递数据到我们的子组件上去,和Vue2还是一样的 -->
    <User v-if="isFlag" name="Jack" age="50" :sex="sex"></User>
    <button @click="change()">按一下</button>
</template>
 
<script>
import {ref} from "vue";
import User from "./components/User.vue";
export default {
    name : "App",
    components : {User},
    // 直接在VC对象里面配置的叫做选项式API
    // data,methods,compted等
    setup(){
        console.log("setup,安装组合式API");
        // 组合式API:data,computed,methods都在这里
        // 自上而下执行
        // 组合式API有顺序,因为他们都在setup里面配置了
        // 有了组合式API后
        // 就会先安装组合式API,然后执行beforeCreate的动作
        // 初始化选项API,创建vc对象
        let sex = ref("男");
        let isFlag = ref(true);
        function change(){
            isFlag.value = !isFlag.value;
        } 
        return {sex,isFlag,change};
    },
    beforeCreate(){
        console.log("beforeCreate");
    },  
    created(){
        console.log("created");
    }
}
</script>
 
<style>
 
</style>

<template>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>{{ sex }}</h1>
    <h2>{{ counter }}</h2>
    <!-- <button @click="counter++">加一</button> -->
    <button @click="add()">加一</button>
</template>
 
<script>
import {ref} from "vue";
export default {
    name : "User",
    // 使用props接收传递的数据
    props : [
        // 在这里已经配置过了
        "name","age","sex"
    ],
    // Vue3的生命周期函数有两种写法
    // 选项式和组合式
    beforeCreate(){
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
    },
    beforeMount(){
        console.log("beforeMount");
    },
    mounted(){
        console.log("mounted");
    },
    beforeUpdate(){
        console.log("beforeUpdate");
    },
    updated(){
        console.log("updated");
    },
    beforeUnmount(){
        console.log("beforeUnmount");
    },
    unmounted(){
        console.log("unmounted");
    },
    setup(props){
        let counter = ref(0);
        // setup没有this对象,无法获取到props
        // vue3调用setup之前,会给setup传递参数,而第一个参数就是props
        // 这里的props也被包装成了一个代理对象,也是具有响应式的Proxy对象
        console.log(props);
        function add(){
            counter.value++;
        }
        return {counter,add};
        // props自动做了代理,不需要我们定义出来return了
        // let name = props.name;
        // let age = props.age;
        // let sex = props.sex;
        // return {name,age,sex};
    }
}
</script>
 
<style>
 
</style>

setup,安装组合式API
App.vue:31 beforeCreate
App.vue:34 created
User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'}
User.vue:22 beforeCreate
User.vue:25 created
User.vue:28 beforeMount
User.vue:31 mounted
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:34 beforeUpdate
User.vue:37 updated
User.vue:40 beforeUnmount
User.vue:43 unmounted
User.vue:50 Proxy(Object) {name: 'Jack', age: '50', sex: '男'}
User.vue:22 beforeCreate
User.vue:25 created
User.vue:28 beforeMount
User.vue:31 mounted