Vue3中的計(jì)算屬性及偵聽器如何使用

這篇文章主要介紹“Vue3中的計(jì)算屬性及偵聽器如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue3中的計(jì)算屬性及偵聽器如何使用”文章能幫助大家解決問題。

計(jì)算屬性

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

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

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

• 所有的data使用過程都會(huì)變成了一個(gè)方法的調(diào)用

• 多次獲取數(shù)據(jù)，需要多次調(diào)用方法，執(zhí)行對(duì)應(yīng)的邏輯，沒有緩存

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

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

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

緩存

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

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

并且界面會(huì)使用最新的計(jì)算屬性的值進(jìn)行重新渲染

getter 和 setter

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

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

偵聽器

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

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

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

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

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

配置選項(xiàng)

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 開啟了深度監(jiān)聽后，當(dāng)info的屬性發(fā)生改變的時(shí)候，就會(huì)觸發(fā)對(duì)應(yīng)的watch回調(diào)
      // 注意: 和直接修改info引用不同的是，如果直接修改的是對(duì)象的屬性
      // 那么此時(shí)newV和oldV是同一個(gè)對(duì)象的引用, 此時(shí)也就獲取不到對(duì)應(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)聽對(duì)象屬性

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

字符串寫法

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // watch的值如果是一個(gè)字符串的時(shí)候
    // 會(huì)自動(dòng)以該字符串作為函數(shù)名去methods中查找對(duì)應(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ù)三 --- 配置對(duì)象
        */
    this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
      immediate: true
    })
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

關(guān)于“Vue3中的計(jì)算屬性及偵聽器如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。