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

欢迎访问小程序：