Computed，Watch 以及 Methods 区别

• Computed 有缓存，当依赖数据变化时（这个数据必须是响应式的），才触发，主要用于过滤或判断等场景；
• Watch 当观察数据变化时（这个数据必须是响应式的），才触发，主要用于观察数据变化后做出相应的操作；
• Methods 就是普通的方法，每次都能执行；

props，method，data，computed，watch 初始化顺序

export function initState(vm: Component) {
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)

  // Composition API
  initSetup(vm)

  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    const ob = observe((vm._data = {}))
    ob && ob.vmCount++
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

props -> method -> data -> computed -> watch

slot 是什么？有什么作用？原理是什么？

slot 又名插槽，是 Vue 的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。

• 默认插槽：又名匿名插槽，当 slot 没有指定 name 属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
• 具名插槽：带有具体名字的插槽，也就是带有 name 属性的 slot，一个组件可以出现多个具名插槽。
• 作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理：当子组件 vm 实例化时，获取到父组件传入的 slot 标签的内容，存放在 vm.$slot中，默认插槽为vm.$slot.default，具名插槽为 vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot 中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

v-if、v-show、v-html 的原理

• v-if 会调用 addIfCondition 方法，生成 vnode 的时候会忽略对应节点，render 的时候就不会渲染；
• v-show 会生成 vnode，render 的时候也会渲染成真实节点，只是在 render 过程中会在节点的属性中修改 show 属性值，也就是常说的 display；
• v-html 会先移除节点下的所有节点，调用 html 方法，通过 addProp 添加 innerHTML 属性，归根结底还是设置 innerHTML 为 v-html 的值。

v-model 是如何实现的，语法糖实际是什么？

父 -> 子：props，一般是 value 子 -> 父：emit，一般是 input

data 为什么是一个函数而不是对象

如果 data 是一个对象，对象是一个引用值，会影响所有的组件实例。

VNode 钩子

• onVnodeBeforeMount
• onVnodeMounted
• onVnodeBeforeUpdate
• onVnodeUpdated
• onVnodeBeforeUnmount
• onVnodeUnmounted

0