vue如何实现视图渲染

从脚手架入手
template 模板 比如

<template>
<div>
<span v-if="bool"></span>
</div>
</template>
<script>
exprot default{
data:function(){
return {
bool:"true"
}
}
}
</script>

一步步来分析
data使用函数来返回数据对象
将这些数据对象做数据劫持使用object.defindPrototype
或使用proxy代理对象，转换成get，set
模板开始编译 把类似HTML的标签都转换成对象来表示，形成虚拟节点
HTML标签分元素节点，属性节点，文本节点
1 ，遇到data触发get来渲染视图同时产生对应的观察者与收集依赖(订阅器)
2，把遇见的内置指令还是自定义指令都转化成对应的js代码
3，虚拟节点向HTML真实节点转化形成标签
4，对应的css样式来渲染标签 到这一步触发mounted生命周期
使用ref来操作节点 query selector等等
5,当data数据变化触发set，收集的依赖也就是订阅器会去寻找对应的watcher 通知template模板里面包含data的数据(包含{{msg}}这样的文本，指令，但凡涉及data数据)进行更新，组件重新渲染
6.模板的渲染有el <template<render 本质都是转化成render,也是jsx写法
7.初始化与刷新，本质是虚拟节点使用diff算法对比减少重绘重排形成节点
8.vue文件后缀编译形成组件化也得益于nodejs以及webpage等等的兴起

vue2.x对数组的一些常用操作可以监听
对data的数据一个个遍历监听
为了完善提供Vue.set(obj,key,value)与observer（{count:0}）
也提供了computed watch来进行深入监听 比如
deep：true深入
immediate：true初始

而proxy代理返回一个对象弥补上面的缺陷