vue3官网：https://v3.cn.vuejs.org/guide/introduction.html

1. 初始Vue3

导入vue3

<script src="https://unpkg.com/vue@next"></script>

vue3创建一个vue实例
在vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例

 Vue.createApp({
            // 注意：vue3中，取消了el选项
            // el:'#app',
            // 注意：vue3中，无论是组件和是vue实例，data选项都必须是一个方法，由方法返回对象。
            data(){
                return {
                    name:'Vue3',
                    age:'2'
                }
            }
        }).mount('#app')

在vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例

 new Vue({
            // el:'#app',
            // 在vue2中，data选项可以是对象，也可以是方法返回一个对象
            data:{
                name:'Vue2',
                age:'6'
            }
        }).$mount('#app') 

在vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器
在vue3中，创建完一个组件实例，我们需要调用mount()方法将组件实例挂载到页面中

2. Vue2和Vue3的响应式

在Vue2中，Vue实例在初始化的时候，会将obj对象身上的所有数据做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
Vue2的响应式：不能直接给对象添加属性，删除对象的属性，不能直接操作数组的下标，但是，Vue2同时也提供了解决这些问题的方案。

 <div id="app" v-cloak>
        <div>学生信息：{{student}}</div>
        <button @click="student.name+='!'">修改学生姓名</button>
        <button @click="student.age++">修改学生年龄</button>
        <button @click="addSex">添加性别</button>
        <button @click="delName">删除姓名</button>
        <div>食物：{{foods}}</div>
        <button @click="addFood">添加食物</button>
        <button @click="delFood">删除帝王蟹</button>
    </div>

// vue2的响应式
        new Vue({
            el:'#app',
            data:{
                student:{
                    name:'张三',
                    age:20
                },
                foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
            },
            methods: {
                //添加性别
                addSex(){
                    //后添加的属性是非响应式的
                    // this.student.sex='男'
                    //可以通过$forceUpdate()强制页面更新一次
                    // this.$forceUpdate()

                    //推荐使用$set方法给对象添加新的属性，确保新添加的属性同样具备响应式
                    this.$set(this.student,'sex','男')
                },
                //删除姓名
                delName(){
                    // 直接使用delete方式删除对象的属性后，不具备响应式
                    // delete this.student.name
                    //使用$delete方法，删除对象的属性后，继续具备响应式
                    this.$delete(this.student,'name')
                },
                //添加食物
                addFood(){
                    // 操作数组后同时要具有响应式，必须要使用下面的方法：
                    // push pop unshift shift sort reverse splice
                    // this.foods.push('佛跳墙')
                    // this.foods[5] = '佛跳墙'
                    // this.$forceUpdate()
                    //推荐使用$set方法根据下标添加数组元素，确保新添加的元素同样具备响应式
                    this.$set(this.foods,5,'佛跳墙')
                },
                //删除食物
                delFood(){
                    // this.foods.splice(3,1)
                    //直接根据下标删除数组元素，不具备响应式
                    // this.foods[3] = null

                    //使用$delete方法，删除数组中指定位置的元素，继续具备响应式
                    this.$delete(this.foods,3)
                }
            },
        }) 

vue3修复了vue2中响应式的所有缺陷。在Vue3中，直接给对象添加属性、直接删除对象的属性、根据下标操作数组，都依然具备响应式。

Vue.createApp({
            data() {
                return {
                    student:{
                        name:'张三',
                        age:20
                    },
                    foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
                }
            },
            methods: {
                addSex(){
                    this.student.sex = '男'
                },
                delName(){
                    delete this.student.name
                },
                addFood(){
                    this.foods[5] = '佛跳墙'
                },
                delFood(){
                    delete this.foods[3]
                }
            },
        }).mount("#app")

3. Vue2和Vue3的响应式原理

Vue2在实例化时，会将data里面的所有数据采用 Object.defineProperty 进行处理，从而实现响应式功能。但是你之后往data里面添加的数据，由于没有采用 Object.defineProperty 进行处理，所以不具备响应式。$set()方法，内部就是对单个属性重新采用 Object.defineProperty 进行处理，从而具备响应式。

<h2 id="name"></h2>
<h2 id="age"></h2>

// Vue2的响应式原理：
// 这里的obj是源对象
let obj = {
    name:'张三',
    age:20
}
// 在页面中显示姓名和年龄
document.getElementById('name').innerText = obj.name
document.getElementById('age').innerText = obj.age
// 这里的obj2代理对象---由obj2代理obj
let obj2 = {}
// 给obj2定义name属性
Object.defineProperty(obj2,'name',{
    get(){
        return obj.name
    },
    set(value){
        obj.name = value
        document.getElementById('name').innerText = obj.name
    }
})
// 给obj2定义age属性
Object.defineProperty(obj2,'age',{
    get(){
        return obj.age
    },
    set(value){
        obj.age = value
        document.getElementById('age').innerText = obj.age
    }
}) 

// Vue3的响应式原理：
// 这里的obj是源对象
let obj = {
    name:'张三',
    age:20
}
// 在页面中显示姓名和年龄
document.getElementById('name').innerText = obj.name
document.getElementById('age').innerText = obj.age
// 这里的obj2代理对象---由obj2代理obj
// new Proxy(源对象,{...})的方式，创建代理对象
let obj2 = new Proxy(obj,{
    //读取属性，参数分别是：源对象，属性名
    get(target, property){
        // 直接根据源对象返回源对象身上的属性
        // return target[property]
        // 通过发射对象，发射输出源对象身上的属性
        return Reflect.get(target,property)
    },
    //设置属性，参数分别是：源对象，属性名，属性值
    set(target, property,value){
        // target[property] = value
        if(Reflect.has(target,property)){
            Reflect.set(target, property,value)
            document.getElementById(`${property}`).innerText = value
        }
    },
    //删除属性，参数分别是：源对象，属性名
    deleteProperty(target, property){
        // delete target[property]
        Reflect.deleteProperty(target, property)
    }
})

4. 引出Vue3新推出的组合式API

什么是组合式API(Composition API)，就是Vue推出的一些新的方法，这个方法在setup中使用
setup方法是所有组合式API的入口
Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。
我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，
所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义，
这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。
所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。

 // 组合式api的作用是：将原来分散开来定义的数据，方法，计算属性，监听器，组合起来定义一个完整的业务。
 // ref用于定义响应式数据
        let {ref} = Vue

        Vue.createApp({
            // setup是组合式api的舞台，所有的组合式api都要在setup里面使用
            setup() {
                // 在setup中，直接定义的数据是不具备响应式的，
                // 如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象
                //定义汽车相关数据
                // 使用ref()方法，定义一个响应式对象
                let carName=ref('保时捷')
                let carPrice=ref('100W')
                //定义汽车相关方法
                function updateCar(){
                    //修改对象的值，要通过value属性
                    carName.value = '特斯拉'
                    carPrice.value = '80W'
                }
                //定义飞机相关数据
                let planeName=ref('波音747')
                let planePrice=ref('10Y')
                //定义飞机相关方法
                function updatePlane(){
                    planeName.value = 'B52轰炸机',
                    planePrice.value = '30Y'
                }
                //手表
                let watchName=ref('劳力士')
                let watchPrice=ref('10W')
                function updateWacth(){
                    watchName.value = '欧米伽',
                    watchPrice.value = '4W'
                }
                //手机
                let phoneName=ref('iphone13')
                let phonePrice=ref('5999')
                function updatePhone(){
                    phoneName.value = '华为',
                    phonePrice.value = '6999'
                }
                return{
                    //返回汽车相关数据
                    carName,
                    carPrice,
                    updateCar,
                    //返回飞机相关数据
                    planeName,
                    planePrice,
                    updatePlane,
                    //返回手表相关数据
                    watchName,
                    watchPrice,
                    updateWacth,
                    //返回手机相关数据
                    phoneName,
                    phonePrice,
                    updatePhone
                }
            },
 }).mount('#app')

5. ref和reactive

ref 和 reactive 都是用于定义响应式数据。通常情况下，基本类型的数据，选择用ref定义；引用类型的数据，选择用reactive定义。
ref方法：返回的是ref对象，ref对象的value属性是一个代理对象(Proxy)。使用ref既可以定义基本类型数据，也可以定义引用类型数据。注意：修改ref对象的值，必须要先.value再.具体的属性。
reactive方法：直接返回一个代理对象(Proxy)。reactive只能定义引用类型数据.

<div id="app">
    <h4>姓名：{{name}}</h4>
    <h4>学生：{{stu}}</h4>
    <button @click="updateName">修改姓名</button>
    <button @click="updateStu">修改学生</button>
</div>

let {ref,reactive} = Vue
Vue.createApp({
    setup() {
        let name = ref('张三')
        let updateName = ()=>{
            name.value = '张杰'
        }
        /* let stu = ref({
            name:'李四',
            age:20
        })
        let updateStu = ()=>{
            // 注意：修改ref对象的值，每次都要先点value
            stu.value.name = '李明'
            stu.value.age = 30
        } */
        // reactive组合式API方法，根据源对象返回一个代理对象(Proxy对象)
        let stu = reactive({
            name:'李四',
            age:20
        })
        let updateStu = ()=>{
            // Proxy对象，不需要先点value
            stu.name = '李明'
            stu.age = 30
        }
        return {
            name,
            updateName,
            stu,
            updateStu
        }
    }
}).mount('#app')