vue三要素及底层实现机制

深入解析Vue

我们首先来熟悉一下我们这个文档所学习内容的流程。

先对比一下jQuery和Vue的区别，再讲述Vue的MVVM模型，接着讲解Vue的实现流程。

当然，我是不相信没有对比哪来的伤害，没有伤害哪能让人记忆深入骨髓咧，向来都是被伤害过的人我才会记得你，我要恨你一辈子 ~ ~ 哈哈，这当然是个泛词，我们今天的重点也不是要你真的去恨谁哈，一起来看今日焦点，jQuery 和 Vue的生死之战。

我们来看看jQuery 和 Vue 分别具有什么夺命技能，来来来，看官们看好了。

一、jQuery和Vue的区别

数据和视图分离，解耦（就是都单独分开来）

以数据驱动视图，只关心数据变化，DOM被封装

jQuery：中规中矩的JS门派的后生， 主要的技能就是操作DOM来更改数据，和用DOM来变化数据和视图的更新，

Vue: 独树一派， 拥有响应式，模板引擎解析器，和渲染机制必杀技。

二、Vue的MVVM模型

Vue的MVVM模型讲的是M-> model（数据模型），V-> view（视图、模板），VM-> ViewModel，VM是M和V之间的桥梁，如果没有VM的话，那么Vue就无法实现数据驱动视图进行更新的操作了，

首先我们来介绍一下三者在Vue 里面的表现形式：

三者之间的绑定方式是：

View在ViewModel这个桥梁上利用DOM-listener事件绑定监听事件，将DOM节点上发生的事件传给model，

Model在ViewModel这个桥梁上利用Data-bindings数据绑定事件，将Model数据发生改变的事件传给View，

这样就实现了视图层和数据层双向数据绑定。

下面用一个图来解释一下三者相对应一个Vue 代码中的对应的部分：

 

三、MVVM框架的三要素

1、响应式 ： vue如何监听到data的每个属性变化？

利用Object.defineProperty定义属性，第一个参数对象，第二个属性名

 

将data里面的属性代理到vm上

利用Object.defineProperty

 

console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到

使用defineProperty我们就可以监听到数据变化了。其中这个也是 vue 做响应工做核心的方法了。
下面我们来模拟一下

var mv = {}

var data = {
  price: 100,
  name: 'zhangsan'
}

var key, value;
for (key in data) {

  // 命中闭包。新建一个函数，保证 key 的独立的作用域
  (function (key) {
Object.defineProperty(mv, key, {
  get: function () {
    console.log('get');
    return data[key];
  },
  set: function (newVal) {
    console.log('set');
    data[key] = newVal
  }
})
  })(key);
}

2、模板解析： vue的模板如何被解析，指令如何处理？

1) vue里面为什么要解析模板？

1. 这个模板本质是字符串，
2. 但它和html很像但有很大区别，
3. 是在这个模板里的html有逻辑，v-for, v-if等等，
4. 最终必须解析成html来显示，
5. 模板最终必须转换成 JS 代码, 因为：

• • 有逻辑（v-if v-for）,必须用 JS 才能实现( 图灵完备)
  • 转换为 html 渲染页面，必须用 JS 才能实现
  • 因此，模板最重要转换成一个 JS 函数

因为只有JS才能实现将代码转化成html格式渲染到浏览器上

for example: 

 <div id="app">
    <div>
      <input v-model="title">
      <button v-on:click="add">submit</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

　以上就是一个模板啦

2) render函数

with 用法（vue render有用到，所以说下用法 ，具体开发中建议不使用）

简要说明

with 语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。

render 函数

基础事例

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。
比如如下我想要实现如下html：

 

我们来尝试使用 render函数重写上面的demo，如下：

1. 模板中所有信息都包含在了 render 函数中
2. this 即 vm
3. price 即 this.price 即 vm.price， 即 data 中的 price
4. _c 即 this._c 即 vm._c

 

通过控制台打印，我们就知道了 _c就是一个创建dom 元素的方法， _v 是一个创节点的方法， _s 是 toString 方法。

3、渲染：  vue的模板如何被渲染成html? 以及渲染过程？

四、Vue的实现流程

1、首先模板解析器解析成render函数

2、响应式监听

3、将数据渲染进模板里，

4、data属性变化，触发render

 jQuery：“  您能别秀了吗  ”