日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Vue2.x與Vue3.x語(yǔ)法對(duì)比淺析

Vue3.0推出已有一段時(shí)間了，各位小伙伴們都有安排上學(xué)習(xí)沒，想要技術(shù)進(jìn)階的同學(xué)趕緊學(xué)習(xí)起來吧。

如果你對(duì)vue3不是特別了解，或者打算去學(xué)習(xí)，可以看看下面的分享，希望對(duì)大家有所幫助!

創(chuàng)建項(xiàng)目

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

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

項(xiàng)目變化

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

main.js

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

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

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

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

vuex狀態(tài)管理

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

Composition API

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

生命周期

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

在項(xiàng)目中具體的使用方法。

使用介紹

setup

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

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

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

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2. import {ref} from "vue"
    3. 
  
  
  
  3. 
  
  
  
  4. setup(){
    5. 
  
  
  
  5.    const count =ref(0)
    6. 
  
  
  
  6.    count.value++    //必須要加.value
    7. 
  
  
  
  7.    return{
    8. 
  
  
  
  8.        count        //一定要return 出去
    9. 
  
  
  
  9.    }
    10. 
  
  
  
  10. }
    11.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2. import {reactive} from "vue"
    3. 
  
  
  
  3. 
  
  
  
  4. setup(){
    5. 
  
  
  
  5.    const count =reactive({
    6. 
  
  
  
  6.       name:'369'
    7. 
  
  
  
  7.    })
    8. 
  
  
  
  8.    count.name='857'
    9. 
  
  
  
  9.    return{
    10. 
  
  
  
  10.       count 
    11. 
  
  
  
  11.    }
    12. 
  
  
  
  12. }
    13.
  • computed 計(jì)算屬性

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

  • watchEffect 監(jiān)聽

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

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

  • router 路由

vue3.x的router和route屬性也有了很大的變化，在vue2.x中使用this.$router路由跳轉(zhuǎn)，this.$route獲取當(dāng)前頁(yè)面路由信息。

 
 
 
    
  
  
  
  1. // 路由跳轉(zhuǎn)
    2. 
  
  
  
  2. import { useRouter} from "vue-router"; 
    3. 
  
  
  
  3. setup(){
    4. 
  
  
  
  4.   const router=useRouter()
    5. 
  
  
  
  5.   router.push('/path')
    6. 
  
  
  
  6. }
    7. 
  
  
  
  7. 
  
  
  
  8. // 獲取當(dāng)前頁(yè)面路由信息
    9. 
  
  
  
  9. import { useRoute} from "vue-router"; 
    10. 
  
  
  
  10. setup(){
    11. 
  
  
  
  11.   const route=useRoute()
    12. 
  
  
  
  12.   console.log(route) //這里的route相當(dāng)于vue2.x中的this.$route
    13. 
  
  
  
  13. }
    14.

好了，就先分析到這么多，后續(xù)也會(huì)陸續(xù)分享一些新變化。歡迎一起交流討論!


本文標(biāo)題：Vue2.x與Vue3.x語(yǔ)法對(duì)比淺析
網(wǎng)站URL：http://www.dlmjj.cn/article/cccppjj.html