亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

Vue3的發(fā)布已過去3年時間，其更小的體積和更快的渲染機制給開發(fā)帶來了更好的體驗，它向下兼容 Vue2.x 版本，優(yōu)化了主要核心雙向綁定原理和體積大小，并且更加友好的兼容ts語法。在性能方面相對于Vue2做了以下改進：

①重寫虛擬DOM的實現(xiàn)，并引入Tree-Shaking將打包體積減少41%。

②引入可以按需使用的Composition API，多余勾子配置不用再次打包。

③初次渲染快55%，更新渲染快133%，內(nèi)存減少54%。

④使用Proxy代替defineProperty實現(xiàn)響應(yīng)式。

⑤在源碼方面，移除了一些冷門API，比如filter、inline-template。

本文將在對Vue3進行簡介的基礎(chǔ)上比較Vue2與Vue3響應(yīng)式特性的不同，并著重介紹Vue3響應(yīng)式對象的實現(xiàn)原理。

在Vue2中對象響應(yīng)式基于Object對象上的defineProperty()實現(xiàn)，通過defineProperty方法對對象的已有屬性值的讀取和修改進行攔截，通過重寫數(shù)組更新數(shù)組一系列更新元素的方法來實現(xiàn)元素修改的攔截。例如：

使用Object對象上的靜態(tài)方法defineProperty為data的每一個屬性值設(shè)置存取器函數(shù)，就能在屬性讀取與修改時作出相應(yīng)的反應(yīng)。

但這樣的實現(xiàn)方式存在一些不足：

①在目標對象上新增和刪除屬性時無法進行攔截，因此界面不會響應(yīng)式地更新。

②通過下標修改數(shù)組元素或是修改數(shù)組的length屬性，也無法進行攔截和響應(yīng)。

對此，Vue3針對對象響應(yīng)式進行了新的實現(xiàn)。

Vue3響應(yīng)式的核心原理是對需要進行響應(yīng)式處理的對象整體進行代理操作，而不再是對對象已有屬性進行存取器設(shè)置。具體來講，是通過Proxy（代理）和Reflect（反射）實現(xiàn)：通過Proxy攔截對data任意屬性的任意（13種）操作，包括屬性值的讀寫、屬性的添加、屬性的刪除等；并通過 Reflect動態(tài)地對被代理對象的相應(yīng)屬性進行相應(yīng)操作。

ECMAscript6新增的代理和反射為開發(fā)者提供了攔截并向基本操作嵌入額外行為的能力，即可以給目標對象定義一個關(guān)聯(lián)的代理對象，而這個代理對象可以作為抽象的目標對象來使用。在對目標對象的各種操作施加影響之前，可以在代理對象中對這些操作加以控制。

Proxy代理是ES6中新增的基礎(chǔ)性語言能力，在ES6之前，ECMAscript中并沒有類似代理的特性。在代理對象上執(zhí)行的所有操作都會傳播到目標對象，在任何可以使用目標對象的地方，都可以通過同樣的方式來使用與之關(guān)聯(lián)的代理對象。

代理是使用Proxy構(gòu)造函數(shù)創(chuàng)建的，它接收兩個參數(shù)：目標對象和處理程序?qū)ο螅獎?chuàng)建空代理可以傳一個簡單的對象字面量作為處理程序?qū)ο?，但不可以缺省處理程序?qū)ο?。如下所示，在代理對象上?zhí)行的任何操作實際上都會應(yīng)用到目標對象：

const company= {   name: 'eb' }

 const handler = {}

 const proxy = new Proxy(company, handler)

 //name屬性會訪問同一個值 console.log(company.name)  //'eb' console.log(proxy.name)  //'eb'

 //給目標屬性賦值會反映在兩個對象上 company.name = 'ebChina' console.log(company.name)  //'ebChina' console.log(proxy.name)  //'ebChina'

 //給代理屬性賦值也會反映在兩個對象上 proxy.name  = 'ebChinaTech' console.log(company.name)  //ebChinaTech console.log(proxy.name)  //ebChinaTech

 //嚴格相等可以用來區(qū)分代理和目標 console.log(company=== proxy)  //false

代理的主要目的是可以在處理程序?qū)ο笾卸x捕獲器。每個處理程序?qū)ο罂梢园銈€或多個捕獲器，每個捕獲器都對應(yīng)一種基本操作，每次在代理對象上調(diào)用這些基本操作時，代理可以在這些操作傳播到目標對象之前先調(diào)用捕獲器函數(shù)，從而攔截并修改相應(yīng)的行為。

例如，可以定義一個get()捕獲器，在ECMAscript操作以某種形式調(diào)用get時觸發(fā)。

const company= {   name: 'ebChina' }

 const handler = {   get(){      return 'ebChinaTech'   } }

 const proxy = new Proxy(company, handler)

 console.log(company.name)  //ebChina console.log(proxy.name)  //ebChinaTech

當通過代理對象執(zhí)行get()操作時，就會觸發(fā)定義的get()捕獲器，只有在代理對象上執(zhí)行相應(yīng)操作才會觸發(fā)捕獲器，在目標對象上執(zhí)行這些操作仍然會產(chǎn)生正常的行為。

所有捕獲器都可以訪問相應(yīng)的參數(shù)，基于這些參數(shù)可以重建被捕獲方法的原始行為，但開發(fā)者并不需要手動費時費力重建原始行為，而是可以通過調(diào)用全局Reflect對象上的同名方法來輕松重建。

const company= {   name: 'ebChina' }

 const handler = {   get(){      return Reflect.get(...arguments)   } }

 const proxy = new Proxy(company, handler)

 console.log(company.name)  //ebChina console.log(proxy.name)  //ebChina

通過Proxy代理對象可以攔截對目標對象的13種操作，并通過Reflect對象上相應(yīng)的同名方法重建操作。在此基礎(chǔ)上開發(fā)者可以用最少的代碼修改捕獲的方法，實現(xiàn)對應(yīng)的業(yè)務(wù)邏輯。

例如：通過捕獲get、set和has等操作，可以知道屬性什么時候被訪問、被查詢。把實現(xiàn)相應(yīng)捕獲器的某個對象代理放到應(yīng)用中，可以監(jiān)控這個對象何時在何處被訪問過。

代理的應(yīng)用場景是不可限量的，開發(fā)者使用它可以創(chuàng)建出各種編碼模式，比如跟蹤屬性訪問、隱藏屬性、阻止修改或刪除屬性、函數(shù)參數(shù)驗證、構(gòu)造函數(shù)參數(shù)驗證、數(shù)據(jù)綁定以及可觀察對象。由于proxy的性能比defineproperty好，因此vue3通過使用proxy重寫對象響應(yīng)式的同時，也提升了vue架構(gòu)中高頻使用的數(shù)據(jù)特性的性能，大大提升了開發(fā)體驗。而vue3的其他方面優(yōu)化，例如源碼體積的優(yōu)化以及打包工具的優(yōu)化，則為部署提供了更好的解決方案，也成為超越vue2的前端框架。