快捷導(dǎo)航

vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié)

更新時(shí)間：2020年02月16日 08:40:50 作者：SlightFly

在本篇文章里小編給各位整理的是一篇關(guān)于vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。

vue2.0數(shù)據(jù)響應(yīng)式原理

對(duì)象

Obect.defineproperty 定義對(duì)象的屬性mjm

defineproperty 其實(shí)不是核心的為一個(gè)對(duì)象做數(shù)據(jù)雙向綁定，而是去給對(duì)象做屬性標(biāo)簽，設(shè)置一系列操作權(quán)限，只不過屬性里的get和set實(shí)現(xiàn)了響應(yīng)式

var ob = {
  a: 1,
  b: 2
}
//1-對(duì)象 2-屬性 3-對(duì)于屬性的一系列配置
Object.defineProperty(ob, 'a' , { //a對(duì)象則是ob的絕對(duì)私有屬性,,默認(rèn)都是true
  writable: false,
  enumerable: false,
  configurable: false
})
ob.a = 3
console.log(Object.getOwnPropertyDescriptor(ob, 'a'))
console.log(ob.a) //1

var ob = {
  a: 1,
  b: 2
}

//1-對(duì)象 2-屬性 3-對(duì)于屬性的一系列配置
/**
 * vue雙向數(shù)據(jù)綁定
 * 給ob的a屬性設(shè)置get/set方法，則獲取ob的a時(shí)，會(huì)觸發(fā)get方法，設(shè)置ob的a時(shí)，會(huì)觸發(fā)set方法
 */
Object.defineProperty(ob, 'a' , { //a對(duì)象則是ob的絕對(duì)私有屬性,,默認(rèn)都是true
  get: function(){
    console.log('a- get') 
  },
  set: function(){
    console.log('a- set')

  }
})
ob.a = 3
console.log(ob.a)

//正常用法，，，使用中轉(zhuǎn)，不優(yōu)雅

var ob = {
  a: 1,
  b: 2
}

//1-對(duì)象 2-屬性 3-對(duì)于屬性的一系列配置
/**
 * vue雙向數(shù)據(jù)綁定
 * 給ob的a屬性設(shè)置get/set方法，則獲取ob的a時(shí)，會(huì)觸發(fā)get方法，設(shè)置ob的a時(shí)，會(huì)觸發(fā)set方法
 */
var _value = ob.a //_value 作為一個(gè)中轉(zhuǎn)
Object.defineProperty(ob, 'a' , { //a對(duì)象則是ob的絕對(duì)私有屬性,,默認(rèn)都是true
  get: function(){
    console.log('a- get') 
    return _value;
  },
  set: function(newValue){
    console.log('a- set')
    _value = newValue;
  }
})
ob.a = 3
console.log(ob.a) //get方法必須return ，否則返回undefined

defineProperty 定義的get和set是對(duì)象的屬性，那么數(shù)組怎么辦？

　　做了個(gè)裝飾者模式

/**
 * 概述  Object.create() 方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。
 *            被創(chuàng)建的對(duì)象繼承另一個(gè)對(duì)象的原型，在創(chuàng)建新對(duì)象時(shí)可以指定一些屬性。
 * 語(yǔ)法  Object.create(proto, [ propertiesObject ])
 */
//數(shù)組 -- 做了個(gè)裝飾者模式
var arraypro = Array.prototype;
var arrob = Object.create(arraypro)
var arr = ['push', 'pop', 'shift']; //枚舉這三個(gè)，vue中還有其他
arr.forEach((method, index)=>{
  arrob[method] = function(){
    var ret = arraypro[method].apply(this,arguments);
    dep.notify();
  }
})

vue3.0數(shù)據(jù)響應(yīng)式原理 - Proxy

Proxy對(duì)象用于定義基本操作的自定義行為，用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。

　　和defineProperty類似，功能幾乎一樣，但是用法不同

為什么要是用Procy？
  1、defineProperty只能監(jiān)聽某個(gè)屬性，不能對(duì)全對(duì)象監(jiān)聽
  2、所以可以省去 for in 提升效率
  3、可以監(jiān)聽數(shù)組，不用再去單獨(dú)對(duì)數(shù)組做特異性操作

改造的observer：

vue.prototype.observer = function(obj){ //注冊(cè)get/set監(jiān)聽
  var self = this;
  this.$data = new Proxy(this.$data, {
    get: function(target, key, receiver){
      return target[key]
    },
    set: function(target, key, value, receiver){
      // return Reflect.set(target, key, value);
      // return target[key] = value
      target[key] = value;
      self.render();
    }
  })
}

Proxy 用途 -- 校驗(yàn)類型 -- 真正的私有變量

Diff算法和virtua doml