vue3 初步

一：setup

vue3新出现的一个配置项，是一个函数。组件中的数据和方法都可以写在setup中。
返回值：
1：如果返回一个方法，可以在模板中直接使用该对象。
2：如果返回一个渲染函数，可以自定义渲染内容。
2和3的内容并不全部兼容。2可以读取3的内容，3不可以读取2的，不建议混用。
setup不能是一饿async函数。

二：ref & reactive

ref是一个函数。可以将普通的数据变为响应式数据。

<template>

 // {{}}会自动取age的value属性，不用手动获取
 <h2>age is {{age}}</h2>
 
 <h2>work is {{job.type}}</h2>
 <h2>salary is {{job.salary}}</h2>
 <button @click="changeInfo">change</button>
</template>
<script>

import {ref, reactive} from "vue";

export default {
    name: "HelloVue",
    setup(){
        /**
         * ref可以将age包装成一个RefImpl的引用响应式对象。
         * 但是仅限于基本数据类型,
         * 如果使用ref包装Object对象类型，会生成Proxy对象
         * 底层调用的是reactive函数 
         */
        let age = ref(18);
        let job = ref({
            type: 'web engineer',
            salary: '30k'
        });
		// 等价于
		let job = reactive({
            type: 'web engineer',
            salary: '30k'
        });
        
        // 数组同样可以实现响应式
        let hobby = reactive(['抽烟', '喝酒', '烫头']);

        console.log(job.value);
        function changeInfo(){
            job.value.type = "backend engineer";
        }
        
        return {
            age,
            job,
            hobby[0] = '说相声';
            changeInfo
        }
    }
}
</script>

RefImpl：

Proxy

写法进阶：
首先简写如下：

<template>
    <h2>age is {{ person.age }}</h2>
    <h2>work is {{ person.job.type }}</h2>
    <h2>salary is {{ person.job.salary }}</h2>
    <h2>education level is {{ person.job.education.level }}</h2>
    <h2>education num is {{ person.job.education.num }}</h2>
    <p>hobby is : </p>
    <ul>
        <li v-for="item in person.hobby">{{item}}</li>
    </ul>
    <button @click="changeInfo">change</button>
</template>
<script>
import {reactive} from "vue";

export default {
    name: "Hello2Vue",
    setup() {

        let person = reactive({
            age : 18,
            name: 'alice',
            job : {
                type: 'web engineer',
                salary: '30k',
                education: {
                    level: 'college',
                    num: 4
                }
            },
            hobby:['抽烟', '喝酒', '烫头']
        });

        function changeInfo() {
            person.job.type = "backend engineer";
            person.hobby[0] = '说相声';
            person.job.education.num = 3;
        }

        return {
            person,
            changeInfo
        }
    }
}
</script>