框架-Vue 2.*的补充

全局配置

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

ignoredElements

keyCodes

performance

productionTip

————————————————————————————————————————————————————————

全局 API

Vue.extend

• 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
  - 注释：这句话是一个误导，创建的 VueComponent 构造函数根本不是 Vue 构造函数的子类。甚至他们创建的实例都没有任何继承关系，只是实现了相同的属性和方法而已。
• 注释：组件实例和vue实例之间的关系：
  - vue 构造函数和 vueComponent 构造函数没有继承关系，他们是平级的
  - classComponent 中的组件 extends 是真实的原型链继承，继承于 Vue，并不是组件混入
  - 组件实例和 vue 实例都继承于同一个 vue 原型，该原型继承于 object 原型

Vue.nextTick

Vue.set

Vue.delete

Vue.directive

Vue.filter

Vue.component

Vue.use

Vue.mixin

Vue.compile

Vue.observable

Vue.version

————————————————————————————————————————————————————————

选项 / 数据

data

props

propsData

computed

methods

watch

————————————————————————————————————————————————————————

选项 / DOM

el

template

render

• 该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
• 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
• Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
• 注释：函数式组件在重新构建时会导致父组件也重新构建

renderError

————————————————————————————————————————————————————————

选项 / 生命周期钩子

beforeCreate

• 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• 注释：实例已经存在

created

• 注释：该生命周期后执行 render 函数，能够读取到为被 Object.defineProperty 处理过的 data

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

————————————————————————————————————————————————————————

选项 / 资源

directives

filters

components

————————————————————————————————————————————————————————

选项 / 组合

parent

• 指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

mixins

extends

provide / inject

————————————————————————————————————————————————————————

选项 / 其它

name

delimiters

functional

model

inheritAttrs

comments

————————————————————————————————————————————————————————

实例 property

vm.$data

vm.$props

vm.$el

• 只读
• 注释：vm.$el指向的这个 dom 会写入一个名为 __vue__ 的属性，该属性指向当前实例

vm.$options

vm.$parent

• 只读

vm.$root

vm.$children

• 只读
• 当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

vm.$slots

vm.$scopedSlots

• 注释：在 mounted 中才能够访问插槽内容，created 中不能够

vm.$refs

vm.$isServer

vm.$attrs

vm.$listeners

————————————————————————————————————————————————————————

实例方法 / 数据

vm.$watch

vm.$set

vm.$delete

————————————————————————————————————————————————————————

实例方法 / 事件

vm.$on

vm.$once

vm.$off

vm.$emit

————————————————————————————————————————————————————————

实例方法 / 生命周期

vm.$mount

• 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
  - 注释：未挂载的实例， $el 为 undefined。挂载之后 $el 指向 new Vue 中 render 函数返回的 dom 节点;

vm.$forceUpdate

vm.$nextTick

vm.$destroy

————————————————————————————————————————————————————————

指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

• 略
• 注释：可以绑定一个函数数组，原生和组件都支持。不过 TS 3.9.2 原生绑定数组会报错

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

————————————————————————————————————————————————————————

特殊 attribute

key

ref

is

slot

slot-scope

scope

————————————————————————————————————————————————————————

内置的组件

component

transition

transition-group

keep-alive

slot

————————————————————————————————————————————————————————

VNode 接口

• VNode
  - 注释：VNode 被渲染前，可以直接修改它的属性。例如：添加 children、class 等。但是当渲染后，除非替换整个 VNode 对象，否则改元素不会重新渲染。
• context 当前实例的上下文，是一个 vueComponent 实例。
  - 注释：slot 插槽通过判断是否相同上下文来获取。例如：组件 A 中需要 slot 组件 B，这时候组件 B 实例和组件 A 实例的 context 是相同的。可以通过修改该值实现 slot 的透传
• children
  - 注释：在渲染结束之后替换当前 VNode 并修改其 children，VNode 被重新渲染但是 children 中被替换的子 VNode 并不会被重新渲染。因为这里的 children 只是标明 VNode树之间的关系，这些子组件的重新渲染触发依赖于 children 内对应组件实例 render 函数的触发。
• elm: Node | void;
  - 注释：当前 Vnode 渲染生成的 node 对象

————————————————————————————————————————————————————————

服务端渲染