当前位置：首页 > news >正文

VUE3-01

news 2025/8/23 18:16:48

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