「快速学习系列」我熬夜整理了Vue3.x响应性API

前言

Vue3.x正式版发布已经快半年了，相信大家也多多少少也用Vue3.x开发过项目。那么，我们今天就整理下Vue3.x中的响应性API。
响应性API
reactive

作用： 创建一个响应式数据。

本质： 传入数据（复杂类型：数组和json对象）包装成一个Proxy对象。如果传入其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值（创建一个新的对象）的方式。

<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

 

作用： 创建一个响应式数据。修改对应的值必须在后面加上.value。
注意点： 在template标签内不用加.value。

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118721211