vue3响应式数据实现及父子传参

1.reactive()--参数必须是对象(json/arr)

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

toRef()函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。----优化访问，去除前缀（某一个属性）

toRefs()函数，转换响应式对象中所有属性（可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的。----获取多个属性进行访问

ref()函数，常用于简单数据类型定义为响应式数据--在修改值和获取值的时候，需要.value--在模板中使用ref申明的响应式数据，可以省略.value

ref其实也可以定义对象，但是访问时需要value属性

// 父组件
<template>
  <div class="home">
    <!-- 直接传递post对象 子组件使用需要加post前缀(post.title) -->
    <!-- <set-up :post="post"></set-up> -->
    <set-up :title="title"></set-up>
    <!-- <set-up :name="name"></set-up> -->
    <p>{{ title }}&{{ name }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import SetUp from "../components/setUp.vue";
import { reactive, toRefs, toRef } from "vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
    SetUp,
  },
  setup() {
    const post = reactive({
      title: "vue3父子传参",
      name: "zq",
    });
    // toRef传递对象中的某一属性
    // const name = toRef(post, "name");
    // return { name };
    // 方式一：直接传递对象中的属性
    // const { title } = toRefs(post);
    // return { title };
    // 方式二
    return { ...toRefs(post) };
    // 传递对象 子组件使用post.title
    // return { post };
  },
};
</script>

// 子组件
<template>
  <div>
    <h3>setup()函数</h3>
    <!-- <p>显示属性:{{ post.title }}</p> -->
    <p>显示属性:{{ title }}</p>
    <!-- <p>姓名:{{ name }}</p> -->
    <p>点击count+1</p>
    <button @click="handleClick">{{ count }}</button>
  </div>
</template>

<script>
import { toRef, ref } from "vue";
export default {
  props: {
    // post: Object,
    title: String,
    // name: String,
  },
  setup(props) {
    // const atr = "hello";
    // return { atr }; setup返回的值相当于双向数据绑定的属性
    // console.log(props.title);
    // ref主要定义基本类型的数据并保证响应式能力（也可以是对象或数组）
    const count = ref(0);
    const handleClick = () => {
      count.value += 1;
    };
    return { count, handleClick };
  },
};
</script>

<style lang="scss" scoped></style>

总结

1.setup中直接返回的普通数据不是响应式的

2.通过reactive包裹对象可以成为响应式数据

3.为了简化对象的访问（去掉前缀），可以使用toRef进行优化

4.为了获取对象中多个属性，可以使用toRefs进一步简化

5.如果是简单数据类型，使用ref定义更加合适，ref的数据具有响应能力