Vue3——初始Vue3 & Vue2和Vue3的响应式 & 组合式API & ref和reactive

一、初始Vue3

Vue3官方地址

1、导入Vue3

2、创建vue实例

Vue3和Vue2创建vue实例的区别：
① 在Vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例。在Vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例。
② Vue3中取消了el选项，只能通过mount方法指定挂载的容器，不用通过el选项指定。Vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器。
③ Vue3中，无论是组件还是vue实例，data选项都必须是一个方法，由方法返回对象。而在Vue2中，data选项可以是对象，也可以是方法返回一个对象。

    

        
name:{{name}}
        
age:{{age}}
    

// vue2创建一个vue实例
// 在vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例
// vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器
/* new Vue({
    // el:'#app',
    // 在vue2中，data选项可以是对象，也可以是方法返回一个对象
    data:{
        name:'Vue2',
        age:'6'
    }
}).$mount('#app') */

// vue3创建一个vue实例
// 在vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例
Vue.createApp({
    // 注意：这个配置对象里面除了不能写el选项，之前怎么写，现在还可以怎么写
    // 注意：vue3中，无论是组件和是vue实例，data选项都必须是一个方法，由方法返回对象。
    data(){
        return {
            name:'Vue3',
            age:'2'
        }
    }
}).mount('#app')

二、Vue2和Vue3的响应式

1、Vue2的响应式

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

    
学生信息：{{student}}
    修改学生姓名
    修改学生年龄
    添加性别
    删除姓名
    
食物：{{foods}}
    添加食物
    删除帝王蟹

// 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)
        }
    },
})

2、Vue3的响应式

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

    
学生信息：{{student}}
    修改学生姓名
    修改学生年龄
    添加性别
    删除姓名
    
食物：{{foods}}
    添加食物
    删除帝王蟹

// vue3的响应式
Vue.createApp({
    data() {
        return {
            student:{
                name:'张三',
                age:20
            },
            foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
        }
    },
    methods: {
        addSex(){
            // 在Vue3中，直接给对象添加属性，新的属性依然具备响应式
            this.student.sex = '男'
        },
        delName(){
            // 在Vue3中，直接删除对象的属性，依然具备响应式
            delete this.student.name
        },
        addFood(){
            // 在Vue3中，根据下标操作数组，依然具备响应式
            this.foods[5] = '佛跳墙'
        },
        delFood(){
            delete this.foods[3]
        }
    },
}).mount("#app")

三、Vue2和Vue3的响应式原理

1、Vue2的响应式原理

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

// vue2的响应式原理
//源对象
let obj = {
    name:'张三',
    age:20,
    sex:'男'
}
document.querySelector('#name').innerHTML = obj.name
document.querySelector('#age').innerHTML = obj.age
document.querySelector('#sex').innerHTML = obj.sex
//定义一个obj2对象，作为obj的代理对象
let obj2 = {}

//通过Object.defineProperty方法，给obj2添加属性
Object.defineProperty(obj2,'name',{
    //读取属性的值，调用get方法
    get(){
        return obj.name
    },
    //设置属性的值，调用set方法
    set(val){
        obj.name = val
        document.querySelector('#name').innerHTML = obj.name
    }
})
Object.defineProperty(obj2,'age',{
    //读取属性的值，调用get方法
    get(){
        return obj.age
    },
    //设置属性的值，调用set方法
    set(val){
        obj.age = val
        document.querySelector('#age').innerHTML = obj.age
    }
})
Object.defineProperty(obj2,'sex',{
    //读取属性的值，调用get方法
    get(){
        return obj.sex
    },
    //设置属性的值，调用set方法
    set(val){
        obj.sex = val
        document.querySelector('#sex').innerHTML = obj.sex
    }
})

2、Vue3的响应式原理

通过new Proxy(源对象,{...})的方式，创建代理对象。通过Proxy（代理） 拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。对于vue3而言，底层使用reflect会比较健壮，不容易出现有个错误就导致程序阻塞。
vue3 使用proxy代理对象和Reflect反射对象组合实现响应式数据，在性能方面，比vue2更加有优势。

// new Proxy()创建一个代理对象
let obj4 = new Proxy(obj3,{
    // 读取属性，参数分别是：源对象，属性名
    get(target,property){
        // 直接返回源对象身上的指定的属性值
        // return target[property]
        // 通过反射对象，从指定的对象身上反射出指定的属性值
        return Reflect.get(target,property)
    },
    // 设置属性，参数分别是：源对象，属性名，属性值
    set(target,property,value){
        // target[property] = value
        Reflect.set(target,property,value)
        document.querySelector(`#${property}2`).innerHTML = Reflect.get(target,property)
    },
    // 删除属性，参数分别是：源对象，属性名
    deleteProperty(target,property){
        // return delete target[property]
        document.querySelector(`#${property}2`).remove()
        return Reflect.deleteProperty(target,property)
    }
})

四、Vue3新推出的组合式API

Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义。这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。
组合式API(Composition API)：就是Vue推出的一些新的方法，这个方法在setup中使用。组合式api的作用是将原来分散开来定义的数据、方法、计算属性、监听器等，组合起来定义一个完整的业务。
ref对象：在setup中，直接定义的数据是不具备响应式的。如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象。ref对象的value属性保存的是值。

    

        
{{carName}}--{{carPrice}}
        修改汽车信息
    
    

        
{{planeName}}--{{planePrice}}
        修改飞机信息
    

// ref用于定义响应式数据
let {ref} = Vue

Vue.createApp({
    // setup方法是所有组合式API的入口，所有的组合式api都要在setup里面使用
    setup() {
        //定义汽车相关数据
        // 使用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'
        }

        return{
            //返回汽车相关数据
            carName,
            carPrice,
            updateCar,
            //返回飞机相关数据
            planeName,
            planePrice,
            updatePlane      
        }
    },
    // vue2中只能这样写代码，vue3也可以这样写
    /* data() {
        return {
            carName:'保时捷',
            carPrice:'100W',
            planeName:'波音747',
            planePrice:'10Y'
        }
    },
    methods: {
        updateCar(){
            this.carName = '特斯拉'
            this.carPrice = '80W'
        },
        updatePlane(){
            this.planeName = 'B52轰炸机',
            this.planePrice = '30Y'
        }
    }, */
}).mount('#app')

五、ref和reactive

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

    

        
姓名：{{name}}
        
修改姓名
    
    

        
车名：{{car.name}}
        
车价：{{car.price}}
        
修改汽车
    
    

        
机名：{{plane.name}}
        
机价：{{plane.price}}
        
修改汽车
    

// ref 和 reactive 用于定义响应式数据
let {ref,reactive} = Vue
Vue.createApp({
    // 所有的组合式api，要在setup方法里面使用
    setup() {
        // 使用ref定义基本类型数据
        let name = ref('张三')
        let updateName = ()=>{
            // 修改值时，必须要点value
            name.value = '李四'
        }
        // 使用ref定义引用类型数据
        let car = ref({
            name:'奔驰',
            price:30
        })
        let updateCar = ()=>{
            // 修改值时，必须要点value
            car.value.name = '奥迪'
            car.value.price = 40
        }
        // 使用reactive定义引用类型数据
        // 注意：reactive只能定义引用类型数据
        let plane = reactive({
            name:'长城',
            price:300
        })
        let updatePlane = ()=>{
            // Proxy对象，不需要先点value
            plane.name = '东方'
            plane.price = 400
        }

        //setup方法，返回出去的对象里面的成员，可以在模板中使用
        return{
            name,
            updateName,
            car,
            updateCar,
            plane,
            updatePlane
        }
    }
}).mount('#app')