狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

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

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

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

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

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

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

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

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

①在目標(biāo)對(duì)象上新增和刪除屬性時(shí)無(wú)法進(jìn)行攔截，因此界面不會(huì)響應(yīng)式地更新。

②通過(guò)下標(biāo)修改數(shù)組元素或是修改數(shù)組的length屬性，也無(wú)法進(jìn)行攔截和響應(yīng)。

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

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

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

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

代理是使用Proxy構(gòu)造函數(shù)創(chuàng)建的，它接收兩個(gè)參數(shù)：目標(biāo)對(duì)象和處理程序?qū)ο螅獎(jiǎng)?chuàng)建空代理可以傳一個(gè)簡(jiǎn)單的對(duì)象字面量作為處理程序?qū)ο螅豢梢匀笔√幚沓绦驅(qū)ο蟆Ｈ缦滤荆诖韺?duì)象上執(zhí)行的任何操作實(shí)際上都會(huì)應(yīng)用到目標(biāo)對(duì)象：

const company= {   name: 'eb' }

 const handler = {}

 const proxy = new Proxy(company, handler)

 //name屬性會(huì)訪問(wèn)同一個(gè)值 console.log(company.name)  //'eb' console.log(proxy.name)  //'eb'

 //給目標(biāo)屬性賦值會(huì)反映在兩個(gè)對(duì)象上 company.name = 'ebChina' console.log(company.name)  //'ebChina' console.log(proxy.name)  //'ebChina'

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

 //嚴(yán)格相等可以用來(lái)區(qū)分代理和目標(biāo) console.log(company=== proxy)  //false

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

例如，可以定義一個(gè)get()捕獲器，在ECMAscript操作以某種形式調(diào)用get時(shí)觸發(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

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

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

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

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

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

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