vue三要素及底层实现机制

印度阿三17 2018-12-26

展开全文

深入解析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里面为什么要解析模板？

这个模板本质是字符串，
但它和html很像但有很大区别，
是在这个模板里的html有逻辑，v-for, v-if等等，
最终必须解析成html来显示，
模板最终必须转换成 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>

　以上就是一个模板啦