快速上手vue3 0

安裝最新vue腳手架

npm i @vue/cli -g

通過腳手架建立專案，並選擇3.0

vue create vue-next

執行專案

npm run serve

vue2.0採用的叫做選項式api：

例如我們想實現某乙個功能，關於這個功能的資料我們會定義在data中，事件函式定義在methods中，計算屬性定義在computed中…,

實際上我們想實現乙個功能會把我們**拆分寫到不同的模組中，這樣我們很難區分，哪個資料和哪個邏輯是一一對應的，而且想實現這個功能也要在data、methods、computed中跳來跳去。

vue3.0的組合式（composition-api）api：

我們會把同一功能的邏輯寫在一起，寫到乙個函式中

setup是composition-api的入口函式

在宣告週期beforecreate事件之前被呼叫；

可以返回乙個物件，這個物件的屬性被合併到渲染上下文，並可以在模板中直接使用；

直接返回的不是乙個響應式資料

setup()

}

>

>
}@click
="msg++"
>
修改資料button
>
div>
template
>

接收props物件作為第乙個引數，接收來的props物件，可以通過watcheffect監視其變化。

接受context物件作為第二個引數，這個物件包含attrs，slots，emit三個屬性。

reactive

引入reactive

import

from
'vue'

setup()

)return state
}

引入ref

import

from
'vue'

setup()

}

setup()

)const msg =
ref(
'hello vue3.0'
)return
}

定義方法

setup()

)const msg =
ref(
'hello vue3.0'
)// 定義addnum
const
addnum=(
)=>
return
}

import

from
'vue'

setup()

)const msg =
ref(
'hello vue3.0'
)const
addnum=(
)=>
return
}

const

addnum=(
)=>

直接在setup內部定義

setup()

)return
}

const state =

reactive()
})

watch((

)=> state.num,
(newvalue, oldvalue)
=>
)

import

from
'vue'

setup()

)onupdated((
)=>
)onunmounted((
)=>
)}

依賴注入並不是vue3.0新增的特性，2.0就開始支援，只不過使用方式有所區別

引入provide進行提供資料

import

from
'vue'

setup()

)provide
('num'
, state.msg)
}

import

from
'vue'
export
default
}

import

from
'vue-router'
const routes =
const router =
createrouter()
export
default router

createwebhistory：用來使用history模式的路由

createwebhashhistory：用來使用hash模式的路由

userouter

使用userouter進行程式設計式導航

import

from
'vue-router'
setup()
}

通過useroute獲取當前路由資訊,path、query、params

import

from
'vue-router'
setup()

Vue3 0系列（Vue3 0是如何變快的 ）

來說一說為什麼performance 效能比vue 2.x快1.2 2倍 這裡先提供兩個 2.1 diff演算法優化 例子 我是段落 也就是說，vue3在渲染的時候，給會改變的元素新增了靜態標記 import from vue export function render ctx,cache,pro...

Vue3 0學習記錄

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

vue3 0前端學習

1 響應系統公升級 vue.js 3.0 中使用proxy物件重寫響應式系統 可以監聽動態新增的屬性 可以監聽刪除的屬性 可以監聽陣列的索引和length屬性 2 編譯優化 vue.js 2.x 中，模板首先被編譯為render函式，構建過程中完成，會編譯靜態根節點和靜態子節點，當元件狀態發生變化時...