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的數據具有響應能力