1. reactive を使用して定義されたデータを再割り当てします
<template>
<h1>{
{
foo.a }}</h1>
<h1>{
{
bar.a }}</h1>
<button @click="handleClick">点我</button>
</template>
<script setup>
import {
ref, reactive } from 'vue'
let foo = ref({
a: 1, b: 2, c: 3 })
let bar= reactive({
a: 1, b: 2, c: 3 })
const handleClick = () => {
foo.value = {
a: 11
}
bar= {
a: 99
}
}
</script>
理由: ref 定義オブジェクトは再割り当て後に応答性を失わないが、reactive は応答性を失う理由
结论：ref 定义对象重新赋值后不会丢失响应式，而 reactive 会丢失响应式。
2. レスポンシブデータは構造化されて割り当てられます (ほとんどの場合、props 内のデータが分解されて割り当てられます)
<template>
<h1>{
{
a.b.c }}</h1>
<h1 v-if="a.b.d">{
{
a.b.d }}</h1>
<h1>{
{
aa.bb }}</h1>
<h1>{
{
aaa }}</h1>
</template>
<script setup>
import {
ref, onMounted} from 'vue'
const obj = {
a: {
b: {
c: 1
}
},
aa: {
bb: 11
},
aaa: 111
}
let testObj = ref(obj)
let {
a, aa, aaa } = testObj.value
onMounted(() => {
setTimeout(() => {
a.b.c = 9
a.b.d = 9
aa.bb = 99
aaa = 999
}, 3000)
})
</script>
上記のデータには応答性が欠落しているのは aaa だけです
理由：
構造化代入では元の型の代入と参照型の代入が区別されることがわかっています。元の型の代入は値による受け渡しと同等であり、参照型の値は参照による受け渡しと同等です。
値渡し
// 假设a是个响应式对象
a.b = 1
// c 此时就是一个值跟当前的 a 已经不沾边了
const c=a.b // 相当于 c = 1
c への直接アクセスは、この値への直接アクセスと同等であり、 a オブジェクトのゲッターをバイパスします。したがって、最初の例では、aaa は応答性を失います。
参照渡し
// 假设 a 是个响应式对象
const a.b.c = 3
// 当你访问a.b的时候就已经重新初始化响应式了，此时的 c 就已经是一个代理的对象
const c=a.b
c に直接アクセスすると、応答性の高いオブジェクトにアクセスするのと同じになるため、応答性が失われることはありません。
なぜabは反応するのですか？
ソースコード中のreactiveメソッドはcreateReactiveObjectメソッドを呼び出しており、createReactiveObjectメソッド内でデータがレスポンシブかどうかの判定を行っています。
// target already has corresponding Proxy
const existingProxy = proxyMap.get(target);
if (existingProxy) {
return existingProxy;
}
コメントは、この if の機能が、ターゲット オブジェクトが応答しているかどうかを判断し、応答している場合はそれを返すことであるため、 c が取得するのは引き続き応答データであることを示しています。
结论：对响应式数据进行解构赋值，如果解构出来的数据是 基本数据类型，则会丢失响应式，如果是 引用类型，则不会丢失响应式。
3. vuex データを割り当てに使用する
<template>
<h1>{
{
test }}</h1>
<h1>{
{
testCom }}</h1>
</template>
<script setup>
import {
ref, onMounted, computed } from 'vue'
import {
useStore } from 'vuex'
const store = useStore()
// store.state.testData的初始值为 '11111'
let test = ref(store.state.testData) // 相当于let test = ref('11111')
// 解决办法
let testCom = computed(() => {
return store.state.testData
})
onMounted(() => {
setTimeout(() => {
store.commit('getTestData', '12345')
}, 3000)
})
</script>
理由:これは変数割り当ての理由であるため、詳細は説明しません。
解決策:計算されたものを使用する