Vue.js響應式原理詳解-js教程-PHP中文網

C# 和隱式的getter/setters" >C# 和隱式的getter/setters

然後Vue 出現了" >然後Vue 出現了

首頁

web前端

js教程

Vue.js響應式原理詳解

小云云

Feb 10, 2018 pm 01:59 PM

javascript vue.js 詳解

自己是Java背景，許多年前剛接觸JavaScript時有點怪怪的，因為它沒有getters 和setters。隨著時間的推移，我開始喜歡這個缺失的特性，因為相較於Java大量的getter## 和

############################## setter#########，它讓程式碼更簡潔。例如，我們看看下面的Java程式碼：#########

<span style="font-size: 14px;">class Person{<br/>    String firstName;<br/>    String lastName;    // 这个Demo中省略了一些构造器代码 :)    public void setFirstName(firstName) {        this.firstName = firstName;<br/>    }    public String getFirstName() {        return firstName;<br/>    }    public void setLastName(lastName) {        this.lastName = lastName;<br/>    }    public String getLastName() {        return lastName;<br/>    }<br/>}// Create instancePerson bradPitt = new Person();<br/>bradPitt.setFirstName("Brad");<br/>bradPitt.setLastName("Pitt");<br/></span>

登入後複製

JavaScript開發人員永遠不會這樣做，相反他們會這樣做：

<span style="font-size: 14px;">var Person = function () {};var bradPitt = new Person();<br/>bradPitt.firstName = &#39;Brad&#39;;<br/>bradPitt.lastName = &#39;Pitt&#39;;<br/></span>

登入後複製

這要簡潔的多。通常簡潔更好，不是嗎？

的確如此，但有時我想取得一些可以被修改的屬性，但我不用知道這些屬性是什麼。例如，我們在Java程式碼中擴充一個新的方法getFullName()#：

<span style="font-size: 14px;">class Person{    private String firstName;    private String lastName;    // 这个Demo中省略了一些构造器代码 :)    public void setFirstName(firstName) {        this.firstName = firstName;<br/>    }    public String getFirstName() {        return firstName;<br/>    }    public void setLastName(lastName) {        this.lastName = lastName;<br/>    }    public String getLastName() {        return lastName;<br/>    }    public String getFullName() {        return firstName + " " + lastName;<br/>    }<br/>}<br/><br/>Person bradPitt = new Person();<br/>bradPitt.setFirstName("Brad");<br/>bradPitt.setLastName("Pitt");// Prints &#39;Brad Pitt&#39;System.out.println(bradPitt.getFullName());<br/></span>

登入後複製

在上面例子中， fullName 是一個計算的屬性，它不是私有屬性，但總是能傳回正確的結果。

C# 和隱式的getter/setters

#我們來看看C# 特性之一：隱含的 getters/setters，我真的很喜歡它。在C# 中，如果需要，你可以定義getters#/setters，但是並不用這樣做，但是如果你決定要這麼做，呼叫者就不必呼叫函數。呼叫者只需要直接存取屬性，getter/setter## 會自動在在鉤子函數中運行：

<span style="font-size: 14px;">public class Foo {    public string FirstName {get; set;}    public string LastName {get; set;}    public string FullName {get { return firstName + " " + lastName }; private set;}<br/>}<br/></span>

登入後複製

我覺得這很酷...

現在，如果我想在JavaScript中實現類似的功能，我會浪費很多時間，例如：

<span style="font-size: 14px;">var person0 = {<br/>    firstName: &#39;Bruce&#39;,<br/>    lastName: &#39;Willis&#39;,<br/>    fullName: &#39;Bruce Willis&#39;,<br/>    setFirstName: function (firstName) {        this.firstName = firstName;        this.fullName = `${this.firstName} ${this.lastName}`;<br/>    },<br/>    setLastname: function (lastName) {        this.lastName = lastName;        this.fullName = `${this.firstName} ${this.lastName}`;<br/>    },<br/>};<br/>console.log(person0.fullName);<br/>person0.setFirstName(&#39;Peter&#39;);<br/>console.log(person0.fullName);<br/></span>

登入後複製

它會印出：

<span style="font-size: 14px;">"Bruce Willis"<br/>"Peter Willis"<br/></span>

登入後複製

##但使用

 #setXXX(value) 的方式並不夠'JavaScripty'(是個玩笑啦)。

下面的方式可以解決這個問題：

<span style="font-size: 14px;">var person1 = {<br/>    firstName: &#39;Brad&#39;,<br/>    lastName: &#39;Pitt&#39;,<br/>    getFullName: function () {        return `${this.firstName} ${this.lastName}`;<br/>    },<br/>};<br/>console.log(person1.getFullName()); // 打印 "Brad Pitt"<br/></span>

登入後複製

現在我們回到被計算過的 getter。你可以設定first 或last name，並且簡單的合併它們的值：

<span style="font-size: 14px;">person1.firstName = &#39;Peter&#39;person1.getFullName(); // 返回 "Peter Pitt"<br/></span>

登入後複製

這的確比較方便，但我還是不喜歡它，因為我們要定義一個叫getxxx()的方法，這也不夠'JavaScripty'。多年來，我一直在思考如何更好的使用 JavaScript。

然後Vue 出現了

在我的Youtube頻道，很多和Vue教程有關的影片都講到，我習慣響應式開發，在更早的Angular1時代，我們叫它：資料綁定(Data Binding)。它看起來很簡單。你只需要在Vue實例的data() 區塊中定義一些數據，並綁定到HTML：

<span style="font-size: 14px;">var vm = new Vue({<br/>    data() {<br/>        return {<br/>        greeting: &#39;Hello world!&#39;,<br/>        };<br/>    }<br/>})<div>{greeting}</div><br/></span>

登入後複製

顯然它會在使用者介面印出「Hello world!」。

現在，如果你改變greeting的值，Vue引擎會回應並相應地更新視圖。

<span style="font-size: 14px;">methods: {<br/>    onSomethingClicked() {        this.greeting = "What&#39;s up";<br/>    },<br/>}<br/></span>

登入後複製

很長一段時間我都在想，它是如何運作的？當某個物件的屬性發生變化時會觸發某個事件？或是Vue不停的呼叫 setInterval 去檢查是否更新？

透過閱讀Vue官方文檔，我才知道，改變一個物件屬性將隱式調用##getter/ setter,再次通知觀察者，然後觸發重新渲染，如下圖，這個例子來自官方的Vue.js文件：

Vue.js響應式原理詳解

但我还想知道：

怎么让数据自带getter/setters？
这些隐式调用内部是怎样的？

第一个问题很简单：Vue为我们准备好了一切。当你添加新数据，Vue将会通过其属性为其添加 getter/setters。但是我让 foo.bar = 3? 会发生什么？

这个问题的答案出现在我和SVG & Vue专家Sarah Drasner的Twitter对话中：

Vue.js響應式原理詳解

Timo: foo.bar=value;是怎么做到实时响应的？
Sarah: 这个问题很难在Twitter说清楚，可以看这篇文章
Timo: 但这篇文章并没有解释上面提到的问题。
Timo: 它们就像：分配一个值->调用setter->通知观察者，不理解为什么在不使用setInterval和Event的情况下，setter/getter就存在了。
Sarah: 我的理解是：你获取的所有数据都在Vue实例data{}中被代理了。

显然，她也是参考的官方文档，之前我也读过，所以我开始阅读Vue源码，以便更好的理解发生了什么。过了一会我想起在官方文档看到一个叫 Object.defineProperty() 的方法，我找到它，如下：

<span style="font-size: 14px;">/**<br/>* 给对象定义响应的属性<br/>*/export function defineReactive (<br/>    obj: Object,<br/>    key: string,<br/>    val: any,<br/>    customSetter?: ?Function,<br/>    shallow?: boolean<br/>) {    const dep = new Dep()    const property = Object.getOwnPropertyDescriptor(obj, key)    if (property && property.configurable === false) {        return<br/>    }    // 预定义getter/setters    const getter = property && property.get    const setter = property && property.set    let childOb = !shallow && observe(val)<br/>    Object.defineProperty(obj, key, {<br/>        enumerable: true,<br/>        configurable: true,        get: function reactiveGetter () {            const value = getter ? getter.call(obj) : val            if (Dep.target) {<br/>                dep.depend()                if (childOb) {<br/>                    childOb.dep.depend()<br/>                }                if (Array.isArray(value)) {<br/>                    dependArray(value)<br/>                }<br/>            }            return value<br/>        },        set: function reactiveSetter (newVal) {            const value = getter ? getter.call(obj) : val            /* 禁用eslint 不进行自我比较 */            if (newVal === value || (newVal !== newVal && value !== value)) {                return<br/>            }            /* 开启eslint 不进行自己比较 */            if (process.env.NODE_ENV !== &#39;production&#39; && customSetter) {<br/>                customSetter()<br/>            }            if (setter) {<br/>                setter.call(obj, newVal)<br/>            } else {<br/>                val = newVal<br/>            }<br/>            childOb = !shallow && observe(newVal)<br/>            dep.notify()<br/>        }<br/>    })<br/>}<br/></span>

登入後複製

所以答案一直存在于文档中：

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

我只想简单的了解 Object.defineProperty() 做了什么，所以我用一个例子简单的给你讲解一下：

<span style="font-size: 14px;">var person2 = {<br/>    firstName: &#39;George&#39;,<br/>    lastName: &#39;Clooney&#39;,<br/>};<br/>Object.defineProperty(person2, &#39;fullName&#39;, {<br/>    get: function () {        return `${this.firstName} ${this.lastName}`;<br/>    },<br/>});<br/>console.log(person2.fullName); // 打印 "George Clooney"<br/></span>

登入後複製

还记得文章开头C#的隐式 getter 吗？它们看起来很类似，但ES5才开始支持。你需要做的是使用 Object.defineProperty() 定义现有对象，以及何时获取这个属性，这个getter被称为响应式——这实际上就是Vue在你添加新数据时背后所做的事。

`Object.defineProperty()`能讓Vue變的更簡化嗎？

學完這一切，我一直在想，#Object.defineProperty() 是否能讓Vue變的更簡化？現今越來越多的新術語，是不是真的有必要把事情變得過於複雜，變的讓初學者難以理解（Redux也是同樣）：

Mutator：或許你在說（隱含）setter
##Getters：為什麼不使用#Object.defineProperty() 替換成（隱式)getter
#store.commit()：為什麼不簡化成foo = bar，而是store.commit("setFoo", bar);？

你是怎麼認為的？ Vuex必須是複雜的還是可以像 Object.defineProperty() 一樣簡單？

相關推薦：

javascript用rem來做響應式開發實例分享

詳解前端響應式佈局、響應式圖片，與自製柵格系統

響應式和自適應有什麼區別

以上是Vue.js響應式原理詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7828

Java教學

1648

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1239

Related knowledge

Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模

linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

Linux的curl指令詳解 Feb 21, 2024 pm 10:33 PM

Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代

深入了解Promise.resolve() Feb 18, 2024 pm 07:13 PM

Promise.resolve()詳解，需要具體程式碼範例Promise是JavaScript中一種用來處理非同步操作的機制。在實際開發中，常常需要處理一些需要依序執行的非同步任務，而Promise.resolve()方法就是用來傳回一個已經Fulfilled狀態的Promise物件。 Promise.resolve()是Promise類別的靜態方法，它接受一個

numpy版本查詢方法詳解 Jan 19, 2024 am 08:20 AM

Numpy是一款Python科學計算庫，提供了豐富的陣列操作函數與工具。升級Numpy版本時需要查詢目前版本以確保相容性，本文將詳細介紹Numpy版本查詢的方法，並提供具體的程式碼範例。方法一：使用Python程式碼查詢Numpy版本使用Python程式碼可以輕鬆查詢Numpy的版本，以下是實作方法和範例程式碼：importnumpyasnpprint(np

詳細解析C語言學習路線 Feb 18, 2024 am 10:38 AM

C語言作為一門廣泛應用在軟體開發領域的程式語言，是許多程式設計師初學者的首選。學習C語言不僅可以幫助我們建立程式設計的基礎知識，還可以提升我們解決問題和思考的能力。本文將詳細介紹一條C語言學習的路線圖，幫助初學者更好地規劃自己的學習進度。 1.學習基本文法在開始學習C語言之前，我們首先需要先了解C語言的基本文法規則。這包括變數和資料類型、運算子、控制語句（如if語句、

See all articles

Vue.js響應式原理詳解

C# 和隱式的getter/setters

然後Vue 出現了

`<span style="font-size: 14px;">Object.defineProperty()</span>`能讓Vue變的更簡化嗎？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

Vue.js響應式原理詳解

C# 和隱式的getter/setters

然後Vue 出現了

<span style="font-size: 14px;">Object.defineProperty()</span>能讓Vue變的更簡化嗎？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

`<span style="font-size: 14px;">Object.defineProperty()</span>`能讓Vue變的更簡化嗎？