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

问题描述

在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"

就能成功解决问题了