Vue3启程

关键字：创建vue实例、响应式、响应式原理、组合式API

1. 初始Vue3

Vue2存在一些缺陷，Vue3解决了这些缺陷，剔除了过滤器，保留了绝大部分的功能，可以说更加好用，更加丰富。
我们将Vue2和Vue3对比一下，就很直观了：

<div id="app">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="updateData">修改数据</button>
</div>

Vue2中--创建实例的方式

new Vue({
    //指定挂载容器
    // el:'#app',
    //定义属性
    data() {
        return {
            name:'张三',
            age:20
        }
    },
    //定义方法
    methods: {
        updateData(){
            this.name = '李四'
            this.age = 25
        }
    },
}).$mount('#app')  //指定当前vue实例挂载的容器 

Vue3中--创建实例的方式

// Vue3中--创建实例的方式
Vue.createApp({
    //注意：这个配置对象里面除了不能写el选项，之前怎么写，现在还可以怎么写
    //定义属性
    data() {
        return {
            name:'张三',
            age:20
        }
    },
    //定义方法
    methods: {
        updateData(){
            this.name = '李四'
            this.age = 25
        }
    },
}).mount('#app')   //只能通过mount方法指定挂载的容器，不用通过el选项指定

2. Vue2和Vue3的响应式

<div id="app">
    <h2>学生：{{stu}}</h2>
    <h2>食物：{{foods}}</h2>
    <div>
        <button @click="updateStuName">修改学生姓名</button>
        <button @click="addStuSex">添加学生性别</button>
        <button @click="delStuAge">删除学生年龄</button>
        <button @click="updateFoods2">修改第二个食物</button>
    </div>
</div>

2. Vue2和Vue3的响应式

<div id="app">
    <h2>学生：{{stu}}</h2>
    <h2>食物：{{foods}}</h2>
    <div>
        <button @click="updateStuName">修改学生姓名</button>
        <button @click="addStuSex">添加学生性别</button>
        <button @click="delStuAge">删除学生年龄</button>
        <button @click="updateFoods2">修改第二个食物</button>
    </div>
</div>

// Vue2
new Vue({
    data() {
        return {
            //学生对象
            stu:{
                name:'张三',
                age:20
            },
            //食物数组
            foods:['榴莲','葡萄','香蕉']
        }
    },
    methods: {
        updateStuName(){
            this.stu.name = '李四'
        },
        addStuSex(){
            // 直接给对象添加的属性，不具备响应式
            // this.stu.sex = '男'
            // 如果要给对象添加属性，并且添加的属性也要具备响应式，要使用$set方法
            // 方法的第一个参数是指定的对象，第二个参数是属性名，第三个参数是属性值。
            this.$set(this.stu,'sex','男')
        },
        delStuAge(){
            // 直接删除对象身上的属性，是不具备响应式的
            // delete this.stu.age
            // 如果要删除对象身上的属性，并且还要具备响应式，要使用$delete方法
            // 方法的第一个参数是指定的对象，第二个参数是属性名
            this.$delete(this.stu,'age')
        },
        updateFoods2(){
            // 直接根据索引修改数组元素，不具备响应式
            // this.foods[1] = '西瓜'
            // 操作数组中的元素，并且还要具备响应式，只能使用数组的以下方法：
            // push unshift pop shift splice reverse sort
            // this.foods.splice(1,1,'西瓜')
            // 如果就是想通过下标去操作数组，还要具备响应式，使用$set方法
            this.$set(this.foods,1,'西瓜')
        }
    },
}).$mount('#app') 
// 总结Vue2的响应式：不能直接给对象添加属性，删除对象的属性，不能直接操作数组的下标，
// 但是，Vue2同时也提供了解决这些问题的方案。

// Vue3
Vue.createApp({
    data() {
        return {
            //学生对象
            stu:{
                name:'张三',
                age:20
            },
            //食物数组
            foods:['榴莲','葡萄','香蕉']
        }
    },
    methods: {
        updateStuName(){
            this.stu.name = '李四'
        },
        addStuSex(){
            // 在Vue3中，直接给对象添加属性，新的属性依然具备响应式
            this.stu.sex = '男'
        },
        delStuAge(){
            // 在Vue3中，直接删除对象的属性，依然具备响应式
            delete this.stu.age
        },
        updateFoods2(){
            // 在Vue3中，根据下标操作数组，依然具备响应式
            this.foods[1] = '西瓜'
        }
    },
}).mount('#app')
// 总结Vue3的响应式：解决了再Vue2中的所有问题。

3. Vue2和Vue3的响应式原理

<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

这是很棒的一个功能，和另一个R框架有点像，让数据和方法在一起，方便维护。

<div id="app">
    <div>
        <h2>学生信息</h2>
        <!-- 注意：ref对象在模板只不需要.value的方式获取里面的值 -->
        <h4>姓名：{{stuName}}</h4>
        <h4>年龄：{{stuAge}}</h4>
        <button @click="updateStu">修改学生信息</button>
    </div>
    <div>
        <h2>汽车信息</h2>
        <h4>车名：{{carName}}</h4>
        <h4>车价：{{carPrice}}</h4>
        <button @click="updateCar">修改汽车信息</button>
    </div>
    <div>
        <h2>手机信息</h2>
        <h4>名称：{{phoneName}}</h4>
        <h4>颜色：{{phoneColor}}</h4>
        <button @click="updatePhone">修改手机信息</button>
    </div>
    <div>
        <h2>食物信息</h2>
        <h4>名称：{{foodName}}</h4>
        <h4>价格：{{foodPrice}}</h4>
        <button @click="updateFood">修改食物信息</button>
    </div>
</div>

什么是组合式API(Composition API)，就是Vue推出的一些新的方法，这个方法在setup中使用, 从Vue身上获取ref组合式API函数

let {ref} = Vue
Vue.createApp({
    // 注意：Vue2中，Vue实例的data选项可以是一个对象，也可以是一个方法，由方法返回一个对象
    // 但是，组件中data选项必须是一个方法。
    // Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。
    // 我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，
    // 所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义，
    // 这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。
    // 所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。
    /* data: function () {
        return {
            //定义学生数据
            stuName: '张三',
            stuAge: '20',
            //汽车信息
            carName: '奔驰',
            carPrice: '50W',
            //手机信息
            phoneName: 'iphone',
            phoneColor: '白色',
            //食物信息
            foodName: '汉堡',
            foodPrice: '¥20'
        }
    }, 
    methods: {
        //修改学生的方法
        updateStu(){
            this.stuName = '李四'
            this.stuAge = 30
        },
        //修改汽车的方法
        updateCar(){
            this.carName = '宝马'
            this.carPrice = '40W'
        },
        //修改手机的方法
        updatePhone(){
            this.phoneName = '华为'
            this.phoneColor = '蓝色'
        },
        updateFood(){
            this.foodName = '蛋糕'
            this.foodPrice = '¥30'
        }
    }, */
    // setup方法是所有组合式API的入口
    setup() {
        // 定义学生的信息
        // 在setup中，直接定义的数据是不具备响应式的，
        // 如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象
        let stuName = ref('张三')
        let stuAge = ref('20')
        let updateStu = () => {
            //ref对象的value属性保存的是值
            stuName.value = '李四'
            stuAge.value = 30
        }
        // 定义汽车的信息
        let carName = ref('奔驰')
        let carPrice = ref('50W')
        let updateCar = () => {
            carName.value = '宝马'
            carPrice.value = '40W'
        }
        // 定义手机的信息
        let phoneName = ref('iphone')
        let phoneColor = ref('白色')
        let updatePhone = () => {
            phoneName.value = '华为'
            phoneColor.value = '蓝色'
        }
        // 定义食物的信息
        let foodName = ref('汉堡')
        let foodPrice = ref('¥20')
        let updateFood = () => {
            foodName.value = '蛋糕'
            foodPrice.value = '¥30'
        }

        //返回模板中需要使用的数据
        return{
            stuName,
            stuAge,
            updateStu,
            carName,
            carPrice,
            updateCar,
            phoneName,
            phoneColor,
            updatePhone,
            foodName,
            foodPrice,
            updateFood
        }
    }
}).mount('#app')