一、Vue3新征程--响应式原理/组合式API

1.创建实例的方法

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

2.Vue3的响应式(原理)

// 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中的所有问题。

// 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的响应式原理
    let obj2 = new Proxy(obj,{
      //获取属性
      // target是源对象
      // propertyName是属性名
      get(target,propertyName){
        // return target[propertyName]
        // Reflect是反射对象，通过get方法，反射出对象的指定属性值
        return Reflect.get(target,propertyName)
      },
      //设置属性
      // value是属性值
      set(target,propertyName,value){
        // target[propertyName] = value
        Reflect.set(target,propertyName,value)
        show()  //调用显示数据的方法
      },
      //删除属性
      deleteProperty(target,propertyName){
        // delete target[propertyName]
        Reflect.deleteProperty(target,propertyName)
        show()  //调用显示数据的方法
      }
    })
   //显示信息
    function show(){
      document.querySelector('#name').innerHTML = obj.name
      document.querySelector('#age').innerHTML = obj.age
      document.querySelector('#show').innerHTML = JSON.stringify(obj)
    }
    show()  //调用显示数据的方法

3.vue3的组合式API

 // 从Vue中解构出ref函数，该函数，用于在setup里面定义响应式数据
    let {ref} = Vue
    Vue.createApp({
      //setup函数，是组合式API的舞台，
      //所有的组合式API都要在setup函数里面使用
      setup() {
        // 在setup里面默认定义的数据，是不具备响应式的
        // 如果数据需要具备响应式，需要使用ref函数定义数据,包装后返回的是ref对象
        //定义手机的数据
        let phoneName = ref('华为手机')
        let phonePrice = ref(5999)
        //定义手机的方法
        let updatePhoneName = function(){
          // 修改ref对象里面的数据，要通过.value
          // 注意：ref对象，在模板中使用，不需要.value
          phoneName.value = '苹果手机'
        }
        //可以写箭头函数
        let updatePhonePrice = ()=>{
          phonePrice.value = 7888
        }
        //定义汽车的数据
        let carName = ref('大众')
        let carPrice = ref('30W')
        //定义汽车的方法
        let updateCarName = ()=>{
          carName.value = '宝马'
        }
        let updateCarPrice = ()=>{
          carPrice.value = '50W'
        }
        //在setup方法里面返回需要在模板使用的数据
        return {  
          //返回手机信息
          phoneName,
          phonePrice,
          updatePhoneName,
          updatePhonePrice,
          //返回汽车信息
          carName,
          carPrice,
          updateCarName,
          updateCarPrice
        }
      }
    }).mount('#app')

    let { createApp, ref, reactive } = Vue
    //创建Vue实例
    createApp({
      setup() {
        //使用ref包装基本类型数据
        const msg = ref('好好学习vue3')
        const updateMsg = () => {
          msg.value = '加油！'
        }
        // 使用ref包装引用类型数据
        const stu = ref({
          name: '张三',
          age: 20
        })
        const updateStu = () => {
          // 修改对象的属性值，必须要先.value，再.具体的属性
          stu.value.name = '李四'
          stu.value.age = 30
        }
        // 使用reactive包装引用类型数据（注意：reactive只能包装引用类型数据）
        const car = reactive({
          name: '大众',
          price: '30W'
        })
        const updateCar = () => {
          car.name = '宝马'
          car.price = '50W'
        }
        return {
          msg,
          updateMsg,
          stu,
          updateStu,
          car,
          updateCar
        }
      }
    }).mount('#app')