Vue3 ref构建响应式变量失效问题及解决

<template>
  <p>{{userName}}</p>
  <button @click='change()'>change</button>
</template>

<script>
  //引入定义响应式数据的函数
  import {reactive} from 'vue';
  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity
  export default {
  name: 'App',
  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加
  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method
  setup(){
    //定义响应式数据：数据变化，模板中渲染会自动刷新
    // const obj=reactive({
    //   userName:'jack',
    // });
    //只定义一个变量,可以使用ref将变量定义为响应式
    let userName=ref('jack')
    console.log(userName);
    const change=()=> {
      userName.value='rose'     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value
      console.log(userName);
    }

    return {userName,change}
  },
}
</script>

import {ref} from "@vue/reactivity"

import {ref} from "vue"

<template>
  <h1>{{ title }}</h1>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

<template>
  <h1>{{ title }}</h1>
  <h2>{{ data.author }}</h2>
  <button @click=""changeTitle>修改title</button>
</template>
 
<script>
  import { ref, reactive, toRefs } from "vue";
  export default {
    setup() {
      const title = ref("Hello, Vue 3!");
      // 修改
      function changeTitle(){
        title.value == "Hello, Vue3!"
      }
 
      const data = reactive({
        author: "青年码农",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

const title = ref("Hello, Vue 3!");

title.value = "Hello, Vue3!"

const data = ref({
    author: "青年码农",
    age: "18"
});

data.value.author = "nmgwap";

const data = reactive({
    author: "青年码农",
    age: "18"
});

data.author = "nmgwap"