Day_16 : 让 Vite 来开启你的Vue 之 资料定义 ref 与 reactive

Hi Dai Gei Ho~ 我是Winnie～

在今天文章中，我们要来说的是Compostion API 中的 ref 与reactive。而 在开始之前，我们先来回忆过去～ Option API 是如何来定义资料状态的:

// 以 Vue3 option API 中的 data 写法为主
<template>
 <h1>Hi!I am {{ name }}</h1>
</template>

<script>
 export default {
   data() {
     return {
       name: "Winnie"
     };
   }
 };
</script>

从上程序码我们可以看到，过去会透过 Vue Instance中 的data的属性，来 定义资料状态或着方法 ，而 data 本会身是一个 回传object 的 function，接着我们就可以在 模板(template) 或着 其他属性中来使用。

而针对 data 中内部 资料状态 的响应 ，Vue 是采去 object.definePropertity 的 方式，透过创建 getter与 setter 来追踪资料状态的变化。

MDN 在线解释：

Object.defineProperty 为 直接对一个物件定义、或是修改现有的属性，再执行後会回传定义完的物件。

ref 与 reactive

而到了 Composition API ，没有了 data属性来定义资料，取而代之的则是 ref 与 reactive两个函式 来进行 资料状态定义(一直担心接不回来，幸好接回来了)，

究竟这两个 如何使用呢？ 我们来看看吧 :

ref

在ref()函式中可以接受一个任何基本型别的参数，且会回传一个响应式物件(更正ref 也是被 ES6 proxy 所代理 )。而在这物件之中会提供一个.value 属性来更新或读取资料内的状态。

但是 当今天 资料状态 需回传给 模板(template) 使用 ，此时透过ref包装後的物件就不用再透过.value 属性来取值了，直接使用名称来使用即可。

好像有点饶口，我们来看看以下范例：

<template>
 <div> Wow！{{name}}</div>
 <img src="https://i.imgur.com/GPIayCC.jpg" alt="Wow！Jennifer Lopez" width="500" height="600">
<template/>
 <script>
 
 import { ref } from vue;
 
 export default {
  setup(){
    const name = ref('Jennifer Lopez'); 
    console.log(name) // 回传一个RefImpl 物件
    console.log(name.value) // Jennifer Lopez
    
    return { name }
    
 }
 </script>

reactive

reactive 为 Composition API 定义资料状态的另一个函式，其中 reactive() 只接受 物件 及 阵列 型别的参数，最後会回传一个 被ES6 Proxy所代理过的物件，达到响应式的更新，而其中 要读取或更新其资料的方式 就不需透过.value 来取值了

ES6 Proxy 是什麽？
主要是作为指定物件的代理，可以改写、侦听物件的存取与操作 (先向自己许愿XD，希望之後自己可以认真点 再番外写一篇关於 ES6 Proxy)

使用方式如下：

 <template>
 <div>{{setCount.count}}<div/>
 <button @click="setCount.plus"></button>
 <template/>
 <script>
 import { reactive } from vue;
 
 export default {
  setup(){
    const setCount = reactive({
        count:1,
        plus: setCount.count ++
    }); 
    
    console.log(setCount.count) //1
    
    return {
      setCount
    }
 }
 </script>

这边注意 reactive 回传给template 的物件，不能直接使用 ES6 来解构，因为 ES6 解构语法 会将 被包装後的响应式功能给抽离出来，失去响应功能，这与昨天我们说的props一样 需透过 toRefs来进行处理 (後续有一篇关於 toRefs的介绍，再请各位稍等)

以上 就是关於 Composition API ref与 reactive 资料定义的介绍，如有问题欢迎各位多多指教，谢谢大家。