VUE3-01

1.选项式和组合式

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

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

2.<script setup>

<template><div class="about"><h1>{{name}}</h1><button @click="sayHello">测试</button></div>
</template><script setup lang="ts">
const name: string = "天亮教育"function sayHello() {alert("hello")
}
</script>

        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=valueconsole.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("劫持到了代理获取属性"+<string>prop)return target[prop]},set(target,p,newValue):boolean{console.log("劫持到了设置属性"+<string>p)target[p]=newValuereturn 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。