vue的原理mvvm模式简读，template及slot编译原理

MVVM

M:Model 数据模型
v:View 视图
vm:ViewModel 数据视图模型

数据改变，则视图更新，视图更新，数据也随之变化的数据与视图的双向绑定。

底层原理

数据劫持者：Observer,劫持监查数据对象的所有属性，有变动则拿到最新值
指令解析器：compile,对每个元素节点的指令进行扫描和解析，
		   根据指令模型替换数据以及绑定相应的函数。
watcher：订阅者，连接Observer和Compile的桥梁，
	能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

<input type="text" id="input">
<p id="show"></p>

<script>
   var obj = {};
   Object.defineProperty(obj,'input',{
       get(){
           return obj;
       },
       set(newvalue){
           document.getElementById('input').value = newvalue;
           document.getElementById('show').innerHTML = newvalue;
       }
   })

   document.addEventListener('keyup',(e)=>{
       obj.input = e.target.value
   })
</script>

Vue采用数据劫持 结合发布者 订阅者模式，
通过Object.defineProperty()
来劫持各个属性的setter,getter属性，
在数据变动话，通知订阅者，
触发更新回调函数，重新渲染视图

vue，template编译原理：

new Vue({el,data}),
el首先要转为template，指令解析器将template解析为AST,
data实现数据劫持，底层原理使用Object.defineProperty()，触发订阅者，
然后一起触发render函数，渲染页面。

抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。
AST的作用？
解释器/编译器进行语法分析的基础
AST的使用场景？
JS：代码压缩、混淆、编译
CSS：代码兼容多版本
HTML：Vue中Virtual DOM的实现

vue,slot的编译原理

父级：
<div>
	<com1>插入插槽slot中</com1>
</div>

子级组件：
<div>
	<slot></slot>
</div>

父组件先解析，然后把com1当成子元素处理，把插槽当成com1的子元素来处理。

子组件解析，slot作为一个占位符，会被解析成一个函数。
在这个函数中，第一步解析得到的插槽节点，然后返回

那么子组件的节点就完整了，插槽也成功插入成功。