本篇內(nèi)容主要講解“Vue3.0新特性怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3.0新特性怎么使用”吧!

創(chuàng)新互聯(lián)公司專注于清河企業(yè)網(wǎng)站建設(shè),成都響應式網(wǎng)站建設(shè)公司,商城建設(shè)。清河網(wǎng)站建設(shè)公司,為清河等地區(qū)提供建站服務。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

1、Vue3帶來的新變化

1. 性能提升（零成本：從vue2切到vue3就享受到）

   首次渲染更快，diff算法更快，內(nèi)存占用更少，打包體積更小，....

2. 更好的Typescript支持（在vue下寫TS更方便了）

3. 提供新的寫代碼的方式：Composition API

2、這些Vue2.0的語法不能用了

vue3.0對于2.0版本的大部分語法都是可以兼容的（之前是怎么寫的，現(xiàn)在也正常寫），但是也有一些破壞性的語法更新，這個要格外注意:

1、移除了vue實例上的$on方法 （eventBusVue.prototype.$eventBus=new Vue(); this.$on('事件名'， 回調(diào))現(xiàn)有實現(xiàn)模式不再支持，可以使用三方插件替代）。下邊是vue2中eventBus的用法:

Vue.prototype.$eventBus = new Vue()
組件1
this.$on('事件名', 回調(diào))
組件2
this.$emit('事件名')

2、移除過濾器選項 。下邊是vue2中過濾器的用法：

{{ msg | format}}
插值表達式里, 不能再使用過濾器filter， 可以使用methods替代
{{format(msg)}}

3、移除 .sync語法（v-bind時不能使用.sync修飾符了，現(xiàn)在它v-model語法合并了）。下面是vue2中.sync的用法

3、vue2和3的項目區(qū)別

主要看三個位置：

1. package.json

2. main.js

3. app.vue

package.json

首先我們可以看一下package.json文件，在dependencies配置項中顯示，我們當前使用的版本為3

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.2.25"  // 版本號
}

main.js

然后打開main.js 入口文件，發(fā)現(xiàn)Vue的實例化發(fā)生了一些變化，由先前的new關(guān)鍵詞實例化，轉(zhuǎn)變?yōu)閏reateApp方法的調(diào)用形式 。

vue2.x中的寫法：

import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App)}).$mount('#app')

vue3.x的寫法：

import { createApp } from 'vue'
import App from './App.vue' // 根組件
createApp(App).mount('#app')

app.vue

打開app.vue發(fā)現(xiàn)：vue3.0的單文件組件中不再強制要求必須有唯一根元素

4、組合式API和選項式API

組合式api（Composition API）是vue3對我們開發(fā)者來說變化非常大的更新。

Vue2 選項式API，options API (如圖) ,  Vue3 組合式API, composition API (右圖)：

Vue2 選項式API，options API：

優(yōu)點：

理解容易，好上手。因為各個選項（配置項）都有固定的書寫位置（比如數(shù)據(jù)就寫到data選項中，操作方法就寫到methods中，等等）

缺點：

應用大了之后，相信大家都遇到過來回上下找代碼的困境-----橫跳。

Vue3 組合式API, composition API ：

特點：

• 特定功能相關(guān)的所有東西都放到一起維護，比如功能A相關(guān)的響應式數(shù)據(jù)，操作數(shù)據(jù)的方法等放到一起，這樣不管應用多大，都可以快速定位到某個功能的所有相關(guān)代碼，維護方便設(shè)置

• 如果功能復雜，代碼量大，我們還可以進行邏輯拆分處理。

總結(jié)：

組合式API的由來。由于vue3中提供了一個新的寫代碼的方式(老方式也是可以使用的)，為了區(qū)別vue2，給他們各自取了不同的名字：

Vue2選項式API(option api) 優(yōu)點：簡單，各選項各司其職；缺點：不方便功能復用；功能代碼分散維護代碼橫跳

Vue3組合式API(composition api) 優(yōu)點：功能代碼組合維護, 方便功能復用；

4、setup

1. setup 函數(shù)是一個新的組件選項，作為組件中組合式API 的起點（入口）

2. setup 中不能使用 this， this 指向 undefined

3. setup函數(shù)只會在組件初始化的時候執(zhí)行一次

4. setup函數(shù)在beforeCreate生命周期鉤子執(zhí)行之前執(zhí)行

setup() {
	console.log('setup....', this)
},
beforeCreate() {
	console.log('beforeCreate') // 它比setup遲
}

setup 參數(shù)：

使用setup 時，它接受兩個參數(shù)：

1. props: props為一個對象，內(nèi)部包含了父組件傳遞過來的所有prop數(shù)據(jù)

2. context: context對象包含了attrs，slots， emit屬性

返回值

這個函數(shù)的返回值是一個對象，在模版中需要使用的數(shù)據(jù)和函數(shù)，需要在這個對象中聲明（如果在data()中也定義了同名的數(shù)據(jù)，則以setup()中為準）。

setup 中接受的props是響應式的， 當傳入新的 props 時，會及時被更新。由于是響應式的， 所以不可以使用 ES6 解構(gòu)，解構(gòu)會消除它的響應式。 錯誤代碼示例， 這段代碼會讓 props 不再支持響應式：

export default com ({
    setup(props, context) {
        const { uname } = props
        console.log(uname)
    },
})

開發(fā)中我們想要使用解構(gòu)，還能保持props的響應式，有沒有辦法解決呢?setup接受的第二個參數(shù)context，我們前面說了setup中不能訪問 Vue2 中最常用的this對象，所以context中就提供了this中最常用的三個屬性:attrs、slot 和emit，分別對應 Vue2.x 中的 $attrs屬性、slot 插槽 和$emit發(fā)射事件。并且這幾個屬性都是自動同步最新的值，所以我們每次使用拿到的都是最新值。

5、reactive、ref 與 toRefs

在 vue2.x 中， 定義數(shù)據(jù)都是在data中， 但是 Vue3.x 可以使用 reactive 和 ref 來進行數(shù)據(jù)定義。

如何取舍ref和reactive？

定義響應式數(shù)據(jù)有兩種方式：

• ref函數(shù)(可以處理簡單數(shù)據(jù)，也可以處理復雜數(shù)據(jù))，常用于將簡單數(shù)據(jù)類型定義為響應式數(shù)據(jù)

• 在代碼中修改(或者獲取)值時，需要補上.value

• 在模板中使用時，可以省略.value

• reactive函數(shù)，常用于將復雜數(shù)據(jù)類型為響應式數(shù)據(jù)

推薦用法：

1. 優(yōu)先使用ref

2. 如果明確知道對象中有什么屬性，就使用reactive。例如，表單數(shù)據(jù)

接下來使用代碼展示一下 ref、reactive的使用：

上面的代碼中，我們綁定到頁面是通過user.uname,user.age這樣寫感覺很繁瑣，我們能不能直接將user中的屬性解構(gòu)出來使用呢? 答案是不能直接對user進行結(jié)構(gòu),這樣會消除它的響應式，這里就和上面我們說props不能使用 ES6 直接解構(gòu)就呼應上了。那我們就想使用解構(gòu)后的數(shù)據(jù)怎么辦，解決辦法就是使用toRefs,定義轉(zhuǎn)換響應式中所有屬性為響應式數(shù)據(jù)，通常用于解構(gòu)|展開reactive定義對象， 簡化我們在模板中的使用。

格式：

// 響應式數(shù)據(jù)：{ 屬性1, 屬性2 }
let { 屬性1, 屬性2 } = toRefs(響應式數(shù)據(jù))

具體使用方式如下：

增強版的結(jié)構(gòu)賦值：在解構(gòu)對象的同時，保留響應式的特點。

6、vue3.0生命周期鉤子函數(shù)

• setup創(chuàng)建實例前

• onBeforeMount掛載DOM前

• onMount掛載DOM后

• BeforeUpdate 更新組件前

• updated 更新組件后

• onBeforeUnmount卸載銷毀前

• onUnmount 卸載銷毀后

setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
  }

Vue3.x 還新增用于調(diào)試的鉤子函數(shù)onRenderTriggered和onRenderTricked,  另外，Vue3.x 中的鉤子是需要從 vue 中導入的：

import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,
onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked,onRenderTriggered } from "vue"; 
export default defineComponent({ 
//beforeCreate和created是vue2的 
beforeCreate() {
console.log("--beforeCreate--")
 }, 
created() {
console.log("--created--")
 }, 
setup() { 
console.log("--setup--")
// vue3.x生命周期寫在setup中 
onBeforeMount(() => {
console.log("--onBeforeMount--")
})
onMounted(() => {
console.log("--onMounted--"); })
 // 調(diào)試哪些數(shù)據(jù)發(fā)生了變化
onRenderTriggered((event) =>{ 
console.log("--onRenderTriggered--",event)
}) 
}, 
});

7、computed函數(shù)定義計算屬性

格式：

import { computed } from 'vue'

const 計算屬性名 = computed(() => {
  return 相關(guān)計算結(jié)果
})

代碼示例：

總結(jié)：

vue3中的computed函數(shù)與vue2中的computed選項功能類似。

computed的入?yún)⑹且粋€函數(shù)

作用：根據(jù)已有數(shù)據(jù)，產(chǎn)生新的響應式數(shù)據(jù)。

步驟：導入，定義，導出

computed的高級用法：

格式：

const 計算屬性 =  computed({
  get () {
    // 當獲取值自動調(diào)用
  },
  set (val) {
    // 當設(shè)置值自動調(diào)用，val會自動傳入
  }
})

示例代碼：

總結(jié)：

計算屬性兩種用法

1. 給computed傳入函數(shù)，返回值就是計算屬性的值

2. 給computed傳入對象，get獲取計算屬性的值，set監(jiān)聽計算屬性改變

3. 在v-model綁定計算屬性：

8、watch函數(shù)

基于響應式數(shù)據(jù)的變化執(zhí)行回調(diào)邏輯，和vue2中的watch的應用場景完全一致。

步驟：

1. 導入 import { watch } from 'vue'

2. 開啟監(jiān)聽。在setup函數(shù)中執(zhí)行watch函數(shù)開啟對響應式數(shù)據(jù)的監(jiān)聽

3. watch函數(shù)接收三個常規(guī)參數(shù)  watch(source, callback, [options])

1. 第一個參數(shù)有三種取值：

   對象，要監(jiān)聽的響應式數(shù)據(jù)

   數(shù)組，每個元素是響應式數(shù)據(jù)

   函數(shù)，返回你要監(jiān)聽變化的響應式數(shù)據(jù)

2. 第二個參數(shù)是：響應式數(shù)據(jù)變化之后要執(zhí)行的回調(diào)函數(shù)

3. 第三個參數(shù)是: 一個對象，在里面配置是否開啟立刻執(zhí)行或者深度監(jiān)聽

到此，相信大家對“Vue3.0新特性怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！