【vue3.0学习】 reactive函数 toRef函数

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

演示代码

<template>
  <div id="app">
    姓名: {{ user.name }}
    <br />
    年龄: {{ user.age }}
    <br />
    <button @click="editUser">更新人员</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    //定义响应式 复杂类型数据  需要用reactive 包裹
    const user = reactive({
      name: "张三",
      age: 18,
    });
    const editUser = () => {
      console.log(editUser);
      user.name = "李四";
      user.age = 20;
    };
    //如果要在模板使用 setup里的数据或者函数  必须return出去
    return { user, editUser };
  },
};
</script>

<style>
</style>

reactive通常是用来定义响应式对象数据

如果直接定义 不用reactive包裹 数据不是响应式的，修改方法正常执行，但是不会改变数据 视图不会更新

<template>
  <div id="app">
    姓名: {{ user.name }}
    <br />
    年龄: {{ user.age }}
    <br />
    <button @click="editUser">更新人员</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    //定义响应式 复杂类型数据  需要用reactive 包裹
    // const user = reactive({
    //   name: "张三",
    //   age: 18,
    // });
    //普通数据
    const user = {
      name: "张三",
      age: 15,
    };
    const editUser = () => {
      console.log(editUser);
      user.name = "李四";
      user.age = 20;
    };
    //如果要在模板使用 setup里的数据或者函数  必须return出去
    return { user, editUser };
  },
};
</script>

<style>
</style>

toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

<template>
  <div id="app">姓名：{{ name }}</div>
  <button @click="editUser">修改</button>
</template>

<script>
import { reactive, toRef } from "@vue/reactivity";
export default {
  name: "App",
  setup() {
    //   1.定义响应式数据
    const user = reactive({
      name: "张三",
      age: 20,
    });
    // 2.模板中只需要用name 直接用解构赋值  拿出来的name不是响应式数据
    const name = toRef(user, "name");
    const editUser = () => {
      name = "李四";
    };
    return { name, editUser };
  },
};
</script>

<style>
</style>

这样会报错 想要实现修改name 值必须修改 name.value

<template>
  <div id="app">姓名：{{ name }}</div>
  <button @click="editUser">修改</button>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  name: "App",
  setup() {
    //   1.定义响应式数据
    const user = reactive({
      name: "张三",
      age: 20,
    });
    // 2.模板中只需要用name 直接用解构赋值  拿出来的name不是响应式数据
    const name = toRef(user, "name");
    const editUser = () => {
      //   name = "李四";
      name.value = "李四";
    };
    return { name, editUser };
  },
};
</script>

<style>
</style>

这样就没问题了

使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。