vue渲染流程知识点

vue知识点总结

模板的配置(template)

1. 在页面中直接书写 (outerHTML)
2. 在template模板中书写
3. 在render函数手动生成,render函数的createElement参数是创建虚拟dom的一个方法

vue渲染流程

1. 当vue中有el指定的渲染元素时,会首先寻找template模板,当有template模板时,会将模板中的字符串经过处理生成AST抽象语法树,然后经过render函数生成虚拟dom,然后创建vm.$el代替起始时的el指定的元素,将生成的真实dom挂载到指定元素上
   

  el ? Yes ==> template ? yes => 生成AST => render函数 => VNode => vm.$el(真实dom) => 替换el
                          no ==> vm.$el.outerHTML("<div id="app"</div>") =>生成AST => render函数 => VNode => vm.$el(真实dom) => 替换el
       No  ==> $mount   ? yse => 生成AST => render函数 => VNode => vm.$el => 替换el
                          no ==> 结束

渲染优先级

1. 从上图中我们可以看出 所有的模板都需要通过render函数进行生成虚拟dom,所以他们之间的优先级应为:
   render => template => outerHTML(vm.$el.outerHTML)
   也就是说当你的vue实例中有自定义的render函数时,render函数中生成的虚拟dom会覆盖template,
   而当你有template时,又会覆盖掉outerHTML

问题:

1.vue实现数据响应式的原理是什么?

• 将vue实例中的data中的属性利用Object.defineProperty()进行监听,利用其中的getter和setter方法,当你改变其中的属性的值的时候他就可以监听到然后做出改变

2.vue中的method方法中的this指向哪里?

• 执行我们创建的vue实例,因此在method中不可以使用箭头函数,因为箭头函数时没this的,

3.render template 在页面中直接书写模板有什么区别

template 在页面中直接书写模板有什么区别

• render是最核心的方法,因为你无论是写在template中还是在页面中直接书写,都会经过render函数的createElement方法去生成虚拟dom,所以他们的根本区别应该是在优先级的体现上