創(chuàng)建項目

首先更新vue-cli到最新版本。

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset

項目變化

vue2.x和vue3.x目錄結(jié)構(gòu)沒有什么變化，只是一些使用方法變了，而且默認是安裝了TypeScript。

vue2.x與vue3.x語法對比淺析

• main.js

vue2.x使用import Vue from 'vue'，然后使用new Vue()創(chuàng)建實例。vue3.x則是import {createApp} from 'vue'，通過createApp()來創(chuàng)建實例了。

這就導(dǎo)致了很多的插件或UI組件庫不能使用，比如ElementUI、iView...

vue2.x與vue3.x語法對比淺析

• router.js創(chuàng)建路由

vue3.x需要引入createRouter創(chuàng)建地址路由。createWebHashHistory對應(yīng)之前的hash，createWebHistory對應(yīng)之前的history。

vue2.x與vue3.x語法對比淺析

• vuex狀態(tài)管理

vue3.x中狀態(tài)管理的創(chuàng)建方式變?yōu)榱?strong>createStore 。代碼結(jié)構(gòu)更精簡合理。

vue2.x與vue3.x語法對比淺析

• Composition API

這個是vue3.x變化最大的地方，vue2.x數(shù)據(jù)存放在data，方法在methods，通過this去調(diào)用。但是在vue3.x這些都沒有了，所有的代碼全部都在 setup 里面實現(xiàn)，你頁面需要哪些方法，就要在當前頁引入即可。

vue2.x與vue3.x語法對比淺析

• 生命周期

vue3.x的生命周期也發(fā)生了一些變化，大家可以看下面這張圖。

vue2.x與vue3.x語法對比淺析

在項目中具體的使用方法。

vue2.x與vue3.x語法對比淺析

使用介紹

• setup

setup有兩個參數(shù) props 和 context

• props：接受父組件傳的值
• context：vue3.x里面沒有this，提供了一個context上下文屬性，你可以通過這個屬性去獲取進行 一些 vue2.x 用this實現(xiàn)的操作

vue2.x與vue3.x語法對比淺析

• ref 聲明基礎(chǔ)數(shù)據(jù)類型

創(chuàng)建一個響應(yīng)式的基礎(chǔ)類型，只能監(jiān)聽number、String、boolean等簡單的類型，該屬性一旦發(fā)生更改，都會被檢測到。

<template>
   <div>{{count}}</div>             // 1
</template>
import {ref} from "vue"

setup(){
   const count =ref(0)
   count.value++    //必須要加.value
   return{
       count        //一定要return 出去
   }
}

• reactive 聲明響應(yīng)式數(shù)據(jù)對象

<template>
   <div>{{count.name}}</div>             // 857
</template>
import {reactive} from "vue"

setup(){
   const count =reactive({
      name:'369'
   })
   count.name='857'
   return{
      count 
   }
}

• computed 計算屬性

computed 和vue2.x差不多，只是使用前要先引入。

vue2.x與vue3.x語法對比淺析

• watchEffect 監(jiān)聽

通過ref或者reactive去創(chuàng)建多個響應(yīng)式的值，當任何一個值發(fā)生改變的時候，立即觸發(fā)這個函數(shù)。

vue2.x與vue3.x語法對比淺析

watchEffect方法會返回一個stop handle停止監(jiān)聽。

vue2.x與vue3.x語法對比淺析

• router 路由

vue3.x的router和route屬性也有了很大的變化，在vue2.x中使用this.route獲取當前頁面路由信息。

// 路由跳轉(zhuǎn)
import { useRouter} from "vue-router"; 
setup(){
  const router=useRouter()
  router.push('/path')
}

// 獲取當前頁面路由信息
import { useRoute} from "vue-router"; 
setup(){
  const route=useRoute()
  console.log(route) //這里的route相當于vue2.x中的this.$route
}