Vue2-实例方法

75 阅读2分钟

1.vm.$watch有什么作用?

作用类似于watch,也就是侦听器Watcher。它的内部原理如下:

1.先将用户传进来的cb做个判断,如果是对象那么就将回调函数和选项解构出来,在调用vm.$watch方法传递进去

2.之后将cb和选项传入,创建一个新的Watcher

3.如果选项有immediate,那么就立即执行回调函数

4.之后返回一个函数,用于停止触发回调

(原理:创建watcher实例的时候会读取被观察的数据,读取了数据就表示依赖了数据,所以watcher实例就会存在于数据的依赖列表中,同时watcher实例也记录了自己依赖了哪些数据,每个数据都有一个自己的依赖管理器depwatcher实例记录自己依赖了哪些数据其实就是把这些数据的依赖管理器dep存放在watcher实例的this.deps = []属性中,当取消观察时即watcher实例不想依赖这些数据了,那么就遍历自己记录的这些数据的依赖管理器,告诉这些数据可以从你们的依赖列表中把我删除了。)

5.深度观察(其实就是给每一个属性都进行了跟踪)

2.vm.$on有什么作用?

注册实例上的自定义事件,提供回调函数

3.vm.$emit有什么作用?

触发实例上的自定义事件里面的回调函数

4.vm.$off有什么作用?

移除自定义事件监听器

5.vm.$once有什么作用?

监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。

6.vm._update有什么作用?

负责更新页面,页面首次渲染和后续更新的入口位置,也是 vm.patch的入口位置

7.vm.$forceUpdate有什么作用?

直接调用 watcher.update 方法,迫使组件重新渲染。

它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

8.vm.$destroy有什么作用?

完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

步骤:

1.判断实例是否销毁

2.调用beforeDestroy钩子

3.从父组件上面移除

4.移除监听的依赖

5.调用patch方法 销毁节点

6.调用destroyed钩子

7.关闭实例的所有事件监听

9.vm._render有什么作用?

通过执行 render 函数生成 VNode