vue3 0新特性記錄表(只記錄常用的)

2021-10-23 14:04:22 字數 1239 閱讀 7531

使用composition api (組合式api) 來呼叫內部方法,元件。 例如:

import  from 'vue'
defindcomponent: 定義元件

defindasynccomponent() 方法: 定義非同步元件方法

teleport : 傳送

getcurrentinstance() : 獲取當前元件例項  (用在setup()方法中最為有效) 然後通過let = getcurrentinstance()   上下文來獲取

ref、reactive響應式物件:兩者大同小異,ref用於單個定義,reactive用於物件式定義

修改的內容:

1、setup()方法 : 生命週期執行在beforecreate 和create 的時候就已經呼叫。

setup有兩個引數,第乙個props,接收的是props物件傳過來的值。第二個ctx 上下文跟getcurrentinstance裡面的ctx 不同,它是選擇性地暴露了一些property,主要有[attrs,emit,slots]。

在setup中定義響應式變數,用ref : const a = ref('這是值,可以是數值也可以是字串')  。 reactive:const b = reactive()。 注意後面要return  {}  返回需要返回的值。

2、teleport(傳送) 元件  : 屬性為to="test" , 然後平級元件內容中使用 id="test" 來顯示 。  主要用來解決有些元件層級問題  

3、用render來自定義模板發生了少許改變h()  需要通過import 引進來才可用 例子:

import  form 'vue'   

export default defindcomponet(  

})

5、在vue2x  傳統的按需載入是直接  i : ()=> import('') 而新的方法是需要引入defindasynccomponent() 來進行使用  

簡易方法:  i: defineasynccomponent(()=> import('')) 。

帶選項的方法: 

const asyncfoowithoptions = defineasynccomponent()

移除的api:

1、 移除$on、$emit 、$once、$off 方法,取而代之引入mitt方案 。

例子:import mitt from 'mitt'    

Vue3 0學習記錄

composition api 組合api 效能提公升 viteoptions api composition api 響應式系統公升級 vue.js 3.0中使用proxy物件重寫響應式系統 proxy物件效能本身就比 defineproperty好 物件可以攔截物件的賦值 刪除等,不需要初始化遍...

Vue 3 0 學習記錄 搭建

使用vue cli的vue create 或者vue ui搭建專案 搭建專案時,需要新增vue router 以及uvex等常用模組 因為當前3.0vue專案是由vue2.0專案公升級來的,所以需要加建立專案時增加所需的模組,在將專案公升級為3.0專案是會自動修改,可以避免寫初始化 vue add ...

vue3 0學習記錄 2

vue3 與 vue2區別 寫法上已經有很大的區別了,如 vue2 h1 h1 click test 點讚 1button div template lang ts import from vue export default definecomponent methods script 而vue3...