VUE源码解析——全局 API 篇，学习Vue中所有全局API的实现原理

学习Vue中所有全局API的实现原理

总结

一、实例属性

1.组件树访问

1. $parent 用来访问当前组件实例的父实例
2. $root 用来访问当前组件树的根实例，如果当前组件没有父实例，$root表示当前组件实例本身
3. $children 用来访问当前组件实例的直接组件实例
4. $refs 用来访问使用了v-ref指令的子组件。

2.DOM访问

1. $el 用来访问挂载当前组件实例的DOM元素。
2. $els 用来访问$el元素中使用了v-el指令的DOM元素

3.数据访问

1. $data 用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性
2. $options 用来访问组件实例化时的初始化选项对象

二、实例方法

1.实例DOM方法的使用

• $appendTo() 它用来将el所指的DOM元素或片段插入到目标元素中。该方法接受两个参数：

  • elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
  • callback（可选，函数），回调函数，该回调函数会在el元素被插入到目标元素后触发。

• $before() 它用来将el所指的DOM元素或片段插入到目标元素之前。该方法接受两个参数：

  • elementOrSelector（字符串或DOM元素），该参数可以是一个选择器字符串或者DOM元素。
  • callback（可选，函数），回调函数

• $after() 它是用来将el所指的DOM元素或片段插入到目标元素之后。该方法接受两个参数，同上

• $remove() 它是用来将el所指的DOM元素或片段从DOM中删除。该方法接受一个参数

  • callbak（可选参数）同上

• $nextTick（） 它是用来在下次DOM更新循环后执行指定的回调函数，使用该方法可以保证DOM中的内容已经与最新数据保持同步。该方法接受一个参数：

  • callback（可选，函数），回调函数，该回调函数会在下次DOM更新循环后被执行。它和全局的Vue.nextTick方法一样，不同的是，callback中的this会自动绑定到调用它的Vue实例上。

2.实例Event方法的使用

• $on() 该方法用来监听实例上的自定义事件。该方法接受两个参数：

  • event（字符串），该参数可以是一个事件名称
  • callback（函数），回调函数，该回调函数会在执行$emit、$broadcast或者$dispatch后触发

• $once() 该方法也是用来监听实例上的自定义事件，但只触发一次。该方法接受两个参数 。同$on

• $emit() 该方法用来触发事件。接受两个参数

  • event（字符串），该参数可以是一个事件名称
  • args（可选），传递给监听函数的参数

• $dispatch() 该方法用来派发事件，即先在当前实例触发，再沿着父链一层一层向上，如果对应的监听函数返回false就停止。该方法接受两个参数：同$emit()

• $broadcast() 该方法用来广播事件，即遍历当前实例的$children，如果对应的监听函数返回false就停止。该方法接受两个参数：同$emit()

• $off() 该方法用来删除事件监听器。该方法接受两个参数：同$on()

3.Vue实例方法

一.$mount方法

$mount方法是用来挂载我们的扩展的.

二.$destroy销毁方法

销毁实例触发

三.$forceUpdate方法

强制更新
写法跟$destroy类似

四.$nextTick方法

修改数据时，dom渲染完成后促发

总结

good night