VUE3-01

1.选项式和组合式

        选项式API：按照作用组织代码

        组合式API：按照功能组织代码

2.

        2.1 VUE3默认的数据是非响应式的

                响应式：数据变化后，界面会刷新

                非响应式：数据变化后，界面不会刷新

        2.2 VUE3提供了api，可以把非响应式数据转成响应式

                ref-----针对基础数据类型，可以操作基础数据类型，也可以操作引用数据类型，但读写

        数据时需要加 ‘.value’

                        写法：const xxx = ref(initValue) 

                                 js中操作数据: xxx.value

                                 模板中操作数据：不需要.value

                        原理：响应式依靠Object.defineProperty()的get与set完成

const data={
    name:"张三"
}
const dataProxy={
    name:"张三"
}
Object.defineProperty(data,'name',{
    get(){
        console.log("获取name")
        return dataProxy.name
    },
    set(value){
        dataProxy.name=value
        console.log("劫持到设置name属性")
    }
})
data.name="王五"

                reactive-----针对引用数据类型，只能操作引用数据类型，不加 ‘.value’

                        语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个

                代理对象（Proxy的实例对象，简称proxy对象）

                         原理：内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

const data1={
    name:"张三",
}
const dataProxy1=new Proxy(data1,{
    get(target,prop):any{
        console.log("劫持到了代理获取属性"+prop)
        return target[prop]
    },
    set(target,p,newValue):boolean{
        console.log("劫持到了设置属性"+p)
        target[p]=newValue
        return true
    },
    deleteProperty(target:{name:string},p:string|symbol):boolean{
        console.log("劫持属性删除")
        delete target[p]
        return true
    }
})

console.log(dataProxy1.name)
dataProxy1.name="王五"
delete dataProxy1.name

3.vue中手动触发界面刷新

        3.1当修改数据，界面没有响应式刷新的时候可以用 

                this.$forceUpdate() 

         3.2 nextTick() 可以在状态改变后立即使用，它接受一个回调函数作为参数，该回调函数会在 DOM 更新周期结束时执行。nextTick() 方法可以将异步操作推迟到下一个 DOM 更新周期中执行，从而确保了在数据改变之后正确地获取到更新后的 DOM。

        在vue3中，nextTick()是一个Promise对象，因此我们也可以使用 await 返回的 Promise。