iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 26

[前端暴龍機,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錯誤使用方式:賦予非物件型態")

https://ithelp.ithome.com.tw/upload/images/20210823/20120722RhHnuJoQo9.jpg

(3). 演示範例

vue3_ ref & reactive 演示範例

medium blog【Vue 3】ref 跟 reactive 我該怎麼選!?
作者: Mike
ref & reactive 對內部屬性變動監聽演示範例
範例中只有 reactive 會自動做深層監聽(對內部的屬性變動做監聽)
https://ithelp.ithome.com.tw/upload/images/20210823/20120722OatnBDJbEN.jpg

一不小心就錯的地方

不知道有沒有發現,不管使用 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')

https://ithelp.ithome.com.tw/upload/images/20210823/20120722N5LmyKfhvw.jpg
當我們使用了 var 來宣告,如果不小心重新更新了整個變數(student),它的架構就會從 Proxy 變成 Object 了,意味著雙向綁定的特性被覆蓋掉了,畫面已經不會跟著數據更新了

否則,我們應當注意操作變更的動作(直接對物件內的內容做操作)
這邊我們將範例同樣用 var 新增一個博士,不過更新的方式不同,因此不會覆蓋掉 Proxy 的架構

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

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

https://ithelp.ithome.com.tw/upload/images/20210823/20120722XoLUyGKLlR.jpg
演示範例

(2). 使用 const 宣告

可是 const 不是常用來宣告常數,不能變更嗎?

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

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

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

https://ithelp.ithome.com.tw/upload/images/20210823/20120722qiMwMtothv.jpg

所以我們修改內容就必需透過上面說的 物件.KeyValue="新值"

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

https://ithelp.ithome.com.tw/upload/images/20210823/20120722HMz3651VOC.jpg

(3). 那麼 const 到底 const 了甚麼東西

const 禁止更改,但是我們又成功改變內容的值了?
這就需要複習了, const 到底是何方神聖了 ? (XDD
const 宣告的變數永遠無法被重新賦值,但仍可以被改變(陣列、物件等的操作)

/images/emoticon/emoticon25.gif 喔~ 原來是我記憶的方式錯誤了,應該這麼記憶才是正確的~

因此,以我自己的理解,這麼想可能比較好懂( 有說錯再麻煩糾正下 /images/emoticon/emoticon16.gif)
const 是用來幫助我們固定 Proxy 的架構,讓我們的保持數據響應,避免造成 var 的問題,不小心更新錯誤,導致數據無法響應在畫面上
https://ithelp.ithome.com.tw/upload/images/20210823/20120722qjzm2jH3Nc.png

所以我們才會看到大家在寫法上,基本是以 const 來宣告


參考資料

HiSKIO | 你不可不知!Vue 3 Composition API 使用要訣 | YouTube
六角學院 | Vue 3 Composition API 精髓掌握 | Youtube Vue3 新手夏令營活動
六角學院 | Composition API 共筆文件
medium blog, Mike |【Vue 3】ref 跟 reactive 我該怎麼選!?


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day25. Vue3 Composition API 使用(一)
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day27. Vue3 ref & reactive 小練習
系列文
前端暴龍機,Vue2.x 進化 Vue330

尚未有邦友留言

立即登入留言