vue數據響應式的原理是什么

本篇文章給大家分享的是有關vue數據響應式的原理是什么，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

vue2.0數據響應式原理

對象

Obect.defineproperty 定義對象的屬性mjm

defineproperty 其實不是核心的為一個對象做數據雙向綁定，而是去給對象做屬性標簽，設置一系列操作權限，只不過屬性里的get和set實現了響應式

var ob = {
  a: 1,
  b: 2
}
//1-對象 2-屬性 3-對于屬性的一系列配置
Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認都是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-對象 2-屬性 3-對于屬性的一系列配置
/**
 * vue雙向數據綁定
 * 給ob的a屬性設置get/set方法，則獲取ob的a時，會觸發get方法，設置ob的a時，會觸發set方法
 */
Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認都是true
  get: function(){
    console.log('a- get') 
  },
  set: function(){
    console.log('a- set')

  }
})
ob.a = 3
console.log(ob.a) 
[object Object]

//正常用法，，，使用中轉，不優雅

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

//1-對象 2-屬性 3-對于屬性的一系列配置
/**
 * vue雙向數據綁定
 * 給ob的a屬性設置get/set方法，則獲取ob的a時，會觸發get方法，設置ob的a時，會觸發set方法
 */
var _value = ob.a //_value 作為一個中轉
Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認都是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是對象的屬性，那么數組怎么辦？

　　做了個裝飾者模式

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

vue3.0數據響應式原理 - Proxy

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

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

為什么要是用Procy？
  1、defineProperty只能監聽某個屬性，不能對全對象監聽
  2、所以可以省去 for in 提升效率
  3、可以監聽數組，不用再去單獨對數組做特異性操作

改造的observer：

vue.prototype.observer = function(obj){ //注冊get/set監聽
  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 用途 -- 校驗類型 -- 真正的私有變量

Diff算法和virtua doml

//1-對象 2-屬性 3-對于屬性的一系列配置

以上就是vue數據響應式的原理是什么，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。