vue3中reactive注意点（系列四）
reactive
reactive是 Vue3 中提供的实现响应式数据的⽅法。
在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的Proxy来实现的。具体参照，。
reactive 参数必须是对象 (json / arr)
本质: 就是将传⼊的数据包装成⼀个Proxy对象
如果给 reactive 传递了其它对象（如Date对象）
默认情况下，修改对象⽆法实现界⾯的数据绑定更新。
如果需要更新，需要进⾏重新赋值。（即不允许直接操作数据，需要放个新的数据来替代原数据）
在reactive使⽤基本类型参数
基本类型（数字、字符串、布尔值）在reactive中⽆法被创建成proxy对象，也就⽆法实现监听。⽆法实现响应式
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive(0)
function c() {
console.log(msg);
msg ++;
}
return {
msg,
c
};
}
}
</script>
点击 button ，我们期望的结果是数字从 0 变成 1，然⽽实际上界⾯上的数字并没有发⽣任何改变。
查看控制台，它的输出是这样的（我点了 3 次）
出现提⽰
value cannot be made reactive: 0
⽽输出的值确实发⽣了变化，只不过这种变化并没有反馈到界⾯上，也就是说并没有实现双向数据绑定。当然，如果是ref的话，就不存在这样的问题。⽽如果要使⽤reactive，我们需要将参数从基本类型转化为对象。
<template>
<div>
<p>{{msg.num}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: 0
})
function c() {
console.log(msg);
msg.num ++;
}
return {
msg,
c
};
}
}
</script>
将参数替换成了对象{num: 0}，此时，点击按钮界⾯就会产⽣改变（我点了 3 次）。
在控制台打印消息
可以看到，msg成功被创建成了proxy对象，他通过劫持对象的get和set⽅法实现了对象的双向数据绑定。深层的、对象内部的变化也能被察觉到（注意下⾯代码中的inner）
<template>
<div>
<p>{{msg.num.inner}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
num: {
inner: 0
}
})
function c() {
console.log(msg);
msg.num.inner ++;
}
return {
msg,
c
};
}
}
</script>
数组变化也不在话下。
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive([1, 2, 3])
function c() {
console.log(msg);
msg[0] += 1;
msg[1] = 5;
}
return {
msg,
c
};
}
}
</script>
在reactive使⽤Date参数
如果参数不是数组、对象，⽽是稍微奇怪⼀点的数据类型，例如说Date，那么⿇烦⼜来了。
<template>
<div>
<p>{{msg}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive(new Date())
function c() {
console.log(msg);
msg.Date() + 1);
console.log(msg);
}
return {
msg,
c
};
}
}
</script>
这⾥我先打印了msg两次，可以看到，点击⼀次 button ，msg的数据是存在变化的，但界⾯并未发⽣变化，同时我们发现在控制台⾥，msg并未被识别成proxy。
就算我们把Date放在对象⾥，就像这样
<template>
<div>
<p>{{msg.date}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
console.log(msg);
msg.date.setDate(Date() + 1);
console.log(msg);
}
return {
msg,
c
};
}
}
</script>
也仍然不起效果。
显然，对于这种数据类型，我们需要做特殊处理。
这个特殊处理就是重新赋值（，⽽不是直接修改原来的值）。
<template>
<div>
<p>{{msg.date}}</p>
<button @click="c">button</button>
</div>
</template>
<script>
import { reactive } from'vue'
export default {
name: 'App',
setup() {
let msg = reactive({
date: new Date()
});
function c() {
console.log(msg);
msg.date.setDate((Date() + 1));
msg.date = new Date(msg.date);
reactive 数组console.log(msg);
}
return {
msg,
c
};
}
}
</script>
这⾥我采⽤了拷贝的⽅案重新赋值了msg.date，界⾯成功发⽣了变化（⽇期 + 1）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。