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的重新计算,二次渲染:



你可能感兴趣的:(vuejs)