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


Posted in Javascript onFebruary 13, 2018

最近看了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这部分的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 #Javascript
React中的refs的使用教程
Feb 13 #Javascript
tween.js缓动补间动画算法示例
Feb 13 #Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 #Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 #Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 #Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js闭包的用途详解
2014/11/09 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
大学班级干部的自我评价分享
2014/02/10 职场文书
经典商业广告词
2014/03/13 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
项目转让协议书
2014/10/27 职场文书
环卫工作个人总结
2015/03/04 职场文书
放假通知范文
2015/04/14 职场文书
行为规范主题班会
2015/08/13 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL