问题描述

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

就能成功解决问题了