1.vue3復(fù)習(xí)
1.性能的提升
? 打包大小減少41%
? 初次渲染快55%, 更新渲染快133%
? 內(nèi)存減少54%
2.源碼的升級(jí)
? 使用Proxy代替defineProperty實(shí)現(xiàn)響應(yīng)式
? 重寫(xiě)虛擬DOM的實(shí)現(xiàn)和Tree-Shaking
3.擁抱TypeScript
Vue3可以更好的支持TypeScript
4.新的特性
1.? Composition API（組合API）
? setup配置
? ? ■ 返回值
? ? ? 1. 若返回一個(gè)對(duì)象，則對(duì)象中的屬性、方法, 在模板中均可以直接使用。（重點(diǎn)關(guān)注?。?/p>
? ? ? 2. 若返回一個(gè)渲染函數(shù)：則可以自定義渲染內(nèi)容。（了解）
? ref與reactive
? watch與watchEffect
? provide與inject
2.? 新的內(nèi)置組件
? Fragment
? Teleport
? Suspense
3.? 其他改變
? 新的生命周期鉤子
? data 選項(xiàng)應(yīng)始終被聲明為一個(gè)函數(shù)
? 移除keyCode支持作為 v-on 的修飾符
2.虛擬dom的創(chuàng)建
https://juejin.cn/post/6844903895467032589#heading-9
在 Vue.js 中，Virtual DOM 是用 VNode 這個(gè) Class 去描述
VNode的屬性：
tag 屬性即這個(gè)vnode的標(biāo)簽屬性
data 屬性包含了最后渲染成真實(shí)dom節(jié)點(diǎn)后，節(jié)點(diǎn)上的class，attribute，style以及綁定的事件
children 屬性是vnode的子節(jié)點(diǎn)
text 屬性是文本屬性
elm 屬性為這個(gè)vnode對(duì)應(yīng)的真實(shí)dom節(jié)點(diǎn)
key 屬性是vnode的標(biāo)記，在diff過(guò)程中可以提高diff的效率
創(chuàng)建VNode的過(guò)程
初始化vue
new Vue( ) 時(shí)，實(shí)際上是執(zhí)行 src/core/instance/index.js? 中定義的函數(shù)
function Vue (options) {
? if (process.env.NODE_ENV !== 'production' &&
? ? !(this instanceof Vue)
? ) {
? ? warn('Vue is a constructor and should be called with the `new` keyword')
? }
? this._init(options)
}
? Vue.prototype._init = function (options?: Object) {
? ? const vm: Component = this
? ? ?
? ? // 省略一系列其它初始化的代碼
? ? ?
? ? if (vm.$options.el) {
? ? ? console.log('vm.$options.el:',vm.$options.el);
? ? ? vm.$mount(vm.$options.el)
? ? }
? }
Vue實(shí)例掛載
$mount 方法實(shí)際上會(huì)去調(diào)用 mountComponent 方法
export function mountComponent (
? vm: Component,
? el: ?Element,
? hydrating?: boolean
): Component {
? vm.$el = el
? // 省略一系列其它代碼
? let updateComponent
? /* istanbul ignore if */
? if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
? ? updateComponent = () => {
? ? ? // 生成虛擬 vnode?
? ? ? const vnode = vm._render()
? ? ? // 更新 DOM
? ? ? vm._update(vnode, hydrating)
? ?
? ? }
? } else {
? ? updateComponent = () => {
? ? ? vm._update(vm._render(), hydrating)
? ? }
? }
? // 實(shí)例化一個(gè)渲染W(wǎng)atcher，在它的回調(diào)函數(shù)中會(huì)調(diào)用 updateComponent 方法?
? new Watcher(vm, updateComponent, noop, {
? ? before () {
? ? ? if (vm._isMounted && !vm._isDestroyed) {
? ? ? ? callHook(vm, 'beforeUpdate')
? ? ? }
? ? }
? }, true /* isRenderWatcher */)
? hydrating = false
? return vm
}
mountComponent 核心就是先實(shí)例化一個(gè)渲染W(wǎng)atcher，在它的回調(diào)函數(shù)中會(huì)調(diào)用 updateComponent 方法，在此方法中調(diào)用 vm._render 方法先生成虛擬 Node，最終調(diào)用 vm._update 更新 DOM。
