vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 reactive理解

对Vue3中reactive的深入理解

作者:山竹回家了

这篇文章主要介绍了对Vue3中reactive的深入理解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue3 reactive的理解

1.什么是reactive?

2.reactive注意点

错误示范

在这里插入图片描述

正确实例

在这里插入图片描述

arr正确实例

在这里插入图片描述

Vue3笔记 reactive函数

reactive定义的响应式数据是“深层次的”。

内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>一个人的信息</h1>
  <h1>年龄:{{ p.age }}</h1>
  <h1>姓名:{{ p.name }}</h1>
  <h1>工作种类: {{ p.job.type }}</h1>
  <h1>工作薪水: {{ p.job.salary }}</h1>
  <h1>爱好: {{ hobby }}</h1>
  <h1>测试的数据: {{ p.a.b.c }}</h1>
  <button @click="changeInfo">修改人的信息</button>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let hobby = reactive(["抽烟", "喝酒", "打麻将"]);
    // 数据
    let p = reactive({
      name: "张三",
      age: 19,
      job: {
        type: "前端工程师",
        salary: "20k",
      },
      a: {
        b: {
          c: 666666,
        },
      },
      hobby: ["抽烟", "喝酒", "打麻将"],
    });

    // 方法
    function changeInfo() {
      console.log(p.job);
      p.name = "李四";
      p.age = 119;
      p.job.salary = "69k";
      p.job.type = "算法工程师";
      p.hobby[0] = "学习";
      hobby[0] = "学习算法";
    }
    return {
      p,
      hobby,
      changeInfo,
    };
  },
};
</script>

总结一下:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文