项目场景：

vue3 setup方法中创建ref和reactive对象并定义方法对其更新数据.

问题描述：

用对应更新数据的方法绑定了按钮却没有更新数据.
源代码:

<template>
  <div>
    <h2>reactive和ref的细节问题</h2>
    <h3>m1:{{ m1 }}</h3>
    <h3>m2:{{ m2 }}</h3>
    <h3>m3:{{ m3 }}</h3>
    <hr />
    <button @click="update">更新数据</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const m1 = ref("abc");
    const m2 = reactive({
      name: "小明",
      wife: {
        name: "小红",
      },
    });
    //ref也可以传入对象吗?
    const m3 = ref({
      name: "小明",
      wife: {
        name: "小红",
      },
    });
    //更新数据
    const update = () => {
      m1.value += "===";
      m2.wife.name += "===";
      m3.value.name += "===";
    };
    return {
      m1,
      m2,
      m3,
   
    };
  },
});
</script>

问题:
setup()的update方法显示

‘update’ is declared but its value is never read.

浏览器显示:

[HMR] Waiting for update signal from WDS…

原因分析：

检查后发现,setup对象的方法需要写进返回值中,否则是无法绑定按钮的.

解决方案：

return的对象加上方法名即可.

return {
      m1,
      m2,
      m3,
   update
    };