前提：Vue3依然支持Vue2的语法。并且Vue3和Vue2的优先级相同。

Vue3的基础介绍

1. Vue3项目的创建

1.1 使用 vue-cli 创建

    // 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
       vue --version
       
    // 安装或者升级你的@vue/cli
        npm install -g @vue/cli
        
    // 创建
        vue create <project-name>
        
    // 启动
        cd <project-name>
        npm run serve

1.2 使用 vite 创建

vite官网

## 创建工程
npm create vite <project-name>

## 进入工程目录
cd <project-name>

## 安装依赖
npm install

## 运行
npm run [dev](url)

2. Vue3的组合式API（Composition API）

2.1 Composition API是什么

• ① Composition API是一系列 API 的集合，使我们可以使用函数的方式书写 Vue 组件。
• ② 组合式 API 是 Vue 3 及 Vue 2.7 的内置功能

2.2 Composition API的分类

• ① 响应式API。例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
• ② 生命周期钩子函数。例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
• ③ 依赖注入。例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

2.3 常用的Composition API

2.3.1 setup函数

• 作用：Vue3要求代码必须写在setup函数内部。包括响应式数据、计算属性、方法、生命周期钩子函数等。
• 参数：

  • ① props。值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

  • ② context。上下文对象

    • 1、 attrs。值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • 2、 emit。分发自定义事件的函数, 相当于 this.$emit。
    • 3、 slots。收到的插槽内容, 相当于 this.$slots。

2.3.2 ref函数

1. 作用：定义基本类型的响应式数据
2. 【注意】建议只用来定义基本数据类型（string，boolean，number）。如果定义引用类型会在内部调用reactive方法来生成数据
3. 使用：
   • 在script中获取或者设置值时需要 .value。
   • 在页面上使用不需要 .value

2.3.3 reactive函数

1. 作用：定义引用类型的响应式数据
2. 语法：let 代理对象 = reactive（源对象）

2.3.4 toRef函数

1. 作用：复制 reactive 里的单个属性并转成 ref
2. 语法： const name = toRef(person,'name')

2.3.5 toRefs函数

1. 作用：复制 reactive 里的所有属性并转成 ref
2. 语法：toRefs(person)

【ref对象和reactive对象对toRef与toRefs的应用】

2.3.6 computed计算属性

写法1：默认是get的写法

<template>
    <div>{{total}}</div>
</template>

<script>
    import {ref,computed} from 'vue';
    export default{
        setup(){
            let num = ref(10);
            let total = computed(()=>{
                return num.value+'美金';
            })
            return {
                num,
                total
            }
        }
    }
</sctipt>

写法2：有get和set的写法。computed方法中放一个对象，对象中有get和set方法

<template>
    <div>{{total=10000}}</div>
    <div>{{total}}</div>
</template>

<script>
    import {ref,computed} from 'vue';
    export default {
        setup(){
            let num = ref(20);
            let total = computed({
                get(){
                    return num.value+'英镑'
                }
                set(val){
                    if(val==0){
                        num.value='一个子没有'
                    }else{
                        num.value = val
                    }
                }
            })
        }
    }
</script>

2.3.7 watch监听

情况一：监听单个ref响应式数据 （基本数据类型）

<script>
    import {ref ,watch} from 'vue'
    export default {
        setup(){
            let str = ref('abc');
            watch(str,(newVal,oldVal)=>{
                console.log(newVal);
                console.log(oldVal)
            },{immediate:true})
        }
    }
</script>

情况二：监听多个ref响应式数据 （基本数据类型） —> 利用数组实现多个监听

<script>
    import {ref,watch} from 'vue'
    export default {
        setup(){
            let str = ref('字符串数据');
            let num = ref(99)
            watch([str,num],(newVal,oldVal)=>{
                console.log(newVal);
                console.log(oldVal);
            },{immediate:true})
        }
    }
</script>

情况三：监听1个reactive响应式数据 （引用数据类型）

特点：强制开启深度监听(只要有数据变化,就能被监听到)

<script>
    import {reactive,watch} from 'vue'
    export default {
        let person = reactive({
            name:'大刘',
            age:30,
            children:{
                name:'小刘',
                age:2
            }
        })
        watch(person,(newVal,oldVal)=>{
            console.log(newVal);
            console.log(oldVal);
        },{immediate:true,deep:true})
    }
</script>

情况四：监听reactive响应式数据的1个属性 —> 利用函数

<script>
    import {reactive,watch} from 'vue'
    export default {
        let person = reactive({
            name:'大刘',
            age:30,
            children:{
                name:'小刘',
                age:2
            }
        })
        watch(()=>person.children,(newVal,oldVal)=>{
            console.log(newVal);
            console.log(oldVal);
        },{immediate:true,deep:true})
    }
</script>

情况五：监听reactive响应式数据的多个属性 —> 利用函数+数组

<script>
    import {reactive,watch} from 'vue'
    export default {
        let person = reactive({
            name:'大刘',
            age:30,
            children:{
                name:'小刘',
                age:2
            }
        })
        watch([()=>person.name,()=>person.children],(newVal,oldVal)=>{
            console.log(newVal);
            console.log(oldVal);
        },{immediate:true,deep:true})
    }
</script>

2.3.8 hook函数

hook本质就是一个函数，和setup函数类似。类比Vue2中的mixin

2.3.9 生命周期钩子函数

vue2与Vue3生命周期钩子函数的对应关系：

• beforeCreate ===> setup()
• created=======> setup()
• beforeMount ===> onBeforeMount
• mounted =======> onMounted
• beforeUpdate ===> onBeforeUpdate
• updated =======> onUpdated
• beforeDestroy ==> onBeforeUnmount
• Destroyed =====> onUnmounted