一步一步實現Vue資料繫結

2021-10-02 23:58:22 字數 2342 閱讀 2602

這階段**git位址如下:github.com/ace7523/vue… 因為我學習的習慣就是一步一步的從簡到繁增加功能,大家看時候對應的看提交版本的,這部分**對應的是第一次commit。

作用是 import 引用依賴時候優先在指定目錄下尋找,找不到的話再去node_modules中尋找。

es6的export 和 export default 的區別:

答: export default 乙個檔案只能有乙個, 引用時候 import *** from …

export 乙個檔案中可以有多個,引用時候用 import from …

2 vue 物件資料劫持

先來提兩個問題,1,vue是資料驅動的這句話怎麼理解? 2,如何實現資料驅動?

答: 資料驅動我個人理解是,資料優先,只要資料變了,頁面就跟著變化,而不用再去想著這個資料應該和頁面中哪個dom位置相關,再手動去改。

答:對資料進行劫持,比如乙個var a = 10 ,當讀取a的值時候,知道在讀取,當給a賦值操作時候,又知道在賦值。這就是對資料的劫持。

因為完整**位址我都有提供,所以就截圖來看關鍵的點

1 建立自己的vue例項

2 利用 object.defineproperty 對上圖中data方法返回的物件進行資料劫持,先來看一下劫持之前的資料表徵:

寫資料劫持的方法

這段**也很容易理解,就是利用了一下object.defineproperty,把物件的每個屬性的get和set重新寫了一遍。這麼做之後,我們再列印data資料看一下:

可以看出,name age testobj,分別都擁有了get和set屬性,那麼這個是幹嘛用的呢?再來修改一點**,如下

執行一下下面的語句就知道了(解釋一下_data, data的值掛在的vm例項的_data上)

console.log( vm._data.name )

複製**

列印結果如下:

這就表明了,在想要讀取name屬性的值,之前,先列印的語句,也就是,實現資料劫持。同理,設定也是一樣。

3 完善上述的劫持,因為物件內部還包含物件的這種情況**中沒有實現

這次列印結果如下,testobj物件內部的物件,也擁有的set 和 get

4 把vm._data **到 vm 上,一邊以後取值直接 vm.name 拿到的就是vm._data.name

就是通過這樣乙個方法實現的,大家自己看下就好

5 小結

這階段**不難,其實分開一步步來看的話,每一階段都不難,難得是,後面說到依賴收集的時候,不記得這段的邏輯了,所以一定要好好消化。

3 vue 陣列資料劫持

為什麼要對陣列做一次特殊的劫持呢?因為就目前的物件劫持成程度,無法監聽到陣列push了乙個元素,舉個例子:如下圖測試一下

看看列印結果:

從這個結果中可以看出,只觸發了一次get,沒有set。 get是在vm.arr , 這個過程觸發的,因為讀取arr的值就會觸發get。 列印出的4是陣列的push方法返回的值。(ps:陣列push返回變化後的陣列長度)

那這種情況肯定不是我們想要的,比如頁面根據陣列中元素個數來渲染按鈕,但是陣列中元素是介面動態返回的,雖然陣列已經是劫持過的,但是新增元素時候,我們不知道這個陣列新增了,那就不行了。

修改如下 在資料劫持的observer 建構函式中 針對陣列重新封裝劫持方法

arraymethods observerarray這兩個方法寫在了另外乙個array.js檔案中。稍微解釋一下,就是說在進行資料劫持的時候,發現是陣列的話,就先改變陣列的原型指向,然後再對這個陣列進行劫持。下面用**來解釋

其實更通俗一點的說,就是要重寫陣列的push等方法,要求既要保留原來的push方法全部,又要有所增加。(限定只是被劫持的陣列元素的原型方法重新寫,而不是直接改變array.prototype) 那要怎麼實現?就像下面那樣實現

// 列印結果是 [1,2,3,4]

複製**

所以還是以push為例子,push(4),那麼此時 inserted = [4], 就表示對原來的那個[1,2,3]的陣列arr,改變arr,讓arr變成了[1,2,3,4] , 那麼我們肯定要對這個新增加的元素 進行 劫持,這才能夠是陣列一直都是響應式的。也就是增加如下**

因為inserted是陣列,所以對他進行遍歷,要對新增加的每一項都要重新進行劫持。

好了,來增加一些**來測試一下本部分增加的功能點吧。

執行結果如下

小結 這一部分是增加了對於初始化vue例項中data引數中的陣列進行劫持。 其實也不難,但是卻很難用文章的形式把這部分講出來,不過我的這部分**位址也貼出來了,大家down下來自己看看就會清楚其中的原理。

這裡提一下 vue 的資料劫持是有缺點的 1 不能對陣列的索引進行監控 2 arr.length = 0 這種情況也沒有監控到。 反正有個印象就行。

vue 一步一步來

cnpm install g vue cli vue init webpack my project cd my project cnpm install cnpm run dev安裝過程有提示你選擇技術棧 project name f7 vue demo project description a...

一步一步實現FormsAuthentic驗證登入

本文不講原理,只講用法,原理性的東西網上特別多,不過還是會對一些要用到的東西進行解釋,不深入講原理。本文中用的是vs2012 net mvc 4.0。原理看這篇文章 看完這個文章絕對受益匪淺。說下登入的整個流程 使用者輸入賬號密碼 點選提交 資料提交到後台控制器 去資料庫取得使用者資料 如果登入成功...

一步一步 Sql Azure

一步一步 sql azure 1.使用 windowsazure 平台賬號登陸 2.新建sqlazure server 3.新建資料庫 4.為sql azure server 新增防火牆規則,只有將本機新增到規則裡才能從本機連線到該sqlazure server 5.連線到sql azure ser...