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

马克社区

发布于 2022-05-09 16:10:28

2290

发布于 2022-05-09 16:10:28

文章被收录于专栏：高端IT高端IT

前言

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
12345678910111213141516171819202122232425262728293031323334353637383940414243444546

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

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

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端性能监控