vue3.0实现数据的双向绑定

1.字符串、数字(通过ref实现)

<template>
    <button @click="add">{{ num }}</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
    setup() {
       let num = ref(0)
       const add = () => {
           num.value = num.value + 1
       }
       return {
          num,
          add
       }
    }
})
</script>            

2.对象、数组（通过reactive实现）

<template>
    <button @click="addObjNum">{{ obj }}</button>
    <button @click="addArrNum">{{ arr }}</button>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
    setup() {
       let obj = reactive({
            num: 1
        })
       let obj = reactive([0])
       const addObjNum = () => {
           obj.num = obj.num + 1
       }
       const addArrNum = () => {
           arr[0] = arr[0] + 1
       }
       return {
          obj,
          arr,
          addObjNum,
          addArrNum
       }
    }
})
</script>