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

网络编程 2024/11/9 佚名

3 2 1

最近看了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,响应式,vue响应式原理,vue2.0,响应式布局

标签：

vue,响应式,vue响应式原理,vue2.0,响应式布局

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“浅谈实现vue2.0响应式的基本思路”

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

暂无“浅谈实现vue2.0响应式的基本思路”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

vue,响应式,vue响应式原理,vue2.0,响应式布局

jQuery实现的鼠标响应缓冲动画效果示例

JS实现的文字间歇循环滚动效果完整示例

评论“浅谈实现vue2.0响应式的基本思路”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

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

vue,响应式,vue响应式原理,vue2.0,响应式布局

jQuery实现的鼠标响应缓冲动画效果示例

JS实现的文字间歇循环滚动效果完整示例

评论“浅谈实现vue2.0响应式的基本思路”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存