VUE3（十四）使用計算屬性computed和監聽屬性watch

首先，嘗試一下計算屬性computed

第一種寫法

<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>
 
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed(() => {
      return +age.value + 1
    })
    return {
      age,
      nextAge
    }
  }
}

修改age，nextAge會跟着自動+1

但如果修改nextAge，會有警告：計算屬性不能修改

第二種寫法

<template>
  <div>
    <p><input type="text" v-model="age"></p>
    <p><input type="text" v-model="nextAge"></p>
  </div>
</template>
 
<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const age = ref(18)
    const nextAge = computed({
      get() {
        return +age.value+1
      },
      set(value) {
        console.log(value)  //  輸出新修改的值
        return age.value = value - 1
      }
    })
    return { 
      age,
      nextAge
    }
  }
}
 

另一種寫法：

使用computed和watch, 一定記得先引入

import { reactive , computed,toRefs,watch} from "vue";

computed屬性

使用 getter 函數，並為從 getter 返回的值返回一個不變的響應式 ref 對象。

如圖所示，案例：

<p>原來值:{{ count }}</p>
<p>計算屬性更改的值:{{ twoNumber }}</p>
//引用ref函數 可以實時更新數據
import { defineComponent, reactive , computed,toRefs,watch} from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup() {
    const state: any = reactive({
      count: 1,
      twoNumber: computed(() => state.count*2)
    });
  
  
    //暴露出去給外界使用
    //使用toRefs解構響應式對象數據，實現實時更新
    return {
      ...toRefs(state),
    };
  },

watch屬性 與 vue2中的 this.$watch (以及相應的 watch 選項) 完全等效。

 watch(()=>state.count,(newValue, oldValue) => {
     console.log('改變了');
     console.log('我是新的值',newValue);
     console.log('我是舊的值',oldValue);
    })

以上大概就是VUE3中watch與computed的大概用法。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：