使用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...