VUE framework Vue3's life cycle function optional effect implementation------VUE framework

<template>
    
    <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>



<User v-if="isFlag" name="Jack" age="50" :sex="sex"></User>

<button @click="change()">Click</button>

</template>

<script>

import {ref} from "vue";

import User from "./components/User.vue";

export default {

name : "App",

components : {User},

// Directly configured in the VC object is called option API

// data,methods,compted等

setup(){

console.log("setup,install combined API");

// Combined API: data, computed, methods are all here

// Execute from top to bottom

// The combined API has a sequence because they are all configured in the setup.

// With the combined API

// The combined API will be installed first, and then the beforeCreate action will be executed.

// Initialize options API and create vc object

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="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>
<template>

<h1>{ { name }}</h1>

<h1>{ { age }}</h1>

<h1>{ { sex }}</h1>

<h2>{ { counter }}</h2>



<button @click="add()">加一</button>

</template>

<script>

import {ref} from "vue";

export default {

name : "User",

// Use props to receive the passed data

props : [

// Already configured here

"name","age","sex"

],

// There are two ways to write the life cycle function of Vue3

//Optional and combined

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 does not have this object and cannot obtain props

// Before vue3 calls setup, it will pass parameters to setup, and the first parameter is props

// The props here are also packaged into a proxy object, which is also a responsive Proxy object.

console.log(props);

function add(){

counter.value++;

}

return {counter,add};

// props are automatically proxies and we don’t need to define returns.

// 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
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

VUE framework Vue3's life cycle function optional effect implementation------VUE framework

Guess you like