手寫Vue 1 物件劫持

2022-06-16 12:54:15 字數 2925 閱讀 9701

1.引入我們手寫的vue 拿到配置資料

import vue from

'../source/src/index';

let vm = new

vue(,

arr: [

1, 2, 3

] }

},computed: ,

watch:

})console.log(vm)

//settimeout(() => , 1000)

2. 新建檔案    source/src/index  

在這個檔案中 我們利用 ——init 這個方法 對 使用者傳入的資料進行初始化 傳入配置資訊

function vue(options)
3. 在_init 方法中 我們可以先將  options 掛載到例項  再進行初始化資料操作 

vue.prototype._init =function (options)
5. 新建 檔案  observe/index 編寫  initstate  方法並且匯出

export function initstate(vm)
在這裡我們可以拿到 vue 的整個例項方法 

6. 在initstate  方法中 我們進行初始化  比如初始化 資料 初始化 計算屬性 初始化 watch 

export function initstate(vm) 

if(options.computed)

if(options.watch)

}

7. 初始化資料 在    initdata  方法中 我們通過 傳入例項的option 拿到資料 再判斷 資料 是 函式 還是 物件 如果是函式 呼叫call 方法 拿到函式 返回值 如何不是直接返回資料 或者 空資料 

let data =vm.$options.data

//判斷是否是函式 取返回值

data = vm._data = typeof data === '

function

' ? data.call(vm) : data || {}

8. 拿到資料後 我們要對資料進行 監聽 編寫   observe  方法 監聽資料 、

function initdata(vm) 

observe(vm._data)

}

10 在  observe 方法中 要進行判斷 看看資料是不是物件或者為空 如果不是 直接返回 如果是 返回乙個  observe 物件 

export function observe(data) 

return

newobserve(data)

}

11. 編寫這個  observe 物件   新建檔案 observe.js

這個檔案裡面最主要的是   object.defineproperty 方法 裡面傳入 data , 還有key  key 代表屬性 所以 我們需要遍歷資料 拿到 所有的 key value 傳入 

class

observe

else

} //將物件的資料使用 defineproperty 重新定義

walk(data)

}}export function definereactive(data, key, value) ,

set(newvalue)

})}export

default observe;

11.  因為 資料裡面 的物件 可能巢狀 乙個物件 所以我們應該在 資料裡面的物件再進行 深度監聽 

12. 測試** 

import vue from

'../source/src/index';

let vm = new

vue(,

arr: [

1, 2, 3

] }

},computed: ,

watch:

})console.log(vm._data.msg)

//hello

列印出100 

13.  這裡每次取值都需要 掛在 _data 上  很 不方便 比如 

vm._data.msg  我們簡化為 vm.msg 

所以 我們可以 利用  proxy ** _data  **應該在 初始化資料 的操作中 監聽資料前

function initdata(vm) 

for (let key in

data)

observe(vm._data)

}

14, 編寫 proxy  方法

function proxy(vm, source, key) ,

set(newvalue) })}

15。測試成功 

import vue from

'../source/src/index';

let vm = new

vue(,

arr: [

1, 2, 3

] }

},computed: ,

watch:

})console.log(vm.msg)

//hello

Vue 9 物件迴圈渲染

在vue中增加物件內容不能通過物件屬性如vm.userinfo.address zj 的方式,應用 一.重新改變物件的引用 vm.userinfo 二.通過vue的set方法向物件中注入資料 vue.set vm.userinfo,address beijing 三.通過vm的例項方法 set vm...

as2 AVM1物件和as3物件的通訊

注意本人遇到的 connection名稱問題,因為實際上是域 名稱,呼叫時有時會找不到,因此在connection名稱前加 更真實的原因是as1.0不支援connection,所以發布時一定要看清楚哈,用flash player6不一定是as2.0 具有不可預知網域名稱的不同域。有時候,可能希望具有...

MATLAB神經網路1 物件

神經網路屬性 通用資訊 name 名字 userdata 使用者定義的資訊 子物件資訊 輸入 層 輸出 目標 偏置 權重 連線形式 numinputs 網路接收輸入的數量 我的理解是定義多少個樣本,這裡多個樣本同時輸入算乙個輸入嗎?根據簡單的實驗,應該是多個樣本組成乙個矩陣也算是乙個輸入,但是組成元...