vue2.0的new vue()

vue2.0中 new vue() 发生的事件:

1、new Vue().$mount

2、首先进行实例化通过 this.init() 函数,是在 vue 函数中执行

3、实例化的时候进行挂载,因为 vue(position) 中会接收参数,调用的是 vue 上 prototype 的方法 m o u n t ( ) , 最终返 v m . mount(), 最终返vm. mount(),最终返vm.mount(vm.$options.el)

4、在 vm.$mount 中的 $mount 是调用 vue 上最初的 mount() 方法 mount.call(this, el, hydrating)

5、mount() 方法中调用 mountComponent() 方法,在这里会调用 vm._render() 生成虚拟 node,也会调用 vm._update() 进行更新dom

6、_render() 方法中调用 VNode() 方法生成虚拟 DOM

7、在 _render() 中调用 vm.$createElement,通过此方法进行规范化子节点 children 生成 vnode 的数组

8、之后调用 _update(),在此方法中再次调用一个核心方法 patch(preVnode, Vnode)

9、pathch 最后会返回一个 patch(oldVnode, vnode, hydrating, removeOnly),通过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象,然后再调用 createElm 方法

10、ceateElm 方法中调用 createChildren 方法,遍历子虚拟节点,递归调用 createElm,在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入
11、再调用 invokeCreateHooks 方法执行所有的 create 的钩子并把 vnode push 到 insertedVnodeQueue 中

12、最后调用 insert() 方法,把子节点插入到父节点中,实际就是在操作 dom 的 api,动态生成 dom,渲染到页面

你可能感兴趣的:(vue.js,前端,javascript)