vue实现的三个步骤讲解（附代码）

Vue是当今热门的框架，他可以进行数据双向绑定，为什么vue会大受欢迎，我知道的原因大致如下？

1.传统改变dom结构的操作是非常浪费性能的操作（就是慢）
2.把dom结构改变的逻辑放在js层来做可以提高性能。
3.数据和视图的分离更符合面向对象的编程，mvvm

vue的实现也是和react一样用虚拟dom来实现的，至于什么是虚拟dom，就是用js通过模板渲染而成的dom。

1、响应式：vue怎么监听到dota的每个属性值的变化？
2、模板引擎：vue的模板如何解析的，指令是如何处理的？
3、模板渲染：如何把data里的数据加入模板并渲染成html？

第一步:响应式

响应式的实现主要是依靠一个对象的方法:

Object.defineProperty

这个方法能够监听对象中属性的变化而进行逻辑处理

dome如下：

 var obj={}
 var _name ='zhangsan'
 Object.defineProperty(obj,'name',{
 get:function() {
 console.log('get')
 return _name
 },
 set: function(newVal) {
 console.log('set')
 _name=newVal
 }
 })

这里你改变name的值或者访问name的值就会有打印信息

而在vue中模拟实现，大概是这样的：

 var vm ={}
 var data={name:'张三',age:20}
 var key,value;
 for(key in data) {
 (function(key){
 Object.defineProperty(vm,key,{ //绑定到vm上
 get:function(){
 console.log('get')
 return data[key];
 },
 set:function(newVal){
 console.log('set');
 data[key]=newVal
 }
 })
 })(key) //闭包处理
 }

其实学过java的同学肯定对这个不陌生，java的类里面可以直接生成get和set方法

第二步：解析模板

模板必须要转化成js代码，因为:
1.逻辑判断(v-if,v-for),必须要用js才能实现.
2.虚拟dom的渲染，必须要使用js才能实现。(render函数)

模板1

 <div id="app">
 <p>{{price}}</p>
 </div>

模板1转化的render

 with(this) { //this就是vm
 return _c(
 'p',
 {
 attrs:{'id':'app'}
 },
 [
 // _c是createElement
 // _v是createTextVNode
 // _s是toString方法
 _c('p',[_v(_s(price))])
 ]
 )
 }

模板2

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

模板2转化的render

 with (this) {
 return _c(
 'p',
 { attrs: { "id": "app" } },
 [
 _c(
 'p',
 [
 _c(
 'input',
 {
 //指令
 directives: [
 {
 name: "model",
 rawName: "v-model",
 value: (title), //vm.title
 expression: "title"
 }
 ],
 domProps: {
 "value": (title) //vm.title 
 },
 on: {
 "input": function ($event) {
 if ($event.target.composing) return;
 title = $event.target.value
 }
 }
 }
 ),
 _v(" "),
 _c(
 'button',
 {
 on: { "click": add } //vm.add
 },
 [
 _v("submit")
 ]
 )
 ]
 ),
 _v(" "),
 _c(
 'p',
 [
 _c(
 'ul',
 _l(
 (list), function (item) {
 return _c(
 'li',
 [
 _v(_s(item))
 ]
 )
 }
 )
 )
 ]
 )
 ]
 )
 }

这就是用于渲染的render函数

第三步：把模板加上数据渲染成html

vm._update(Vnode) {
 const prevVonde=vm._Vnode
 vm._Vnode=Vnode;
 if(!prevVnode) { //如果没有之前的vnode，第一次渲染
 vm.$el=vm._patch_(vm.$el,Vnode)
 }else {
 vm.$el=vm._patch_(prevVnode,Vnode)
 }
}
function updataComponent() {
 //vm._reander就是解析模板的rende函数，返回了一个vnode
 vm._update(vm._render())
}

这里的vm_.patch_里面就是复杂的diff算法了。根据dom的差别来渲染，里面使用来很多的递归调用，而且里面最要涉及到很多效率问题，天下武功为快不破嘛。