Vue實(shí)現(xiàn)MVVM的方法是什么

今天小編給大家分享一下Vue實(shí)現(xiàn)MVVM的方法是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1. Object.defineProperty() 定義屬性

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

①、使用說明

Object.defineProperty(obj,props)

第一個(gè)參數(shù)是將被添加或者修改的屬性的對象

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

{

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

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

}

②、屬性的getter和setter

• 一般用于局部變量

• 給構(gòu)造函數(shù)添加屬性

// get和set的方法不能和value以及writable一起使用
var o ={},
Object.defineProperty(o,'p',{
 get(){
   console.log('調(diào)用屬性后輸出')
 },
   set(val){
   console.log(val+'賦值屬性的時(shí)候調(diào)用')
   }
})
o.p // '調(diào)用屬性后輸出'
o.p = 'hcc' //hcc賦值屬性的時(shí)候調(diào)用
// 可以根據(jù)Object.getOwnPropertyDescriptor(對象, '屬性名')得到相應(yīng)的屬性配置

// 需求
//給一個(gè)對象的屬性值不能超過30，超過30的按照30來算
var hcc = {} //全局對象
{
 var age = null //局部變量
 Object.defineProperty(hcc,'age',{
   get(){
     return age //設(shè)置hcc.age的值
   },
   set(val){
     age= val> 30?30:val //當(dāng)賦值給hcc.age的值進(jìn)行判定從而改變局部變量age的值 
   }  
 })
}

③、使用場景

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

細(xì)節(jié)

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

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

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

解析： 為什么會(huì)出現(xiàn)堆溢棧呢 ？ 我們在調(diào)用 obj.a = 'ff' 的時(shí)候，觸發(fā)了set()方法，從而執(zhí)行了obj.a = value，又給obj.a進(jìn)行了賦值，調(diào)用set()方法，進(jìn)入了死循環(huán)。

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

// 局部變量，以一個(gè)變量為軀殼，設(shè)置返回值。
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
 }
})

總結(jié)： Vue中進(jìn)行雙向綁定就是通過私有變量data實(shí)現(xiàn)的。是不是和Vue的結(jié)構(gòu)很相似。

實(shí)現(xiàn)Vue的雙向綁定

• 實(shí)現(xiàn)改變元素的值的時(shí)候，dom進(jìn)行相應(yīng)的更新數(shù)據(jù)。

• dom的值進(jìn)行更新的時(shí)候，元素的值同時(shí)也改變。

html部分

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

js部分

// 改變input的值得同時(shí)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]'))

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上就是“Vue實(shí)現(xiàn)MVVM的方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注億速云行業(yè)資訊頻道。