您现在的位置是：自如初>Vue.jsVue.js

Vue3 setup中computed计算属性的使用

温新 2021-08-22 19:40:37 【Vue.js】 9407人已围观

简介Vue3 setup中computed计算属性的使用。在setup中，要使用computed计算属性就必须先导入computed。

hi，我是温新，一名PHPer

在setup中，要使用computed计算属性就必须先导入computed。

setup中计算属性的基础使用

<div id="app">
 <button @click="addCount">{{ count }}</button>
 <p>计算属性后的值：{{ countComputed }}</p>
</div>

<script>
 const app = Vue.createApp({
  setup() {
   const {ref, computed} = Vue;
   let count = ref(0);

   let addCount = () => {
    count.value+=1;
   }

   // 计算属性
   let countComputed = computed(()=>{
    // 计算属性初始化加10
    return count.value + 10;
   });

   return {count,addCount, countComputed}
  }
 });
 const vm = app.mount('#app');
</script>

setup中计算属性中的get/set

使用get/set时，computed传入的参数就是一个对象了。

<div id="app">
 <button @click="addCount">{{ count }}</button>
 <p>计算属性后的值：{{ countComputed }}</p>
</div>

<script>
 const app = Vue.createApp({
  setup() {
   const {ref, computed} = Vue;
   let count = ref(0);

   let addCount = () => {
    count.value+=1;
   }

   // 计算属性
   let countComputed = computed({
    // 获取数据时调用
    get: () => {
     return count.value + 10;
    },
    // 设置数据时调用
    set: () => {
     return count.value = 20;
    }
   });

   // 3秒后对数据进行修改
   setTimeout(()=>{
    countComputed.value = 30;
   },3000);

   return {count,addCount, countComputed}
  }
 });
 const vm = app.mount('#app');
</script>