vue 雙向繫結資料的原理

2021-08-22 15:05:56 字數 442 閱讀 7905

vue能做到雙向繫結資料靠的就是object.defineproperty(),俗稱屬性***。

//例如 平時我們定義乙個引數 是這樣的

var book = ;

console.log(book.name); // 一般的引數

//但是你想在輸出的同時對引數進行一些操作

var book = {}

var name = '';

object.defineproperty(book, 'name', ,

get: function ()

})book.name = '繫結的資料'; // 雙向處理set 繫結的資料

console.log(book.name); // 在其它地方修改引數 輸出時就會是:雙向處理get 繫結的資料

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應用的是mvvm框架,view和model分離,然後通過vm雙向資料繫結,div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結,是怎麼實現的呢,首先vue利用es5的defineproperty方法裡的get,set...

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...