創(chuàng)建項目
首先更新vue-cli到最新版本隧出。
npm install-g@vue/cli# OR yarn global add @vue/clivue create hello-vue3# select vue 3 preset
項目變化
vue2.x和vue3.x目錄結(jié)構(gòu)沒有什么變化譬正，只是一些使用方法變了福侈，而且默認(rèn)是安裝了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)榱?b>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)帝雇，你頁面需要哪些方法，就要在當(dāng)前頁引入即可蛉拙。
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上下文屬性，你可以通過這個屬性去獲取進(jìn)行 一些 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(){constcount=ref(0)count.value++//必須要加.valuereturn{count//一定要return 出去}}
reactive聲明響應(yīng)式數(shù)據(jù)對象
<template>? <div>{{count.name}}</div>? ? ? ? ? ? // 857</template>import{reactive}from"vue"setup(){constcount=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)式的值，當(dā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.router路由跳轉(zhuǎn)提揍，
this.route獲取當(dāng)前頁面路由信息啤月。
// 路由跳轉(zhuǎn)import{useRouter}from"vue-router";setup(){constrouter=useRouter()router.push('/path')}// 獲取當(dāng)前頁面路由信息import{useRoute}from"vue-router";setup(){constroute=useRoute()console.log(route)//這里的route相當(dāng)于vue2.x中的this.$route}
鏈接來自于：http://www.reibang.com/p/4e7ba9e93402
