// 上一篇主要写了关于父子组件传值
// setup的定义方式 ,这一篇主要讲解定义数据的方式
// reactive, ref 这两个不在陈述,定义格式请看上篇
// readonly 定义一个只读的**对象**, 也只接受对象
// 这类似Obj.freeze() 来冻结数据
<template>
<div>
<div>{{ data.count }}</div>
<button @click="modifyRead">尝试修改readonly</button>
<hr/>
<div v-for="(item,index) in testData " :key="index">{{item}}</div>
<hr/>
<div>{{foot.name}}</div>
<button @click="modifyRaw">尝试修改markRaw</button>
<hr/>
<div>{{state.count}}</div>
<div>{{state.next.data}}</div>
<button @click="modifyState">尝试修改state</button>
<hr/>
<div>{{state2.foo}}</div>
<div>{{state2.nested.bar}}</div>
<button @click="modifyState2">尝试修改state2</button>
</div>
</template>
<script setup>
import {isReactive, markRaw, reactive, readonly} from "vue";
// readonly 只接收一个对象
let data = readonly(
{
count: 55
}
)
// 编译器爆红,这里函数表达式和普通的函数都可以的
let modifyRead = ()=>{
data.count = 33;
}
--------------------------------分割---------------------------------------------
// isReactive 检查对象是否是由 reactive 创建的响应式代理。
let testData = reactive([1,2,3,5]);
console.log(isReactive(testData)) //true
--------------------------------分割---------------------------------------------
// markRaw 标记一个对象,使其永远不会转换为 proxy
const foot = markRaw( {
name:'gq',
age:33
})
function modifyRaw(){
foot.name ='小娃子'
console.log(foot) // 这里的值确实更改了, 但是界面没有更新,因为不是proxy代理的
}
console.log(isReactive(foot)) //false
--------------------------------分割---------------------------------------------
const state = shallowReactive({
count:1,
next:{
data:66
}
})
// 注意shallowReactive 这个 ,如果你先修改,第一层的数据,那么,next的数据也可以proxy,
// 但是直接修改 第二层,那么不可以
function modifyState(){
//这个时候可以
/* state.count++
state.next.data ++*/
// 不行
state.next.data++;
}
--------------------------------分割---------------------------------------------
//shallowReadonly, 一点不许改变
const state2 = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 编译器爆红
function modifyState2(){
state2.foo = 2;
state2.nested.bar = 55;
}
--------------------------------分割---------------------------------------------
// 对于为啥出现可定义非响应的数据,当渲染一组超大不需改变的列表,因为本身不需要改变,
// 那么我们就不必要,要让数据变成响应的。因为数据的proxy也消耗性能。
</script>
vue3 数据定义方式 reactive系列详解
最新推荐文章于 2024-03-05 16:49:36 发布