[前端暴龙机，Vue2.x 进化 Vue3 ] Day26. Vue3 Composition API 使用(二)

前一篇说到 该怎麽写 data 的资料，找回双向绑定机制 !!!
这边先小小的补充一下 XD

在 Options API 我们 data 里定义到的东西都可以被 Vue 拿来使用，就算是单纯用来做 setInterval 的变数，Vue 也会帮我们做成 双向绑定，不过 Composition API 中，就可以更好的去区分要不要被 Vue 做双向绑定使用，还是单纯变数使用~ 你不可不知！Vue 3 Composition API 使用要诀 | 影片介绍

找回双向绑定机制 data → 透过 ref, reactive 方法

(1). ref

• 没有型别的限制，任何型别的资料都可使用 ref
• ref 取值或者对值进行修改都 必须透过 .value 的方式
• 不会对物件或阵列内部的属性变动做监听

import {createApp,ref} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    const text = ref("ref_text") ;
    
    return {
      text
    }
  }
}).mount('#app')

(2). reactive

• 会限制只能使用物件
• 不需要透过 .value 的方式来取值
• 会自动做深层监听(对内部的属性变动做监听)

import {createApp,reactive} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js'

createApp({
  setup() {
    const text2 = reactive({
      text: "reactive_text"
    })
 
    return {
      text2
    }
  }
}).mount('#app')

[注意 !! ] 如果 reactive 使用非物件资料型态，会出现警告

const aa = reactive("reactive错误使用方式:赋予非物件型态")

(3). 演示范例

vue3_ ref & reactive 演示范例

medium blog【Vue 3】ref 跟 reactive 我该怎麽选!?
作者: Mike
ref & reactive 对内部属性变动监听演示范例
范例中只有 reactive 会自动做深层监听(对内部的属性变动做监听)

一不小心就错的地方

不知道有没有发现，不管使用 ref 还是 reactive 的方式来宣告，大家的习惯都是使用 const
可是? const 怎麽跟我印象中的使用不同? 下面来介绍一些情境

(1). 使用 var 宣告

import {createApp,ref,reactive,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    var student = reactive({
      name: '小智智'
    }) ;
    console.log("改名前 ===> ",student)
    
    onMounted(()=>{
      student = {
        name: '卡皮丘'
      }
      console.log("改名後 ===> ",student)
    })
  
    return {
      student
    }
  }
}).mount('#app')

当我们使用了 var 来宣告，如果不小心重新更新了整个变数(student)，它的架构就会从 Proxy 变成 Object 了，意味着双向绑定的特性被覆盖掉了，画面已经不会跟着数据更新了

否则，我们应当注意操作变更的动作(直接对物件内的内容做操作)
这边我们将范例同样用 var 新增一个博士，不过更新的方式不同，因此不会覆盖掉 Proxy 的架构

var teacher = reactive({
  name: '大木黑瓜博士'
});
console.log("博士改名前 ===> ",teacher)

onMounted(()=>{
  // 变更物件的值，而不是整个物件
  teacher.name = "小黑木瓜博士"
  console.log("博士改名後 ===> ",teacher)
})

演示范例

(2). 使用 const 宣告

可是 const 不是常用来宣告常数，不能变更吗?

const student = reactive({
  name: '小智智'
});

console.log("改名前 ===> ",student)

onMounted(()=>{
  // 整个 Proxy 架构被覆盖掉了~
  student = {
    name: '卡皮丘'
  }
  console.log("改名後 ===> ",student)
})

所以我们修改内容就必需透过上面说的 物件.KeyValue="新值"

onMounted(()=>{
  student.name = '卡皮丘'
  console.log("改名後 ===> ",student)
})

(3). 那麽 const 到底 const 了甚麽东西

const 禁止更改，但是我们又成功改变内容的值了?
这就需要复习了， const 到底是何方神圣了 ? (XDD
⮩ const 宣告的变数永远无法被重新赋值，但仍可以被改变(阵列、物件等的操作)

喔~ 原来是我记忆的方式错误了，应该这麽记忆才是正确的~

因此，以我自己的理解，这麽想可能比较好懂( 有说错再麻烦纠正下 )
const 是用来帮助我们固定 Proxy 的架构，让我们的保持数据响应，避免造成 var 的问题，不小心更新错误，导致数据无法响应在画面上

所以我们才会看到大家在写法上，基本是以 const 来宣告

参考资料

HiSKIO | 你不可不知！Vue 3 Composition API 使用要诀 | YouTube
六角学院 | Vue 3 Composition API 精髓掌握 | Youtube Vue3 新手夏令营活动
六角学院 | Composition API 共笔文件
medium blog, Mike |【Vue 3】ref 跟 reactive 我该怎麽选!?