Vue 動態(tài)數(shù)據(jù)綁定核心方法

Kyxy 發(fā)布于2019-08-20 14:35 / 3251人閱讀

摘要：返回值返回傳入函數(shù)的對象，即第一個參數(shù)。描述該方法允許精確添加或修改對象的屬性。數(shù)據(jù)描述符同時具有以下可選鍵值該屬性對應的值。該方法返回值被用作屬性值。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。

引言

我之前經常使用 Vue，后來不滿足于僅僅使用它，我想了解其內部實現(xiàn)原理，所以就嘗試學習其源碼，獲益匪淺。所以，如果你跟我一樣，希望挑戰(zhàn)這高難度的事情，那就開啟這一系列吧！

基本上 MVVM 數(shù)據(jù)雙向綁定的框架大都采用了大量的 Object.defineProperty 來實現(xiàn)。

Object.defineProperty 語法

Object.defineProperty(obj, prop, descriptor)

參數(shù):

obj

??????需要定義屬性的對象。

prop

??????需定義或修改的屬性的名字。

descriptor

??????將被定義或修改的屬性的描述符。

返回值

??????返回傳入函數(shù)的對象，即第一個參數(shù)obj。

描述

該方法允許精確添加或修改對象的屬性。一般情況下，我們?yōu)閷ο筇砑訉傩允峭ㄟ^賦值來創(chuàng)建并顯示在屬性枚舉中（for...in 或 Object.keys 方法），但這種方式添加的屬性值可以被改變，也可以被刪除。而使用 Object.defineProperty() 則允許改變這些額外細節(jié)的默認設置。例如，默認情況下，使用 Object.defineProperty() 增加的屬性值是不可改變的。

對象里目前存在的__屬性描述符__有兩種主要形式：數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數(shù)功能來描述的屬性。描述符必須是兩種形式之一；不能同時是兩者。

數(shù)據(jù)描述符和存取描述符均具有以下可選鍵值：

configurable

??????當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能夠被改變，也能夠被刪除。默認為 false。

enumerable

??????當且僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中。默認為 false。

數(shù)據(jù)描述符同時具有以下可選鍵值：

value

??????該屬性對應的值?？梢允侨魏斡行У?JavaScript 值（數(shù)值，對象，函數(shù)等）。默認為 undefined。

writable

??????當且僅當該屬性的 writable 為 true 時，該屬性才能被賦值運算符改變。默認為 false。

存取描述符同時具有以下可選鍵值：

get

??????一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。該方法返回值被用作屬性值。默認為 undefined。

set

??????一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認為 undefined。

GPU云服務器云服務器 django vue 數(shù)據(jù)綁定 vue綁定 js動態(tài)綁定數(shù)據(jù) vue綁定內聯(lián)樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/81760.html

VUE

摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現(xiàn)自定義指令注冊完成。 vue Vue.js 構建數(shù)據(jù)驅動的web界面庫。集中實現(xiàn)MVVM 的 VM層。容易與其他庫或項目整合通過盡可能簡單的API實現(xiàn)相應的數(shù)據(jù)綁定和組合的視圖組件核心：相應的數(shù)據(jù)綁定系統(tǒng)，數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅動的視圖，普通的HTML模板中使用特殊的語...

bergwhite 2019-08-19 18:39 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數(shù)據(jù)驅動的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量數(shù)據(jù)綁定指令插件化架構從傳統(tǒng)后臺MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
詳解vue組件三大核心概念

摘要：前言本文主要介紹屬性事件和插槽這三個基礎概念使用方法及其容易被忽略的一些重要細節(jié)。至于如何改變，我們接下去詳細介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅動。前言本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節(jié)。如果你閱讀別人寫的組件，也可以從這三個部分展開，它們...

rickchen 2019-08-23 17:51 評論0 收藏0
vue 學習小結送給新手

摘要：只要數(shù)據(jù)發(fā)生改變，立即更新，由表單等帶來的數(shù)據(jù)改變，數(shù)據(jù)相應字段也會發(fā)生相應改變。三界面的更新的輸入，導致的值更新，元素內，任何表達式與有關的，都將重新計算，斌企鵝自動更新界面。作為組件化思維的先驅當年統(tǒng)計的組件多達多個。 Vue 是現(xiàn)在最火的前端JavaScript 開發(fā)框架。首先，接受它的思想 View 模板即html，靜態(tài)界面Model 數(shù)據(jù)源模型界面所有的數(shù)據(jù)負責提供及管理...

terasum 2019-08-20 10:42 評論0 收藏0