Vue3computed的使用(get和set)

computed基本用法：修改year，nextYear会跟着自动 1(不能直接修改nextYear的值）

1.  
   <template>
2.  
   <div>
3.  
   <p><input type="text" v-model="year" /></p>
4.  
   <p><input type="text" v-model="nextYear" /></p>
5.  
   </div>
6.  
   </template>
7.  
   <script>
8.  
   import { computed, ref } from "vue";
9.  
   export default {
10.  
    setup() {
11.  
    const year = ref(2022);
12.  
    const nextYear = computed(() => {
13.  
    return year.value 1;
14.  
    });
15.  
    return {
16.  
    year,
17.  
    nextYear
18.  
    }
19.  
    }
20.  
    }
21.  
    </script>

当直接修改nextYear是会有警告

 computed中get和set的用法：可直接修改nextYear的值

1.  
   <template>
2.  
   <div>
3.  
   <p><input type="text" v-model="year" /></p>
4.  
   <p><input type="text" v-model="nextYear" /></p>
5.  
   </div>
6.  
   </template>
7.  
   <script>
8.  
   import { computed, ref } from "vue";
9.  
   export default {
10.  
    setup() {
11.  
    const year = ref(2022);
12.  
    const nextYear = computed({
13.  
    get() {
14.  
    return year.value 1;
15.  
    },
16.  
    set(value) {
17.  
    console.log(value);
18.  
    return year.value = value - 1
19.  
    }
20.  
    })
21.  
    return {
22.  
    year,
23.  
    nextYear
24.  
    }
25.  
    }
26.  
    }
27.  
    </script>

这篇好文章是转载于：学新通技术网