zhangdi

Vue ​

文章 ​

Vue3 ​

Vue2 ​

面试题总结 ​

其他 ​

响应式 ​

Vue2 - Object.defineProperty ​

Vue3 - Proxy ​

createApp（Vue3） ​

过程 ​

js
// runtime-dom/src/index.ts
import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp'
const rendererOptions = /*@__PURE__*/ extend({ patchProp }, nodeOps)
function ensureRenderer() {
  return (
    renderer ||
    (renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
  )
}

export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)

  if (__DEV__) {
    injectNativeTagCheck(app)
    injectCompilerOptionsCheck(app)
  }

  const { mount } = app
  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    // ...
  }
  return app
})

// runtime-core/src/renderer.ts
export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement,
>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement> {
  return baseCreateRenderer<HostNode, HostElement>(options)
}

function baseCreateRenderer(...){
  const path...
  const processText...
  const processCommentNode...
  const mountStaticNode...
  const patchStaticNode...
  const moveStaticNode...
  const removeStaticNode...
  const processElement...
  const mountElement...
  const setScopeId...
  const mountChildren...
  const patchElement...
  const patchBlockChildren...
  const patchProps...
  const processFragment...
  const processComponent...
  const mountComponent...
  const updateComponent...
  const setupRenderEffect...
  const updateComponentPreRender...
  const patchChildren...
  const patchUnkeyedChildren...
  const patchKeyedChildren...
  const move...
  const unmount...
  const remove...
  const removeFragment...
  const unmountComponent...
  const getNextHostNode...
  const render...


  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate),
  }
}

// runtime-core/src/apiCreateApp.ts
export function createAppAPI<HostElement>(
  render: RootRenderFunction<HostElement>,
  hydrate?: RootHydrateFunction,
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {
    // ...
    const context = createAppContext()
    const installedPlugins = new WeakSet()
    const pluginCleanupFns: Array<() => any> = []

    let isMounted = false

    const app: App = (context.app = {
      get...
      set...
      use...
      mixin...
      component...
      directive...
      mount...
      onUmount...
      unmount...
      provide...
      runWithContext...
    })

    return app
  }
}

生命周期 ​

加载渲染过程 ​

父先创建，才能有子；子创建完成，父才完整。
顺序：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程 ​

子组件更新 影响到 父组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

子组件更新 不影响到 父组件的情况。
顺序：子 beforeUpdate -> 子 updated

父组件更新过程 ​

父组件更新 影响到 子组件的情况。
顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新 不影响到 子组件的情况。
顺序：父 beforeUpdate -> 父 updated

销毁过程 ​

顺序：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

模版编译 ​

VDOM & Diff ​

Vue2 ​

key ​

$nextTick ​

组件通信 ​

slot ​

keep-alive ​

自定义指令 ​

权限控制 ​

其他知识点 ​

css scoped ​

  • 每个组件都会拥有一个[data-v-hash:8]插入HTML标签，子组件标签上也具体父组件[data-v-hash:8];
  • 如果style标签加了scoped属性，里面的选择器都会变成(Attribute Selector) [data-v-hash:8];

v-for v-if ​

  • 在 Vue2 当中，v-for的优先级更高，而在 Vue3 当中，则是v-if的优先级更高。

computed ​

Vuex ​