vue2中使用的是object.defineproperty()通過劫持物件的屬性資料的變化進行監聽繫結的，
但對陣列的變化監聽不到，所以vue2對陣列的原型物件進行了重寫：
//src/core/observer/array.js
//獲取陣列的原型array.prototype，上面有我們常用的陣列方法
const arrayproto =array.prototype
//建立乙個空物件arraymethods，並將arraymethods的原型指向array.prototype
export const arraymethods =object.create(arrayproto)
//列出需要重寫的陣列方法名
const methodstopatch =[
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse']
//遍歷上述陣列方法名，依次將上述重寫後的陣列方法新增到arraymethods物件上
methodstopatch.foreach(function
(method) 就是重寫後的方法
def(arraymethods, method, function
mutator (...args)
if(inserted) ob.observearray(inserted)
//將當前陣列的變更通知給其訂閱者
ob.dep.notify()
//最後返回執行結果result
return
result
})})
實踐過程中發現：
'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'這些重寫過的方法使用時，vue2中陣列資料有進行實時的更新，但使用下標方式（arr[0] = 'sss'）、直接修改陣列長度arr.length = 1這兩種方式雖然改變了原陣列，但此時vue檢測不到陣列變化，也不會更新檢視；使用watch中的 deep: true 也無效。
解決方法：
this.arr[0] = 'sss' 改寫為 this.$set(this.arr, 0, 'sss')
this.arr.length = 1 改寫為 const temp = this.arr.length - 1；this.arr.splice(1, temp)vu3 陣列中沒有上述問題， 因為使用的是 proxy，陣列變化都可以監聽得到。
vue jsx 雙向繫結 陣列 vue雙向繫結
主要功能是下面2個 1 def設定proxy 2 observe觀察資料 function initdata vm if isplainobject data warn data functions should return an object n vm var keys object.keys ...
vue中的雙向繫結
我參考了這篇文章 vue.js雙向繫結的實現原理.其實用事件 就可以實現類似雙向繫結的效果,原理是當檢測到資料改動時會觸發乙個keyup事件或者表單的change事件,通過監聽這個事件做出響應,對應改變dom的內容.如下 通過在輸入框裡面輸入內容,內容會在右邊同步顯示或改變.需要注意的是,react...
vue 單相繫結 Vue的單向繫結和雙向繫結
1 單向繫結 單向資料繫結的實現思路 所有資料只有乙份 一旦資料變化，就去更新頁面 只有data dom，沒有dom data 若使用者在頁面上做了更新，就手動收集 雙向繫結是自動收集 合併到原有的資料中。單項繫結 如下 html 2 雙向繫結 資料的雙向繫結是vue實現的一大功能。使用v mode...