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

前言：

從今天開始來和大家一起學習 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 不點咋解決呢

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

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

標籤：其他

上一篇：記錄--uniapp 使用原生子表單進行視頻聊天

下一篇：vuex頁面重繪資料丟失問題的四種解決方式