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

詳解Vue3?中的計算屬性及偵聽器

 更新時間:2022年08月02日 08:37:40   作者:coderwxf  
這篇文章主要介紹了詳解Vue3?中的計算屬性及偵聽器,文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以看下一下

計算屬性

我們知道,在模板中可以直接通過插值語法顯示一些data中的數(shù)據(jù),但是在某些情況,我們可能需要對數(shù)據(jù)進行一些轉(zhuǎn)化后再顯示,或者需要將多個數(shù)據(jù)結(jié)合起來進行顯示

在模板中使用表達式,可以非常方便的實現(xiàn),但是設(shè)計它們的初衷是用于簡單的運算,在模板中放入太多的邏輯會讓模板過重和難以維護,并且如果多個地方都使用到,那么會有大量重復(fù)的代碼

所以我們希望將業(yè)務(wù)邏輯和UI界面進行分離,其中一種方式就是將邏輯抽取到一個method中,但這種做法有以下弊端

  • 所有的data使用過程都會變成了一個方法的調(diào)用
  • 多次獲取數(shù)據(jù),需要多次調(diào)用方法,執(zhí)行對應(yīng)的邏輯,沒有緩存

事實上,對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯,你都應(yīng)該使用計算屬性

<div id="app">
  <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 -->
  <h2>{{ fullname }}</h2>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        firstname: 'Klaus',
        lastname: 'Wang'
      }
    },
    computed: {
      fullname() {
        return this.firstname + ' ' + this.lastname
      }
    }
  }).mount('#app')

緩存

計算屬性會基于它們的依賴關(guān)系進行緩存,在數(shù)據(jù)不發(fā)生變化時,計算屬性是不需要重新計算的

但是如果依賴的數(shù)據(jù)發(fā)生變化,在使用時,計算屬性依然會重新進行計算

并且界面會使用最新的計算屬性的值進行重新渲染

getter 和 setter

計算屬性在大多數(shù)情況下,只需要一個getter方法即可,所以我們會將計算屬性直接寫成一個函數(shù)

<div id="app">
  <!-- 計算屬性的使用和普通狀態(tài)的使用方式是一致的 -->
  <h2>{{ fullname }}</h2>
  <button @click="change">change</button>
</div>
<script>
  Vue.createApp({
    data() {
      return {
        firstname: 'Klaus',
        lastname: 'Wang'
      }
    },
    methods: {
      change() {
        this.fullname = 'Alex Li'
      }
    },
    computed: {
      // 計算屬性的完整寫法
      fullname: {
        get() {
          return this.firstname + ' ' + this.lastname
        },
        set(v) {
          this.firstname = v.split(' ')[0]
          this.lastname = v.split(' ')[1]
        }
      }
    }
  }).mount('#app')
</script>

偵聽器

在data返回的對象中定義了數(shù)據(jù),這個數(shù)據(jù)通過插值語法等方式綁定到template中,當(dāng)數(shù)據(jù)變化時,template會自動進行更新來顯示最新的數(shù)據(jù)

但是在某些情況下,我們希望在代碼邏輯中監(jiān)聽某個數(shù)據(jù)的變化,這個時候就需要用偵聽器watch來完成了

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // 可以使用watch監(jiān)聽響應(yīng)式數(shù)據(jù)的改變
    // 對應(yīng)有兩個參數(shù)
    // 參數(shù)一 --- 新值
    // 參數(shù)二 --- 舊值
    info(newV, oldV) {
      // 如果監(jiān)聽的值是對象,獲取到的新值和舊值是對應(yīng)對象的代理對象
      console.log(newV, oldV)

      // 代理對象 轉(zhuǎn) 原生對象
      // 1. 使用淺拷貝獲取一個新的對象,獲取的新的對象為原生對象
      console.log({...newV})

      // 2. 使用Vue.toRaw方法獲取原生對象
      console.log(Vue.toRaw(newV))
    }
  },
  methods: {
    change() {
      this.info = {
        name: 'Steven'
      }
    }
  }
}).mount('#app')

配置選項

屬性說明
deep是否開啟深度監(jiān)聽
值為boolean
未開啟的時候,如果監(jiān)聽的是對象,那么只有對象的引用發(fā)生改變的時候,才會觸發(fā)watch回調(diào)
開始后,如果監(jiān)聽的是對象,那么只要對象中的任意一個屬性發(fā)生了改變,就會觸發(fā)watch回調(diào)
immediate是否立即開始監(jiān)聽
默認(rèn)情況下,初次渲染是不會觸發(fā)watch監(jiān)聽,只有當(dāng)值發(fā)生改變后,才會觸發(fā)watch監(jiān)聽
將immediate設(shè)置為true后,初次渲染也會觸發(fā)watch監(jiān)聽,此時oldValue的值為undefined
Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 開啟了深度監(jiān)聽后,當(dāng)info的屬性發(fā)生改變的時候,就會觸發(fā)對應(yīng)的watch回調(diào)
      // 注意: 和直接修改info引用不同的是,如果直接修改的是對象的屬性
      // 那么此時newV和oldV是同一個對象的引用, 此時也就獲取不到對應(yīng)的舊值
      handler(newV, oldV) {
        console.log(newV, oldV)
        console.log(newV === oldV)  // => true
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

其它寫法

直接監(jiān)聽對象屬性

watch: {
  'info.name'(newV, oldV){
    console.log(newV, oldV)
  }
}

字符串寫法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // watch的值如果是一個字符串的時候
    // 會自動以該字符串作為函數(shù)名去methods中查找對應(yīng)的方法
    'info.name': 'watchHandler'
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(newV, oldV){
      console.log(newV, oldV)
    }
  }
}).mount('#app')

數(shù)組寫法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    'info.name': [
      'watchHandler',

      function handle() {
        console.log('handler2')
      },

      {
        handler() {
          console.log('handler3')
        }
      }
    ]
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    },
    watchHandler(){
      console.log('handler1')
    }
  }
}).mount('#app')

$watch

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  created() {
    /*
          $watch 參數(shù)列表
            參數(shù)一 --- 偵聽源
            參數(shù)二 --- 偵聽回調(diào)
            參數(shù)三 --- 配置對象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

到此這篇關(guān)于詳解Vue3 中的計算屬性及偵聽器的文章就介紹到這了,更多相關(guān)Vue偵聽器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 基于vue+canvas的excel-like組件實例詳解

    基于vue+canvas的excel-like組件實例詳解

    a vue component,基于vue的表格組件,主要解決大數(shù)據(jù)量的表格渲染性能問題,使用canvas繪制表格,同時支持類似excel的批量選中,復(fù)制黏貼刪除,實時編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下
    2017-11-11
  • VUE實現(xiàn)吸底按鈕

    VUE實現(xiàn)吸底按鈕

    這篇文章主要為大家詳細(xì)介紹了VUE實現(xiàn)吸底按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • 父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法

    父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法

    這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時更新并渲染的完美解決方法,需要的朋友可以參考下
    2018-04-04
  • VueJs中的shallowRef與shallowReactive函數(shù)使用比較

    VueJs中的shallowRef與shallowReactive函數(shù)使用比較

    這篇文章主要為大家介紹了VueJs中的shallowRef與shallowReactive函數(shù)的使用比較解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • Vue中的ESLint配置方式

    Vue中的ESLint配置方式

    這篇文章主要介紹了Vue中的ESLint配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue3?TS?vite?element?ali-oss使用教程示例

    vue3?TS?vite?element?ali-oss使用教程示例

    這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • 解決vuecli3中img src 的引入問題

    解決vuecli3中img src 的引入問題

    這篇文章主要介紹了解決vuecli3中img src 的引入問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件

    基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件

    這篇文章主要介紹了基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • vue自定義組件search-box示例詳解

    vue自定義組件search-box示例詳解

    這篇文章主要介紹了vue自定義組件search-box,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • Vue的異步渲染axios問題

    Vue的異步渲染axios問題

    這篇文章主要介紹了Vue的異步渲染axios問題,具有很好的參考價值,希望對大家有所幫助。
    2023-03-03

最新評論