欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

談談因Vue.js引發(fā)關(guān)于getter和setter的思考

 更新時間:2016年12月02日 09:04:31   投稿:daisy  
最近因為公司的新項目決定使用Vue.js來做,但在使用的過程中發(fā)現(xiàn)了一個有趣的事情,因為發(fā)現(xiàn)的這個事情展開了一些對于getter和setter的思考,具體是什么下面通過這篇文章來一起看看吧,有需要的朋友們可以參考學習。

起因

當我打印出Vue實例下的data對象里的屬性時,發(fā)現(xiàn)了一個有趣的事情:

它的每個屬性都有兩個相對應的getset方法,我覺的這是多此一舉的,于是去網(wǎng)上查了查Vue雙向綁定的實現(xiàn)原理,才發(fā)現(xiàn)它和Angular.js雙向綁定的實現(xiàn)原理完全不同,Angular是用的數(shù)據(jù)臟檢測,當Model發(fā)生變化,會檢測所有視圖是否綁定了相關(guān)數(shù)據(jù),再更改視圖。而Vue使用的發(fā)布訂閱模式,是點對點的綁定數(shù)據(jù)。

Vue的數(shù)據(jù)綁定只有兩個步驟,compile=>link。

我一直在想,vue是通過什么去監(jiān)聽用戶對Model的修改,直到我發(fā)現(xiàn)Vue的data里,每個屬性都有setget屬性,我才明白過來。

在平時,我們創(chuàng)建一個對象,并修改它的屬性,是這樣的:

 var obj = {
  val:99
 }
 obj.val = 100;
 console.log(obj.val)//100

沒有任何問題,但是如果要你去監(jiān)測,當我修改了這個對象的屬性時,要去做一些事,你會怎么做?

相關(guān)思考

這就要用到gettersetter了。

假設我現(xiàn)在要給一個碼農(nóng)對象添加一個name屬性,而且每次更新name屬性時,我要去完成一些事,我們可以這樣做:

 var Coder = function() {
  var that = this;
  return {
   get name(){
    if(that.name){
     return that.name
    }
    return '你還沒有取名'
   },
   set name(val){
    console.log('你把名字修成了'+val)
    that.name = val
   }
  }
 }
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

輸出:

你會發(fā)現(xiàn)這個對象和最上面的Vue中的data對象,打印出來的效果是一樣的,都擁有getset屬性。

我們來一步步分析下上面的代碼,很有趣。

我們先創(chuàng)建一個對象字面量:

var Coder = function() {...}

再把this緩存一下:

var that = this;

接下來是最重要的,我們return了一個對象回去:

{

  get name(){...},

  set name(val){...}

}

顧名思義,get為取值,set為賦值,正常情況下,我們?nèi)≈岛唾x值是用obj.prop的方式,但是這樣做有一個問題,我如何知道對象的值改變了?所以就輪到set登場了。

你可以把getset理解為function,當然,只是可以這么理解,這是完全不一樣的兩個東西。

接下來創(chuàng)建一個碼農(nóng)的實例,isMe;此時,isMe是沒有name屬性的,當我們調(diào)用isMe.name時,我們會進入到get name(){...}中,先判斷isMe是否有name屬性,答案是否定的,那麼就添加一個name屬性,并給它賦值:"你還沒有取名";如果有name屬性,那就返回name屬性。

看到這里你一定知道get怎么使用了,對,你可以把get看成一個取值的函數(shù),函數(shù)的返回值就是它拿到的值。

我感覺比較重要的是set屬性,當我給實例賦值:

isMe.name="周神"

此時,會進入set name(val){...};形參val就是我賦給name屬性的值,在這個函數(shù)里,我就可以做很多事了,比如雙向綁定!因為這個值的每次改變都必須經(jīng)過set,其他方式是改變不了它的,相當于一個萬能的監(jiān)聽器。

還有另一種方法可以實現(xiàn)這個功能。

ES5的對象原型有兩個新的屬性__defineGetter____defineSetter__ ,專門用來給對象綁定get和set。

可以這樣書寫:

 var Coder = function() {
 }
 Coder.prototype.__defineGetter__('name', function() {
  if (this.name) {
   return this.name
  }else{
   return '你還沒有取名'
  }
 })
 Coder.prototype.__defineSetter__('name', function(val) {
  this.name = val
 })
 var isMe = new Coder()
 console.log(isMe.name)
 isMe.name = '周神'
 console.log(isMe.name)
 console.log(isMe)

效果是一樣的,建議使用下面這種方式,因為是在原型上書寫,所以可以繼承和重用。

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

相關(guān)文章

  • vue3解決各場景l(fā)oading過度的五種方法

    vue3解決各場景l(fā)oading過度的五種方法

    這篇文章主要為大家詳細介紹了vue3中解決各場景l(fā)oading過度的五種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以學習一下
    2023-11-11
  • vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作

    vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作

    這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回數(shù)組的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue用遞歸組件寫樹形控件的實例代碼

    vue用遞歸組件寫樹形控件的實例代碼

    最近在vue項目中遇到需要用樹形控件的部分,比如導航目錄是不確定的,所以必須要用樹形結(jié)構(gòu),下面腳本之家小編給大家?guī)砹藇ue用遞歸組件寫樹形控件的實例代碼,需要的朋友參考下吧
    2018-07-07
  • Element框架el-tab點擊標簽頁時再渲染問題的解決

    Element框架el-tab點擊標簽頁時再渲染問題的解決

    本文主要介紹了Element框架el-tab點擊標簽頁時再渲染問題的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • 基于Vue實現(xiàn)電商SKU組合算法問題

    基于Vue實現(xiàn)電商SKU組合算法問題

    這篇文章主要介紹了基于Vue實現(xiàn)電商SKU組合算法問題 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue.js?element-plus使用圖標不顯示問題的解決方式

    Vue.js?element-plus使用圖標不顯示問題的解決方式

    近期在學習Vue時用elementUI時發(fā)現(xiàn)圖標在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標不顯示問題的解決方式,需要的朋友可以參考下
    2022-09-09
  • 基于Vue-cli快速搭建項目的完整步驟

    基于Vue-cli快速搭建項目的完整步驟

    這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項目的完整步驟,文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-11-11
  • vue3+ts+echarts實現(xiàn)按需引入和類型界定方式

    vue3+ts+echarts實現(xiàn)按需引入和類型界定方式

    這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue教程之toast彈框全局調(diào)用示例詳解

    vue教程之toast彈框全局調(diào)用示例詳解

    這篇文章主要為大家詳細介紹了vue教程之toast彈框全局調(diào)用示例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • vue項目本地開發(fā)使用Nginx配置代理后端接口問題

    vue項目本地開發(fā)使用Nginx配置代理后端接口問題

    這篇文章主要介紹了vue項目本地開發(fā)使用Nginx配置代理后端接口問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12

最新評論