店铺网站域名怎么做,wordpress php.ini路径,辽宁营商环境建设网站,有经验的网站建设响应式数据 一、 ref 创建#xff1a;响应式数据1#xff09;ref 创建#xff1a;基本类型的响应式数据2#xff09;ref 创建#xff1a;对象类型的响应式数据3#xff09;volar 插件自动添加 .value4#xff09;customRef 自定义 ref 二、 reactive 创建#xff1a;响… 响应式数据 一、 ref 创建响应式数据1ref 创建基本类型的响应式数据2ref 创建对象类型的响应式数据3volar 插件自动添加 .value4customRef 自定义 ref 二、 reactive 创建响应式数据1reactive 创建对象类型的响应式数据2reactive更新对象数据3toRefs 与 toRef 三、 ref 和 reactive 的区别四、其他补充1shallowRef、shallowReactive1. shallowRef2. shallowReactive3. 总结 2readonly 与 shallowReadonly1. readonly2. shallowReadonly 3toRaw 与 markRaw1. toRaw2. markRaw 此总结是我看尚硅谷视频总结的所以可能会有总结不到位或不清楚的情况 适合学过的人回来复习的时候看 一、 ref 创建响应式数据 ref 可以定义基本类型、对象类型的响应式数据 1ref 创建基本类型的响应式数据 vue3项目在setup中创建的变量例如 let num 100 中的num默认不是响应式数据利用 ref 可以创建基本类型的响应式数据 2ref 创建对象类型的响应式数据 若 ref 接收的是对象类型内部其实也是调用了 reactive 函数 script langts setup namePerson111import { ref } from vue// 数据let car ref({ brand: 奔驰, price: 100})let game ref([{ id: 10001, name: 原神},{ id: 10002, name: 双人成行},{ id: 10003, name: 头七怪谈}])// 方法function changePrice() { // 改变汽车价格car.value.price 10console.log(car.value.price)}function changeGame() { // 改变游戏名称game.value[1].name 纸嫁衣}function changeCar() { // 更改车数据// car.value.brand 小电驴// car.value.price 0.3// 上面两行的效果等同下面的这个代码即使把整个对象赋给car.valuecar也不会失去响应式car.value { 小电驴, price: 0.3 } }
/script3volar 插件自动添加 .value
vscode左下角点击设置搜索Dot Value勾选如下图
4customRef 自定义 ref customRef 创建一个自定义的ref并对其依赖项跟踪和更新触发进行逻辑控制 举例 想要1s后有延迟效果响应式数据更新 注意下例中 clearTimeouttimer起到防抖效果
useSumRef.ts
import { customRef } from vue
export default function (initValue: string, delay: number) {// 使用Vue提供的customRef定义响应式数据// track跟踪 trigger触发let msg customRef((track, trigger) {let timer: numberreturn {// get何时调用 -- msg被读取时get(){track() // 告诉Vue数据msg很重要你要对msg进行持续关注一旦msg变化就去更新return initValue},// set何时调用 -- msg被修改时set(value){clearTimeout(timer)timer window.setTimeout(() {initValue valuetrigger() // 通知Vue数据msg变化了}, delay)}}})return { msg }
}App.vue
templatediv classapph2{{ msg }}/h2input typetext v-modelmsg/div
/templatescript setup langts nameAppimport {ref} from vueimport useMsgRef from ./useMsgRef// 使用Vue提供的默认ref定义响应式数据数据一变页面就更新// let msg ref(你好)// 使用useMsgRef来定义一个响应式数据且有延迟效果let {msg} useMsgRef(你好,1000)
/script二、 reactive 创建响应式数据 reactive 只能创建对象类型的响应式数据在JS中可以直接操作对象类型数据不需要.value 1reactive 创建对象类型的响应式数据 templatediv classpersonh2汽车信息一辆{{ car.brand }}品牌的车价格为{{ car.price }}万/h2button clickchangePrice改变汽车价格/buttonh2游戏信息列表/h2ulli v-foritem in game :keyitem.id{{ item.name }}/li/ulbutton clickchangeGame改变游戏名称/buttonh4深层次{{ shen.a.b.id }}/h4button clickchangeShen测试/button/div
/templatescript langts setup namePerson111import { reactive } from vue// 数据let car reactive({ brand: 奔驰, price: 100})let game reactive([{ id: 10001, name: 原神},{ id: 10002, name: 双人成行},{ id: 10003, name: 头七怪谈}])let shen reactive({a: {b: {id: 4}}})// 方法function changePrice() {car.price 10console.log(car.price)}function changeGame() {game[1].name 纸嫁衣}function changeShen() {shen.a.b.id 100}
/script2reactive更新对象数据 注意 reactive重新分配对象 ,会失去响应式 场景
button clickchangeCar点击修改车数据/button
...
let car ref({ brand: 奔驰, price: 100})
...
function changeCar() {
// { brand: 小电驴, price: 0.3 } 要更新这个信息给car
}方法一手动赋值
function changeCar() {
// { brand: 小电驴, price: 0.3 } 要更新这个信息给car
// 弊端从后端返回的数据可以一个对象里有很多属性一个一个赋值也太麻烦了Person.name lisiPerson.age 20
}方法二对象整体赋值
function changeCar() {// { brand: 小电驴, price: 0.3 } 要更新这个信息给car// 下面这个写法页面可以更新 而且这个写法car不会失去响应式更新Object.assign(car, { brand: 小电驴, price: 0.3})// 下面是两种错误写法// car { brand: 小电驴, price: 0.3} // 这么写数据更新了页面不更新不是响应式的了// car reactive({ brand: 小电驴, price: 0.3}) // 这么写页面不更新的
}3toRefs 与 toRef templatediv classboxdiv姓名{{ person.name }}/divdiv年龄{{ person.age }}/divbrbutton clickchangeName点击修改姓名/buttonbutton clickchangeAge点击修改年龄/buttondiv叫啥{{ test }}/div/div
/templatescript langts setup namePerson111import { ref, reactive, toRefs, toRef } from vue// 数据let person reactive({name: 张三,age: 18})let { name, age } toRefs(person)console.log(name) // 转换为了ref基本数据类型的响应式数据console.log(age) // 相当于是把每一项都拆开了但是每一项都还是ref响应式的let test toRef(person, name) // 这个当然也是响应式的function changeName() {// person.name zhang-sanname.value zhang-san}function changeAge() {// person.age 1age.value 1}/scriptstyle.box {padding: 20px;background-color: skyblue;box-shadow: 0 0 10px;border-radius: 20px;}button {margin-right: 20px;}
/style三、 ref 和 reactive 的区别 四、其他补充
1shallowRef、shallowReactive
1. shallowRef 举例 运行效果只有 “sum1” 和 “修改整个人” 的功能能用另外两个无效 2. shallowReactive 举例 运行效果只有 “修改品牌” 和 “修改整个车” 功能能用另外两个无效 3. 总结 2readonly 与 shallowReadonly
1. readonly
效果
original显示什么readOnlyCopy就显示什么original修改readOnlyCopy也会跟着修改original可以修改自己的值readOnlyCopy什么都不能修改只能读 2. shallowReadonly
效果
original显示什么shallowReadOnlyCopy就显示什么original修改shallowReadOnlyCopy也会跟着修改original可以修改自己的值shallowReadOnlyCopy第一层数据不能修改但是深层次第二层、第三层…数据能够修改
举例
shallowReadOnlyCopy不能修改“name”和“hobby整体”但能修改hobby.eat和hobby.sport的值
3toRaw 与 markRaw
1. toRaw 使用示例
2. markRaw
