前言
Vue3.x正式版发布已经快半年了，相信大家也多多少少也用Vue3.x开发过项目。那么，我们今天就整理下Vue3.x中的响应性API。 响应性API reactive
作用： 创建一个响应式数据。
本质： 传入数据（复杂类型：数组和json对象）包装成一个Proxy对象。如果传入其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值（创建一个新的对象）的方式。
代码语言：javascript复制<template>
<div class="reactive">
<button @click="fn">点击</button>
<p>{{ state }}</p>
<button @click="fn1">点击1</button>
<p>{{ timeState }}</p>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
name: "Reactive",
setup() {
let state = reactive({
name: "123",
});
function fn() {
console.log(state);
state.name = "456";
}
let timeState = reactive({
time: new Date(),
});
function fn1() {
const newTime = new Date(timeState.time.getTime());
newTime.setDate(timeState.time.getDate() 1);
timeState.time = newTime;
console.log(timeState.time);
}
return {
state,
fn,
timeState,
fn1,
};
},
};
</script>
ref
12345678910111213141516171819202122232425262728293031323334353637383940414243444546作用： 创建一个响应式数据。修改对应的值必须在后面加上.value。 注意点： 在template标签内不用加.value。
更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118721211
