浅谈实现vue2.0响应式的基本思路

2018-02-17 19:15:05来源:作者:人点击

分享

最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。

注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象嵌套这些细节本实例都不会涉及到,如果想了解更加细节的实现,可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。

首先,我们先定义好实现vue对象的结构

class Vue {  constructor(options) {    this.$options = options;    this._data = options.data;    this.$el = document.querySelector(options.el);  }} 

第一步:将data下面的属性变为observable

使用Object.defineProperty对数据对象做属性get和set的监听,当有数据读取和赋值操作时则调用节点的指令,这样使用最通用的=等号赋值就可以触发了。

//数据劫持,监控数据变化function observer(value, cb){ Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))}function defineReactive(obj, key, val, cb) { Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal  } })} 

第二步:实现一个消息订阅器

很简单,我们维护一个数组,这个数组,就放订阅者,一旦触发notify,订阅者就调用自己的update方法

class Dep { constructor() {  this.subs = [] } add(watcher) {  this.subs.push(watcher) } notify() {  this.subs.forEach((watcher) => watcher.cb()) }} 

每次set函数,调用的时候,我们触发notify,实现更新

那么问题来了。谁是订阅者。对,是Watcher。。一旦 dep.notify()就遍历订阅者,也就是Watcher,并调用他的update()方法

function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal   dep.notify()  } })} 

第三步:实现一个 Watcher

Watcher的实现比较简单,其实就是执行数据变化时我们要执行的操作

class Watcher { constructor(vm, cb) {  this.cb = cb  this.vm = vm } update(){  this.run() } run(){  this.cb.call(this.vm) } }

第四步:touch拿到依赖

上述三步,我们实现了数据改变可以触发更新,现在问题是我们无法将watcher与我们的数据联系到一起。

我们知道data上的属性设置defineReactive后,修改data 上的值会触发 set。那么我们取data上值是会触发 get了。所以可以利用这一点,先执行以下render函数,就可以知道视图的更新需要哪些数据的支持,并把它记录为数据的订阅者。

function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   if(Dep.target){    dep.add(Dep.target)   }   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal   dep.notify()  } })}

最后我们来看用一个代理实现将我们对data的数据访问绑定在vue对象上

 _proxy(key) {  const self = this  Object.defineProperty(self, key, {   configurable: true,   enumerable: true,   get: function proxyGetter () {    return self._data[key]   },   set: function proxySetter (val) {    self._data[key] = val   }  })}Object.keys(options.data).forEach(key => this._proxy(key))

下面就是整个实例的完整代码

class Vue { constructor(options) {  this.$options = options;  this._data = options.data;  this.$el =document.querySelector(options.el);  Object.keys(options.data).forEach(key => this._proxy(key))  observer(options.data)  watch(this, this._render.bind(this), this._update.bind(this)) } _proxy(key) {  const self = this  Object.defineProperty(self, key, {   configurable: true,   enumerable: true,   get: function proxyGetter () {    return self._data[key]   },   set: function proxySetter (val) {    self._data[key] = val   }  }) } _update() {  console.log("我需要更新");  this._render.call(this) } _render() {  this._bindText(); } _bindText() {  let textDOMs=this.$el.querySelectorAll('[v-text]'),  bindText;  for(let i=0;i<textDOMs.length;i++){    bindText=textDOMs[i].getAttribute('v-text');    let data = this._data[bindText];    if(data){     textDOMs[i].innerHTML=data;    }     } }}function observer(value, cb){ Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))}function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   if(Dep.target){    dep.add(Dep.target)   }   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal   dep.notify()  } })}function watch(vm, exp, cb){ Dep.target = new Watcher(vm,cb); return exp()} class Watcher { constructor(vm, cb) {  this.cb = cb  this.vm = vm } update(){  this.run() } run(){  this.cb.call(this.vm) } }class Dep { constructor() {  this.subs = [] } add(watcher) {  this.subs.push(watcher) } notify() {  this.subs.forEach((watcher) => watcher.cb()) }}Dep.target = null; var demo = new Vue({ el: '#demo', data: { text: "hello world" } }) setTimeout(function(){ demo.text = "hello new world" }, 1000) <body>  <div id="demo">    <div v-text="text"></div>  </div> </body> 

上面就是整个vue数据驱动部分的整个思路。如果想深入了解更细节的实现,建议深入去看vue这部分的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • Vue的事件响应式进度条组件实例详解
  • 代码详解Vuejs响应式原理
  • Vue响应式原理深入解析及注意事项
  • 谈谈对vue响应式数据更新的误解
  • Vue响应式原理详解
  • Vue响应式添加、修改数组和对象的值
  • 100行代码理解和分析vue2.0响应式架构
  • Vue.js每天必学之内部响应式原理探究

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台