學習 vue3 第一天 vue3簡介，建立vue3專案 Composition Api 初識

六扇有伊人發表於2022-11-25
VueAPI

前言：

從今天開始來和大家一起學習 vue3 相信大家都不陌生，已經火了一段時間了，但是還是有不少人沒有學習，那就跟著六扇老師來簡單的入個門

廢話不多說，來開始今天的學習

Vue3 簡介：

2020年，9月，18日，Vue.js釋出3.0版本，耗時兩年多，2600+次提交，99位貢獻值

github 上的 tags 地址 ：https://github.com/vuejs/core/releases/tag/v3.0.0

Vue3 帶來了什麼：

  1. 效能的提升，更快，更小，打包大小減少，初次渲染，更新渲染更快，記憶體減小
  2. 原始碼的升級，使用 Proxy 代替 defineProperty 實現響應式，重新寫了虛擬 DOM 的實現 - 讓虛擬DO M 更快了 和 Tree-Shaking - 術語 幹掉了沒有使用的程式碼，讓打包體積更小
  3. 擁抱了 TS ，vue3 更好的支援 TypeScript 
  4. 增加了新特性 

Composltlon API （組合 API）

  • setup 配置
  • ref 、 reactive
  • watch 、watchEffect
  • provide 、 inject

新的內建元件

  • Fragment
  • Teleport
  • Suspense

其他

新的生命週期鉤子

data 不再是物件，始終是一個函式

......

上邊的東西只是一個瞭解，混一個臉熟，不會，看不懂也沒有關係，後邊我們會一個個講，看一遍就會的，尤其是有 vue2 基礎的

說了怎麼，不如上手寫寫一遍，下面我們就開始建立我們的 vue3

vue3 的建立：

建立 vue3 專案有兩種方式，一種是 vue 傳統的建立方式 一種是 vite 建立

  • 使用 vue-cli 建立
vue create vue3專案的name
  • 使用 vite 建立

當然這裡插一個題外話，什麼是 vite ----- 下一代前端構建工具差不多也是新一代了，現一代是webpack

vite 官網 ：https://cn.vitejs.dev/

vite 有什麼優勢呢？

  • 開發環境中，無需打包操作，快速的冷啟動
  • 熱過載（HMR） 更輕量，快 （區域性重新整理）
  • 按需編譯，不用再等待整個應用的編譯

vite 優勢也差不多就是特點

傳統的構建相信用過 webpack 都知道，他是透過入口檔案然後分析路由，再去分析模組，都分析完了進行打包，然後告訴你伺服器準備好了

 

 

 vite 構建的工作模式，一上來就給使用者準備好伺服器，然後等待使用者請求，假如你發起了一個請求，然後 vite 會根據你的路徑 進入 入口檔案然後找到 你的路由，分析該路由的模組，然後給你 （動態的引入和程式碼分割）

 

 

 用 vite 建立 vue3 

npm init vite-app vue3專案的name

當然 vite 建立是沒有依賴的，需要進入專案自己在 npm i

而且 vite 自配置的啟動 是 npm run dev

vite 會更快，不信你就都下載然後對比一下，實踐出真理

分析工程結構圖：

接下來讓我們分析一下 vue3 的工程結構 看看和 vue2 到底有什麼區別，我們以 vue-cli 下載好的 vue3 專案為例

開啟檔案，我們發現 vue3 的目錄結構和擺放位置都和 vue2 一樣沒什麼區別

只不過 vue3 檔案裡面的一些語法和 vue2 不同

接下來我們來分析吧，如何分析？

main.js

首先我們開啟專案的入口檔案 main.js，一共寫了三行程式碼，和 vue2 不同了吧

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

其中 import App from './App.vue' 我們見過在 vue2 中也有 意思是 引入所有元件的外殼元件，也就是所有元件的父親

import { createApp } from 'vue'  引入的不再是 Vue 建構函式了 是有一個 createApp 應用的例項物件，工廠函式

vue2 裡面 我們是 new 一個 vue 是一個建構函式

vue3  createApp 直接是 一個工廠函式 ，可以直接呼叫

有什麼不同呢？

來我們先回憶一下 vue2 中的寫法，

new Vue({

render:(h)=>{

return h(app)

}

}).$mount('#app')

我們拆解一下

const vm = new vue({render:h => h(app)})

vm.$mount('#app')

這是之前的寫法，接下來我們再把 createApp(App).mount('#app') 拆解

const app = createApp(App)

app.mount('#app')

這樣一對比是不是明白了

const app = createApp(App) 其實就是 建立例項應用物件  （和 vue2 裡面的 vm 類似 但 app 更輕）

app本質就是一個物件，裡面好多東西，vm裡面很多需要的不需要的都放在裡面，但 app 更精，減少了不需要的東西，所以“輕”了

App.vue

入口檔案分析完了，我們按照程式碼執行的方式，接下來分析 App.vue

進入 App.vue 和 vue2 一樣 template script style 沒區別

但是有一個地方發生變化了，那就是 template 裡邊沒有 div 了

vue3 元件中的模板結構可以沒有根標籤了（可以有，可以沒有）寫不寫都行了

Composition Api 初識：

composition 組合式 API 這概念有點長，有點多，不太好理解，先不講，暫時知道 composition 是組合式 AIP 就行

setup：

想玩 vue3 最好就是先學 setup，因為 setup 是 所有組合式API（comosition）的大舞臺

setup是什麼？

是 vue3 中一個新的配置項，一個函式，新增

頁面中需要的資料，也就是元件中所應用的資料，方法，生命週期，計算屬性等等等，都要配置寫在 setup 中

那怎麼配置呢，直接上手，寫程式碼

export default {

name: 'App',

setup(){

let name = '六扇老師'

let age = '18'

// 方法

function sayHello(){ alert(`你們好，我是${name},今年${age}`) }

},

}

 和 vue2 不一樣了，我們 vue3 需要資料不用 data 了 直接寫就行了

setup 的返回值

寫完問題也就來了，誒六扇老師，我光寫完資料和方法了，我在元件中怎麼使用呢？

這裡就要說 setup 的返回值了，它有兩種一種是返回物件，一種是渲染函式

  • 若 setup 返回的是一個物件，則物件中的屬性，方法，直接就可以在模板中使用，和 vue2  一樣 （主要的內容）

setup(){

let name = '六扇老師'

let age = '18'

function sayHello(){ alert(`你們好，我是${name},今年${age}`) }

return { name, age, sayHello, }

},

我們直接在 setup 最後加一個 return 返回我們的 資料

然後再模板中和 vue2 一樣去引用，啟動專案

接下來我們再看 setup 的另一種返回值 

  • 返回一個渲染函式，可以自定義渲染內容（瞭解就行，不常用）

可以看到我們上邊寫的也不生效了，setup 返回的渲染函式為主了

當然返回的渲染函式前提需要引入 h ，渲染函式

題外話：vue3 是向下相容的，你可以在 vue3 中寫 vue2 語法的程式碼，如果都寫一起得話，在 vue2 的方法中能獲取到 vue3 裡面 setup 的值

但是 在 vue3 中 不能獲取到 vue2 中 data 的值，而且如果有同名的，setup 優先

不建議與 vue2 配置混用，因為不知道什麼時候就不相容了，要不還學 vue3 幹嘛

setup 不能是一個 async 函式，因為返回值不再是 return 的物件，而是 promise， 模板看不到 retuen 裡面的資料物件

ref 函式

ref初識

我們在 vue2 的時候學過 ref ，是一個標籤屬性，給一個元素打標識，方便我們拿到，然後使用

但 vue3 裡面多了一個名為 ref 的函式

在學習 ref 函式之前我們先思考一個問題，上邊我們已經寫了資料，那如何修改呢？

老師我知道，直接寫一個函式，然後呼叫，讓 name 等於別的就修改了

我們可以看到，這樣寫了之後，資料是修改了，但是頁面卻沒有修改，也就是 vue 沒有發現

vue 不認識，也就是說你這樣定義的資料它只是普通的資料，根本不是響應式資料

那如何把普通的資料變成 vue 可以監測到的響應式資料呢，這就用到了 ref 函式

首先我們要先引入我們的 ref 函式

import {ref} from 'vue'

export default {

setup(){

let name = ref('六扇老師')

let age = ref('18')

function changeInfo(){

console.log(name,age)

}

return { name, age, changeInfo, }

}

我們看用 ref 函式更改完的資料，它是一個 RefImpl 的例項物件，那什麼是 RefImpl 物件？

我們拆開來看，Ref ---> reference 引用，Impl implement 實現

那 RefImpl 標準的稱呼就是"引用實現的例項物件"，簡稱引用物件

然後我們看裡面，其他的值我們不看，就看一個 value 和 原型物件裡面的 set 和 get 

熟悉吧，和 vue2 一樣，拿到你的資料，然後透過 set 和 get 修改，然後頁面等等等

那怎麼修改呢，直接在你要修改的值後邊加上 .value 就修改完成了

 

 

小知識：template 元件裡面的發現 ref 物件會自動獲取到 value 值，所以直接寫就能獲取到值

ref 複雜物件

弄完基本型別資料，我們用 ref 寫一個物件型別

資料有了，那我們怎麼更改呢，其實也簡單，看圖我也經把 job.value 列印出來了

直接 job.value.type = 什麼值，就可以更改了

那問題來了 ref 加工之後不是都 RefImpl 物件嗎，為什麼 job.value 變成 Proxy 物件了呢，帶著這個問題，往下看 reactive 函式

總結：

ref 的作用，定義了一個響應式資料。建立了一個包含響應式資料的引用物件（reference物件，簡稱 ref 物件）

接受的資料可以是：基本型別，也可以是：物件型別

基本型別的資料：和 vue2 一樣響應式依然是靠 Object.defineProperty() 的 get 與 set 完成的

物件型別的資料：內部 求助 了 vue3 中的一個新函式 reactive 函式

題外話：vue3 接受到 物件型別的資料，底層就是 用 ES6 新語法 Proxy 來處理的，但是在 vue3 中並沒有直接使用，而是被封裝到 reactive 函式里面 

reactive 函式

reactive 只能定義物件型別和陣列的響應式資料 （基本型別用 ref ），之所以 ref 可以是因為 ref 內部求助了 reactive

用完 reactive 之後就和正常使用一樣了，直接點就行

當然陣列也是同理，直接放在裡面寫就行了，物件怎麼用他怎麼用，而且還能直接透過索引去改，這是 vue2 辦不到的

let arr = reactive(["學習","喝酒","燙頭"])

function changeInfo(){

arr[0] = "抽菸"

}

reactive 的語法：

const 代理物件 = reactive（原物件），接受到一個物件或陣列，返回一個代理物件（Proxy的例項物件）

reactive 定義的響應式資料是更深層次的，不管有多深都能點出來

內部是透過 ES6 的 Proxy 實現，透過代理物件操作原對內部資料進行操作，並且這種操作是可以被 vue 所捕獲到的，也就是我們說的資料劫持

題外話：

學到這裡有同學該問了，那老師這樣寫太墨跡了，一會 ref . vaule 一會 reactive 不點咋解決呢

還是那句話，程式碼是死的人是活的，就像我們這幾個資料，你可以直接這樣去寫

 

 這樣是不是語法語義都正確了，而且還省事了，但是我還是覺得有點麻煩，不想點來點去的，別急留一個問題，我們下章再講

相關文章