响应式数据用reactive包装的疑问

Question

我没有用reactive包装数据，页面数据也跟着变化了。不知道哪里出了问题。2秒后5秒后数据state1的数据都跟着变了。

Answer 1

双越 2021-10-27 16:42:00

你虽然么用 reactive ，但你用了 toRef ，就相当于你自己创建了一个 ref （代码中的 ageRef1）

• 提问者 慕工程2575929 #1

  但是您举的例子里也用了toRef，仅仅是state的赋值方式变了，toRef还是保留的，但页面渲染的数值没有变化。

• 双越 回复 提问者 慕工程2575929 #2

  是不太一样，你用的 vue 是什么版本？课程里的是 3.0.4

• 提问者 慕工程2575929 回复 双越 #3

  用的是3.0.0的版本，但是我在您的案例里又重新定义了一个没有用reactive封装的对象，那个对象也能实现响应式。 setup() {
      const state = reactive({
        age: 20,
        name: '双越'
      })
      const state1 = {
        age: 20,
        name: '双越'
      }
      const ageRef = toRef(state, 'age')
      const ageRef1 = toRef(state1, 'age')
  
      setTimeout(() => {
        state.age = 25
        state1.age = 25
      }, 1500)
      setTimeout(() => {
        ageRef.value = 30 
        ageRef1.value = 30 
      }, 3000)
      return {
        state,
        ageRef,
        state1,
        ageRef1
      }
    }

点开查看后面2条评论