How to implement vue2.0 responsiveness (detailed tutorial)

This article mainly introduces the basic ideas of implementing vue2.0 responsiveness. Now I will share it with you and give you a reference.

I recently read the vue2.0 source code about the implementation of responsiveness. The following blog post will restore the implementation ideas of vue2.0 about responsiveness through simple code.

Note that this is just a restoration of the implementation idea. The implementation of various details, such as monitoring of data operations in arrays and object nesting, will not be covered in this example. If you want to know more about For more detailed implementation, you can learn more about it by reading the source code observer folder and the state file in the instance folder.

First of all, we first define the structure of the vue object

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

The first step: change the properties under data to observable

Use Object .defineProperty monitors the properties get and set of the data object. When there are data reading and assignment operations, the node's instructions are called. In this way, the assignment using the most common = equal sign can be triggered.

//数据劫持，监控数据变化
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
  }
 })
}

Step 2: Implement a message subscriber

It’s very simple. We maintain an array. In this array, we put the subscribers. Once notify is triggered, the subscribers Just call your own update method

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

Every time the set function is called, we trigger notify to implement the update

Then the problem comes. Who are subscribers. Yes, it's Watcher. . Once dep.notify() traverses the subscribers, that is, Watcher, and calls his update() method

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()
  }
 })
}

Step 3: Implement a Watcher

Watcher The implementation is relatively simple. In fact, it is the operation we need to perform when performing data changes.

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

The fourth step: touch to get the dependencies

We have achieved the above three steps Data changes can trigger updates, but the problem now is that we can't associate the watcher with our data.

We know that after the attribute on data is set to defineReactive, modifying the value on data will trigger set. Then when we take the upper value of data, get will be triggered. So you can take advantage of this and first execute the following render function to know what data is needed to support the update of the view and record it as a subscriber of the data.

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()
  }
 })
}

Finally, let’s look at using a proxy to bind our data access to the vue object

 _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))

The following is the complete code of the entire instance

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 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)

 
  

    

  

 

Above This is the entire idea of ​​the entire vue data-driven part. If you want to learn more about the implementation in more detail, it is recommended to take a deeper look at this part of the vue code.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use vue element-ui ajax technologies to implement an example of a table

Use live-server How to set up a local server and automatic refresh, what are the specific methods?

Solve the problem that lower version browsers do not support the import of es6

The above is the detailed content of How to implement vue2.0 responsiveness (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!