vue3.0 computed使用

vue3.0 computed使用

Vue2：

  export default {
   computed:{
     //计算属性方法
   },
  }

Vue3：

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

• 方法1：

  export default {
   computed:{
     //计算属性方法
   },
  }

• 方法2：

 import { computed } from 'vue'

      const reverseMsg = computed(() => {})

完整示例

<!-- home.vue  -->
<template>
  <div>
    <h1>{{msg}}</h1>
    <h1>{{reverseMsg}}</h1>
    <hr>
    <el-button type="primary" @click="handleName">修改</el-button>
  </div>
</template>
<script>
  // 按需导入
  import {
    reactive,
    toRefs,
    ref,
    computed
  } from 'vue'
  export default {
    setup() {
      const msg = ref("hello Vue3-computed");
      // 将 msg 倒序
      // computed：创建计算属性方法
      const reverseMsg = computed(() => {
        return msg.value.split('').reverse().join('')
      })
      console.log(reverseMsg)

      return {
        msg,
        reverseMsg
      }
    },
    methods: {
      handleName() {
        this.msg = this.reverseMsg
      }
    },


  }
</script>

<style>
</style>