Vue 3 遷移策略筆記 第13節 函式式元件

知識儲備

​ 函式式元件是一種比較簡單，沒有管理任何狀態，也沒有監聽任何傳遞給它的狀態，也沒有生命週期方法的元件（與之相反的是有stateful components狀態元件）。實際上，它只是乙個接受一些 prop 的函式。在這樣的場景下，我們可以將元件標記為functional，這意味它無狀態 (沒有響應式資料)，也沒有例項 (沒有this上下文)。乙個函式式元件就像這樣：

vue.

component
('my-component',,
// 為了彌補缺少的例項
// 提供第二個引數作為上下文
render:
function
(createelement, context)
})

在 vue 2.x 中，函式式元件主要有兩個特點：

然而，在 vue 3.x 中，有狀態元件的效能已經得到提公升，與函式式元件的相差無幾了。此外，現在有狀態元件同樣可以返回多個根節點的。因此，函式式元件僅剩的特點就只有比較簡單。例如，用於建立動態標題元件。所以，vue3.x 建議更多的去使用有狀態元件。

以建立動態標題元件為例：

函式寫法

export

default)`
, data, children)
}}

functional

>
:is=
"`h$`"
v-bind
="attrs"
v-on
="listeners"
/>
template
>
>
export
default
script
>

相較於 vue 2.x 有三點變化：

h函式需要全域性匯入

import

from
'vue'
const
dynamicheading
=(props, context)
=>
`, context.attrs, context.slots)
}dynamicheading.props =
['level'
]export
default dynamicheading

相較於 vue 2.x 有兩點變化：

>

v-bind:is
="`h$`"
v-bind
="$attrs"
/>
template
>
>
export
default
script
>

Vue 3 遷移策略筆記 第18節 按鍵修飾符

知識儲備 在 vue 2.x 中，允許使用 keycodes 作為v on的修飾符 v on keyup.13 submit v on keyup.enter submit 上面兩種寫法，在 vue 2.x 是等價的。另外，我們還可以通過全域性的config.keycodes選項來自定義 alias...

vue3學習筆記

vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶，雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層，可使用inheritattrs false 取消預設，在需要繼承的屬性的標籤使用v...

Vue3 學習筆記之 watchEffect

最近在看 vue3 的一些新 feature，順道學習了一些 hooks 程式設計的思想，感覺挺有啟發的。今天就以 watcheffect 這個很小的 case 為例，開啟我的 vue3 學習筆記。對所有初學者來說，vue2 到 vue3 最直觀的改變就是 composition api 幾乎所有的...