點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

Vue的MVVM實現方法

來源：懂視網責編：小采時間：2020-11-27 22:32:37

Vue的MVVM實現方法

Vue的MVVM實現方法:本文介紹了Vue的MVVM實現方法，分享給大家，具體如下： 1. Object.defineProperty() 定義屬性用意：給一個對象定義屬性，那個屬性原來是不存在的。這是一個初衷，屬性是不存在的，需要額外添加。 ①、使用說明 Object.defineProperty

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue的MVVM實現方法:本文介紹了Vue的MVVM實現方法，分享給大家，具體如下： 1. Object.defineProperty() 定義屬性用意：給一個對象定義屬性，那個屬性原來是不存在的。這是一個初衷，屬性是不存在的，需要額外添加。 ①、使用說明 Object.defineProperty

本文介紹了Vue的MVVM實現方法，分享給大家，具體如下：

1. Object.defineProperty() 定義屬性

用意：給一個對象定義屬性，那個屬性原來是不存在的。這是一個初衷，屬性是不存在的，需要額外添加。

①、使用說明

Object.defineProperty(obj,props)

第一個參數是將被添加或者修改的屬性的對象

第二個參數是一個對象，表示將要添加的一個或多個鍵值對一直要添加屬性的具體配置

{

'屬性名':{value:'...',writable:true},

'屬性名':{value:'...',writable:true}

}

②、屬性的getter和setter

一般用于局部變量

給構造函數添加屬性

// get和set的方法不能和value以及writable一起使用
var o ={},
Object.defineProperty(o,'p',{
 get(){
 console.log('調用屬性后

輸出') }, set(val){ console.log(val+'賦值屬性的時候調用') } }) o.p // '調用屬性后輸出' o.p = 'hcc' //hcc賦值屬性的時候調用 // 可以根據Object.getOwnPropertyDescriptor(對象, '屬性名')得到相應的屬性配置 // 需求 //給一個對象的屬性值不能超過30，超過30的按照30來算 var hcc = {} //全局對象 { var age = null //局部變量 Object.defineProperty(hcc,'age',{ get(){ return age //設置hcc.age的值 }, set(val){ age= val> 30?30:val //當賦值給hcc.age的值進行判定從而改變局部變量age的值 } }) }

③、使用場景

 // 簡單的給元素添加屬性
 var obj = {name:'hcc'}
 Object.defineProperties(obj,{
 'name':{value:'haaaaa',writable:true},
 'age':{value:24,writable:false}
 })

細節

今天樓主上午在思考，一般使用Object.defineProperty()為什么需要使用局部變量呢？

所有樓主就下了下面的代碼

var obj = {}
Object.defineProperty(obj,'a',{
 get() {
 return 'gg';
 },
 set(value) {
 obj.a = value;
 }
})

解析：為什么會出現堆溢棧呢？我們在調用 obj.a = 'ff' 的時候，觸發了set()方法，從而執行了obj.a = value，又給obj.a進行了賦值，調用set()方法，進入了死循環。

總結：所以我們在使用Object.defineProperty()的時候，都是通過一個私有變量或者一個局部變量來實現對象的屬性的賦值和設置。

// 局部變量，以一個變量為軀殼，設置返回值。
const obj = {}
{
 let bValue;
 Object.defineProperty(obj,'a',{
 get(){
 return bValue
 },
 set(value) {
 bValue = value;
 }
})
}
// 私有變量
const obj = {
 _data: {
 a: null
 }
}
Object.defineProperty(obj,'a', {
 get() {
 return obj._data.a
 },
 set(value) {
 obj._data.a = value
 }
})

總結： Vue中進行雙向綁定就是通過私有變量data實現的。是不是和Vue的結構很相似。

實現Vue的雙向綁定

實現改變元素的值的時候，dom進行相應的更新數據。

dom的值進行更新的時候，元素的值同時也改變。

html部分

<div class="forms">
 <span>姓名</span> <input type='text' name="name">
 <span>年齡</span> <input type='text' name="age">
</div>

js部分

// 改變input的值得同時obj的值改變
const obj = {
 _data: {
 name: null,
 age: null
 }
}
const nameInput = document.querySelector('input[name]')
nameInput.addEventListener('input', (e) => {
 obj._data.name = e.target.value;
})
Object.definePeoperty(obj,'a',{
 get() {
 return obj._data.name
 },
 set(value) {
 nameInput.value = value;
 obj._data.name = value;
 }
})

// 簡化
function bind(obj,dom) {
 let name = dom.getAttribute('name');
 Object.defineProperty(obj,name,{
 get() {
 return obj._data[name]
 },
 set(value) {
 dom.value = value;
 obj._data[name] = value;
 }
 })
 dom.addEventListener('input', (e) => {
 obj._data[name] = e.target.value;
 })
}
bind(obj,document.querySelector('input[name=name]'))
bind(obj,document.querySelector('input[name=age]'))

缺點：必須要事先的綁定dom。是不是和Vue里面的很想，必須事先申明data中的數據，如果需要額外的添加數據的時候，必須通過Vue.set()來申明。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue的MVVM實現方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法 VUE 實現

熱門焦點

Vue的MVVM實現方法

Vue的MVVM實現方法

Vue的MVVM實現方法

最新推薦

猜你喜歡

熱門推薦