vuejs

浅谈vue的运行原理----数据渲染

目前几种主流的mvc(vm)框架，都实现了单向的数据绑定，而我所理解的双向数据绑定，就是在单向数据绑定的基础上给可输入dom元素例如input等绑定事件（change等），从而动态的去修改model层和view层，从而就有了数据的双向绑定，数据双向绑定方法也有很多种，通过发布者-订阅者模式原理，运用js也可以实现数据的双向绑定，这里不做过多的赘述，本文主要想讲一下vue的运行原理！

  如果想实现数据双向绑定，其必要的一个条件就是检测数据的变化，并作出相应的反应！angular.js通过脏值检查的方式，通过用户触发dom从而引起数据变化，执行脏值检测，再作出相应的反应！react.js的虚拟dom模型，其执行的核心就是diff算法配合其事件机制进行， 而 vue.js通过数据劫持配合发布者-订阅者，调用obj.defineProperty()的方法，来劫持各个属性的setter,getter方法，在数据发生变化是发布消息给订阅者，从而触发相应的监听回调！如下图：

简单来说，vue的执行过程由三部分组成，劫持监听（observer）,数据绑定及通知订阅者（watcher），指令解析（compile），通过劫持监听去检测数据的变化，数据变化之后通过调用getter和setter的方法，去赋值，从而主动改变数据，从而触发vue的watcher来重新计算，发布，从而实现页面数据的重新渲染更新！

我们在开发中想必也遇到过这种问题，我再进行数据渲染的时候，请求过来的数据进行处理，遍历之后给其增加属性，然后返回的新的数据进行页面渲染，页面再调用增加的属性，从而达到自己想要的效果，但是事与愿违，我拿到请求的数据在初始化之后，新增的属性新增成功了，返回的数据对象也是最新的，确实改变了。但是页面并没有检测到数据变化，也就没有处罚二次渲染，所以达不到自己想要的效果！这时候理解vue的渲染过程就十分重要了，综合分析之后，我发现，自己新增的数据，并不是直接在页面去做的修改，而是通过js去做的处理，这样的话也就是调用了getter的方法，而vue触发二次渲染是有setter触发的，setter去修改数据进行赋值，从而触发watcher的重新计算，从而实现二次渲染！为了触发setter方法，我在dom上自定义绑定一个属性，并申明一个变量，通过用户操作触发，并改变这个变量，就相当于触发了setter方法，果然界面会进行二次渲染，达到我想要的效果！下边贴代码：

我要实现的是，点编辑编辑框出现，点取消编辑框消失，而且每一条之间都不能相互影响，这个表格是用的el-table做的，所以不能声明全局变量进行控制，否则不能一对一的操作，所以就在数据源进行处理

这是代码，在dom上绑定data-list，通过编辑按钮去触发isEditNumber的值得变化，从而去调用setter方法，触发watcher的重新计算，二次渲染：