Vue3中的計算屬性及偵聽器怎麼使用

計算屬性

我們知道，在模板中可以直接透過插值語法顯示一些data中的數據，但是在某些情況，我們可能需要對數據進行一些轉換後再顯示，或者需要將多個資料結合起來進行顯示

在模板中使用表達式，可以非常方便的實現，但是設計它們的初衷是用於簡單的運算，在模板中放入太多的邏輯會讓模板過重和難以維護，如果多個地方都使用到，那麼會有大量重複的程式碼

所以我們希望將業務邏輯和UI介面進行分離，其中一種方式就是將邏輯抽取到一個在method中，但這種做法有以下弊端

• 所有的data使用過程都會變成了一個方法的呼叫

• ##多次取得數據，需要多次調用方法，執行對應的邏輯，沒有緩存

事實上，

對於任何包含響應式數據的複雜邏輯，你都應該使用計算屬性

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3>{{ fullname }}</h3>
</div>

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

快取

計算屬性會基於它們的依賴關係進行緩存，在資料不發生變化時，計算屬性是不需要重新計算的

#但是如果依賴的資料會發生變化，在使用時，計算屬性仍會重新進行計算

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

getter 和setter

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

<div id="app">
  <!-- 计算属性的使用和普通状态的使用方式是一致的 -->
  <h3>{{ fullname }}</h3>
  <button @click="change">change</button>
</div>
<script>
  Vue.createApp({
    data() {
      return {
        firstname: &#39;Klaus&#39;,
        lastname: &#39;Wang&#39;
      }
    },
    methods: {
      change() {
        this.fullname = &#39;Alex Li&#39;
      }
    },
    computed: {
      // 计算属性的完整写法
      fullname: {
        get() {
          return this.firstname + &#39; &#39; + this.lastname
        },
        set(v) {
          this.firstname = v.split(&#39; &#39;)[0]
          this.lastname = v.split(&#39; &#39;)[1]
        }
      }
    }
  }).mount(&#39;#app&#39;)
</script>

偵聽器

在data傳回的物件中定義了數據，這個數據透過插值語法等方式綁定到template中，當數據變化時，template會自動進行更新來顯示最新的數據

但是在某些情況下，我們希望在程式碼邏輯中監聽某個資料的變化，這個時候就需要用偵聽器watch來完成了

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    // 可以使用watch监听响应式数据的改变
    // 对应有两个参数
    // 参数一 --- 新值
    // 参数二 --- 旧值
    info(newV, oldV) {
      // 如果监听的值是对象，获取到的新值和旧值是对应对象的代理对象
      console.log(newV, oldV)

      // 代理对象 转 原生对象
      // 1. 使用浅拷贝获取一个新的对象，获取的新的对象为原生对象
      console.log({...newV})

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

設定選項

##屬性deep值為boolean immediate預設情況下，初次渲染是不會觸發watch監聽，只有當值改變後，才會觸發watch監聽

Vue.createApp({
  data() {
    return {
      info: {
        name: 'Klaus'
      }
    }
  },
  watch: {
    info: {
      // 开启了深度监听后，当info的属性发生改变的时候，就会触发对应的watch回调
      // 注意: 和直接修改info引用不同的是，如果直接修改的是对象的属性
      // 那么此时newV和oldV是同一个对象的引用, 此时也就获取不到对应的旧值
      handler(newV, oldV) {
        console.log(newV, oldV)
        console.log(newV === oldV)  // => true
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change() {
      this.info.name = 'Steven'
    }
  }
}).mount('#app')

其它寫法

說明
是否開啟深度監聽	未開啟的時候，如果監聽的是對象，那麼只有對象的參考發生改變的時候，才會觸發watch回呼 開始後，如果監聽的是對象，那麼只要對像中的任一個屬性發生了改變，就會觸發watch回調
是否立即開始監聽	將immediate設定為true後，初次渲染也會觸發watch監聽，此時oldValue的值為undefined

#直接監聽物件屬性

<pre class="brush:js;">watch: { &amp;#39;info.name&amp;#39;(newV, oldV){ console.log(newV, oldV) } }</pre>

字串寫法

<pre class="brush:js;">Vue.createApp({ data() { return { info: { name: &amp;#39;Klaus&amp;#39; } } }, watch: { // watch的值如果是一个字符串的时候 // 会自动以该字符串作为函数名去methods中查找对应的方法 &amp;#39;info.name&amp;#39;: &amp;#39;watchHandler&amp;#39; }, methods: { change() { this.info.name = &amp;#39;Steven&amp;#39; }, watchHandler(newV, oldV){ console.log(newV, oldV) } } }).mount(&amp;#39;#app&amp;#39;)</pre>

陣列寫法

<pre class="brush:js;">Vue.createApp({ data() { return { info: { name: &amp;#39;Klaus&amp;#39; } } }, watch: { &amp;#39;info.name&amp;#39;: [ &amp;#39;watchHandler&amp;#39;, function handle() { console.log(&amp;#39;handler2&amp;#39;) }, { handler() { console.log(&amp;#39;handler3&amp;#39;) } } ] }, methods: { change() { this.info.name = &amp;#39;Steven&amp;#39; }, watchHandler(){ console.log(&amp;#39;handler1&amp;#39;) } } }).mount(&amp;#39;#app&amp;#39;)</pre>

$watch

<pre class="brush:js;">Vue.createApp({ data() { return { info: { name: &amp;#39;Klaus&amp;#39; } } }, created() { /* $watch 参数列表 参数一 --- 侦听源 参数二 --- 侦听回调 参数三 --- 配置对象 */ this.$watch(&amp;#39;info.name&amp;#39;, (newV, oldV) =&gt; console.log(newV, oldV), { immediate: true }) }, methods: { change() { this.info.name = &amp;#39;Steven&amp;#39; } } }).mount(&amp;#39;#app&amp;#39;)</pre>

以上是Vue3中的計算屬性及偵聽器怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！