vue數(shù)據(jù)響應(yīng)式原理知識點總結(jié)
vue2.0數(shù)據(jù)響應(yīng)式原理
對象
Obect.defineproperty 定義對象的屬性mjm
defineproperty 其實不是核心的為一個對象做數(shù)據(jù)雙向綁定,而是去給對象做屬性標(biāo)簽,設(shè)置一系列操作權(quán)限,只不過屬性里的get和set實現(xiàn)了響應(yīng)式
var ob = { a: 1, b: 2 } //1-對象 2-屬性 3-對于屬性的一系列配置 Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認(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-對象 2-屬性 3-對于屬性的一系列配置 /** * vue雙向數(shù)據(jù)綁定 * 給ob的a屬性設(shè)置get/set方法,則獲取ob的a時,會觸發(fā)get方法,設(shè)置ob的a時,會觸發(fā)set方法 */ Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認(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-對象 2-屬性 3-對于屬性的一系列配置 /** * vue雙向數(shù)據(jù)綁定 * 給ob的a屬性設(shè)置get/set方法,則獲取ob的a時,會觸發(fā)get方法,設(shè)置ob的a時,會觸發(fā)set方法 */ var _value = ob.a //_value 作為一個中轉(zhuǎn) Object.defineProperty(ob, 'a' , { //a對象則是ob的絕對私有屬性,,默認(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是對象的屬性,那么數(shù)組怎么辦?
做了個裝飾者模式
/** * 概述 Object.create() 方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。 * 被創(chuàng)建的對象繼承另一個對象的原型,在創(chuàng)建新對象時可以指定一些屬性。 * 語法 Object.create(proto, [ propertiesObject ]) */ //數(shù)組 -- 做了個裝飾者模式 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數(shù)據(jù)響應(yīng)式原理 - Proxy
Proxy對象用于定義基本操作的自定義行為 ,用于修改某些操作的默認(rèn)行為,等同于在語言層面做出修改,所以屬于一種“元編程”(meta programming),即對編程語言進行編程。
和defineProperty類似,功能幾乎一樣,但是用法不同
為什么要是用Procy? 1、defineProperty只能監(jiān)聽某個屬性,不能對全對象監(jiān)聽 2、所以可以省去 for in 提升效率 3、可以監(jiān)聽數(shù)組,不用再去單獨對數(shù)組做特異性操作
改造的observer: vue.prototype.observer = function(obj){ //注冊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 用途 -- 校驗類型 -- 真正的私有變量
Diff算法和virtua doml
//1-對象 2-屬性 3-對于屬性的一系列配置
以上就是小編給大家整理的全部相關(guān)知識點,感謝大家的學(xué)習(xí)如果有任何疑問可以聯(lián)系腳本之家小編。
相關(guān)文章
使用Element+vue實現(xiàn)開始與結(jié)束時間限制
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實現(xiàn)開始與結(jié)束時間限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08解決vue的變量在settimeout內(nèi)部效果失效的問題
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02vue2 前后端分離項目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項目ajax跨域session問題解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04Vue3視頻播放器組件Vue3-video-play新手入門教程
這篇文章主要給大家介紹了關(guān)于Vue3視頻播放器組件Vue3-video-play新手入門教程的相關(guān)資料,本文實例為大家分享了vue-video-player視頻播放器的使用配置,供大家參考,需要的朋友可以參考下2023-12-12