vue 数据渲染

就我目前所知道的渲染方式有  

1.插值表达式

2.v-text

3.v-html

但是使用插值表达式会有一些问题  即插值闪烁

所谓的插值闪烁 就是数据不是预先订好的  而是后期通过网络或者其他方式获取的  存在一定时间的延迟  等待数据准备完毕后才会进行渲染  而在这段空档期   就会显示出插值表达式 即页面中会显示如下的情况

v-text也是负责将数据渲染到页面中去的  使用 v-text 可以完美解决插值闪烁问题   但是 v-text 也不是完美的  v-text 不能识别 标签 （例如 <p></p>, <a></a>等HTML中的标签）它会将标签一并写入   v-text 只能渲染纯文本的数据

页面结果如下：

v-html 也是负责将数据渲染到页面中去的  使用 v-html 可以完美解决插值闪烁问题  v-html 不会有识别不了页面标签的情况  v-html是既可以识别文本  又可以识别标签

页面结果如下：

v- if  v-else   v-else-if    都与JavaScript 中的if  else  else if   一样

执行结果如下：

当 a1 为true 时  则是显示  “我是数据一”     

v- if  v-else   v-else-if    只会执行其中一个满足条件的

运行结果如下：

1.v-if  

在条件成立的时候  会创建一个标签即里面的内容    如果条件不成立的时候  那么则会销毁这个标签   在页面中的 （检查 F12    元素 ）也是不存在的

v-if  只会在条件成立时创建

2.v-show

在条件成立的时候  标签会显示出来   不成立的时候 会隐藏起来   v-show 的显示与隐藏都是通过 css 属性设置的  而且在页面中的 （检查 F12    元素 ）也是存在的

v-show 一开始就创建   但判断条件是否满足 来显示与隐藏

new Vue，执行初始化

挂载$mount方法，通过自定义Render方法、template、el等生成Render函数

通过Watcher监听数据的变化

当数据发生变化时，Render函数执行生成VNode对象

通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

至此，整个new Vue的渲染过程完毕。

对于 vue 来说，模板本质就是一个字符串

vue 中的模板是有逻辑的，是动态的，如 v-if、v-for 等

与 html 格式很像，但有很大区别；html 是静态的，而 vue 模板是动态的

最终还是要转化为 html 来显示，怎么才能转换为 html 来显示呢？

模板最终必须转换为 JS 代码？

因为模板有逻辑 (v-if,v-for)，必须用 JS 才能实现(前端中只有 JS 是图灵完备语言）

转换为html渲染页面，必须用 JS 才能实现渲染

因此模板最终要转换为一个 JS 函数(render 函数)，（render 函数是指的渲染函数，并不一定就必须是 render 这个名字）

render函数

render 函数的 with 的用法

模板中，所有信息都包含在了 render 函数中

this 即 vm

price 就是 this.price，也是 vm.parice，也是 data.price

---