vue底层实现原理_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里面为什么要解析模板？

这个模板本质是字符串，

但它和html很像但有很大区别，

是在这个模板里的html有逻辑，v-for, v-if等等，

最终必须解析成html来显示，

模板最终必须转换成 JS 代码, 因为：

有逻辑(v-if v-for),必须用 JS 才能实现( 图灵完备)

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

因此，模板最重要转换成一个 JS 函数

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

for example:

以上就是一个模板啦

2) render函数

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

简要说明

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

render 函数

基础事例

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

比如如下我想要实现如下html：

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

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

this 即 vm

price 即 this.price 即 vm.price， 即 data 中的 price

_c 即 this._c 即 vm._c

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

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

四、Vue的实现流程

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

2、响应式监听

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

4、data属性变化，触发render

jQuery：“  您能别秀了吗  ”