【vue3练习-03】reactive()函数实现数据响应式

使用前还是老套路需要引用

通常用来实现对象、数组等类型的数据响应式，与ref区别在于不需要.value，底层实现原理不同

<template>
  <div class="hello">
    {{ meili.father.captain.name }}
    <button @click="response">reactive函数实现对象响应式</button>
    <button @click="changeArr">reactive函数实现数组响应式</button>
    <span v-for="item in sunny" :key="item">{{item}},</span>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "",
  setup() {
    let meili = reactive({
      captain: "乌索普",
      father: {
        name: "耶稣布",
        captain: {
          name: "香克斯",
        },
      },
    });
    let sunny = reactive(['路飞','索隆','山治','娜美',])
    function response() {
        // reactive跟ref的区别就在于他不用.value，直接就能拿到
        //不管对象有多少层都是响应式的
      meili.father.captain.name = "山贼王";
    }
    function changeArr(){
        //由于实现响应式的原理不再是Object.defineProperty,
        // 所以能够直接通过数组下标修改数组某个值，不再需要vue2里面的this.$set()方法了
        sunny[0] = '乌索普'
    }
    // 记得定义过的数据及方法都要返回
    return {
      meili,
      sunny,
      response,
      changeArr
    };
  },
};
</script>