1. <template>
    2.   <div>
    3.     <p>{{msg}}</p> // hello Vue
    4.     <p>{{reverseMsg}}</p> // euV olleh
    5.   </div>
    6. </template>
    8. <script lang="ts">
    9. import { defineComponent,reactive,computed } from 'vue'
    11. export default defineComponent({
    12.   setup() {
    13.     const state = reactive({
    14.       msg: 'hello Vue'
    15.     })
    16.     // 计算属性
    17.     const reverseMsg = computed(() => {
    18.       return state.msg.split('').reverse().join('')
    19.     })
    21.     return {
    22.       ...state,
    23.       reverseMsg
    24.     }
    25.   },
    26. })
    27. </script>
    1. 不可修改的computed const reverseMsg = computed(() => {})
    2. 可修改的computed const reverseMsg = computed({get () {},set () {}})