為什么要學(xué)習(xí)vue3呢？

vue2.0也是現(xiàn)在比較穩(wěn)定的一個(gè)版本，社區(qū)還有周邊都比較完善，如果不是非必要其實(shí)我們不需要著急直接升級(jí)到vue3.0;
那為什么還要學(xué)習(xí)，主要是還是為了了解一下vue3.0相較于2.0的優(yōu)勢(shì)和特性，方便之后3.0版本的社區(qū)和周邊完善之后，我們直接升級(jí)到3.0去使用，還有就是為了提升一下技術(shù)和漲薪資，畢竟3.0剛出的時(shí)候就受到了業(yè)內(nèi)各個(gè)大佬的關(guān)注，現(xiàn)在的前端圈最火的也就是vue3.0了，所以不管是為了學(xué)習(xí)新的知識(shí)，還是學(xué)習(xí)尤大的編程思想，亦或者是為了漲薪資我們都有必要去看一看學(xué)一學(xué)。

怎么從2.0版本升級(jí)到3.0版本？

首先我們想要體驗(yàn)3.0版本還是得先升級(jí)，下邊先介紹幾個(gè)可以升級(jí)到3.0版本的方法；

1.第一種方式, 使用官方的vue-cli腳手架升級(jí);如果有看不明白的同學(xué)可以直接去官網(wǎng)查看vue-cli

// 先把腳手架升級(jí)到最新版本，如果之前沒(méi)有安裝過(guò)的話，直接全局安裝就是最新版本的4.0
npm install -g @vue/cli
or
yarn global add @vue/cli

// 如果已經(jīng)安裝過(guò)的可以升級(jí)一下版本
npm update -g @vue/cli
or
yarn global upgrade --latest @vue/cli

ps: 把版本升級(jí)到最新之后，就可以直接開始安裝了，先創(chuàng)建一個(gè)vue3.0的項(xiàng)目

vue create vue3 // 默認(rèn)選擇3.0版本創(chuàng)建就可以了，創(chuàng)建之后就可以運(yùn)行一下體驗(yàn)了
cd vue3 // 進(jìn)去之后
yarn serve

ps: 如果忘了選擇3.0？沒(méi)事的不打緊還可以進(jìn)入項(xiàng)目中安裝

// 如果你創(chuàng)建的項(xiàng)目是默認(rèn)選擇的2.0版本, 按下邊的操作就可以
yarn add vue-next // add vue-next 會(huì)自動(dòng)升級(jí)到vue3的版本

2.第二種方式使用vite安裝，這個(gè)也是尤大的力作 vite github 地址

// 首先我們需要先把vite代碼clone到本地
git clone https://github.com/vitejs/vite.gi

cd vite // 進(jìn)入文件

yarn // 開始安裝依賴

yarn build // 打包

yarn link

ps: 開始創(chuàng)建你的項(xiàng)目

yarn create vite-app project-name
cd project-name
yarn
yarn dev

ps: 完成上述操作就可以開始愉快的體驗(yàn)vue3.0了

vue3的composition API的簡(jiǎn)單介紹和使用 compositon API 使用官方手冊(cè)

1.首先先來(lái)認(rèn)識(shí)一下composition API

什么是composition API？字面解釋就是組合式API，也就是將原來(lái)的很多底層的方法拆分開，暴露出來(lái)讓大家去使用；
比如原來(lái)的方法只能寫在methods里邊，但是在vue3中是有一定變化的，要放到setup中去使用;

下邊先來(lái)看幾個(gè)我覺(jué)得比較重要的API，先簡(jiǎn)單的介紹下使用方式?感受下跟之前的2.0有什么不一樣的地方;

image

1.createApp // 顧名思義，創(chuàng)建一個(gè)APP實(shí)例，不過(guò)要怎么使用呢？

// 先導(dǎo)入createApp模塊
import { createApp } from 'vue';
import App from './App.vue';

// 使用createApp方法將我們的入口文件放進(jìn)去，最后掛載
createApp(App).mount('#app');

2.onMounted // 跟之前的寫法不一樣了不過(guò)，多了一個(gè)on

// 先導(dǎo)入onMounted模塊
import { onMounted, defineComponent } from 'vue';

export default defineComponent({
    setup () {
        // 使用的時(shí)候需要放在setup里邊
        onMounted(() => {
            console.log('組件掛在結(jié)束開始打印。。。')
        })
    }
})

3.computed 計(jì)算機(jī)屬性

import { computed, ref } from 'vue';

// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 錯(cuò)誤！

import { computed, ref } from 'vue';

// 可以修改值
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

4.watch 監(jiān)聽(tīng)器

import { reactive, watch } from 'vue';
// 偵聽(tīng)一個(gè) getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接偵聽(tīng)一個(gè) ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

5.watchEffect 監(jiān)聽(tīng)器的升級(jí)版本，立即執(zhí)行傳入的一個(gè)函數(shù)，并響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 打印出 0

setTimeout(() => {
  count.value++
  // -> 打印出 1
}, 100)

停止偵聽(tīng),當(dāng) watchEffect 在組件的 setup() 函數(shù)或生命周期鉤子被調(diào)用時(shí)， 偵聽(tīng)器會(huì)被鏈接到該組件的生命周期，并在組件卸載時(shí)自動(dòng)停止。

const stop = watchEffect(() => {
  /* ... */
})

// 之后
stop()

6.reactive 接收一個(gè)普通對(duì)象然后返回該普通對(duì)象的響應(yīng)式代理。等同于 2.x 的 Vue.observable(),注意在源碼中明確顯示需要傳遞一個(gè)對(duì)象，否則會(huì)拋出異常，如果想要對(duì)一個(gè)單獨(dú)的變量使用響應(yīng)式，可以使用ref下邊介紹

const obj = reactive({ count: 0 }) // 返回的就是響應(yīng)式對(duì)象
// 使用
obj.count ++
console.log(obj.count) // 輸出的是1

如果想要在組件內(nèi)使用這個(gè)變量需要在setup中返回

第一種返回形式

<template>
    <!-- 這種形式在組件內(nèi)使用的時(shí)候需要obj.count -->
    <p>{{ obj.count }}</p> 
</template>

import { reactive } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { obj } // 這種形式在組件內(nèi)使用的時(shí)候需要obj.count
    }
})

第二種返回形式

<template>
    <!-- 這種形式在組件內(nèi)使用的時(shí)候跟之前一樣 -->
    <p>{{ count }}</p> 
</template>

import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})

7.toRefs 把一個(gè)響應(yīng)式對(duì)象轉(zhuǎn)換成普通對(duì)象，該普通對(duì)象的每個(gè) property 都是一個(gè) ref ，和響應(yīng)式對(duì)象 property 一一對(duì)應(yīng)。

上邊的例子為什么要用toRefs包裹起來(lái)呢，因?yàn)槭沁@樣的, reactive,實(shí)際上是使用的proxy代理了整個(gè)對(duì)象，返回的是整個(gè)對(duì)象都是響應(yīng)式，但是如果這個(gè)對(duì)象里邊的層級(jí)很多怎么辦，對(duì)象中還有對(duì)象，那么里邊的對(duì)象就不是一個(gè)響應(yīng)式了，所以就用toRefs包裹一下，這樣相當(dāng)于是整個(gè)對(duì)象里邊的屬性，在源碼內(nèi)部已經(jīng)做了一次遞歸，把所有的屬性都做了判斷，如果是引用類型就會(huì)使用proxy再次代理一次，所以整個(gè)對(duì)象的屬性都是響應(yīng)式的，也就是下邊這樣的寫法；

import { reactive, toRefs } from 'vue';

export default defineComponent({
    setup () {
        const obj = reactive({ count: 0 })
        return { ...toRefs(obj) }
    }
})

8.ref 接受一個(gè)參數(shù)值并返回一個(gè)響應(yīng)式且可改變的 ref 對(duì)象。ref 對(duì)象擁有一個(gè)指向內(nèi)部值的單一屬性 .value。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

9.toRef 可以用來(lái)為一個(gè) reactive 對(duì)象的屬性創(chuàng)建一個(gè) ref。這個(gè) ref 可以被傳遞并且能夠保持響應(yīng)性。

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

10.nextTick 跟之前的作用一樣只不過(guò)呢寫法略有不同，想要詳細(xì)了解的話可以看這里vue nextTick 異步更新機(jī)制

import { nextTick } from 'vue';

export default defineComponent({
    setup () {
        nextTick(() => {
            console.log('--- DOM更新了 ---')
        })
    }
})

關(guān)于composition API的介紹就先介紹到這里了，感興趣的同學(xué)可以看這里:
composition API
Vue 組合式 API 心智負(fù)擔(dān)
ps: 有興趣的同學(xué)，想要用一下但是不清楚具體怎么使用我寫了一個(gè)簡(jiǎn)單地demo可以幫助大家熟悉一下vue3 demo