javascript - 如何体现出reactive对某个变量实现响应式的时候很麻烦呢？是否可进行举例说明？

 

问题描述：

由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦,所以Vue3提供了ref方法实现简单值的监听。

对此有两句话不理解：
1.ref是否可以对对象进行监听呢？
2.如何体现出reactive对某个变量实现响应式的时候很麻烦呢？是否可进行举例说明？

下面这个示例，不能体现问题2是吗？

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>  
</template>

 

第 1 个答案：

1.ref是否可以对对象进行监听呢？
答：可以。ref不限类型。
2.如何体现出reactive对某个变量实现响应式的时候很麻烦呢？是否可进行举例说明？
答：由于reactive必须传递对象，所以当我的变量不是一个对象时，我就必须包一层，比如你示例里的state，当数据类型不是对象时都需要额外一个对象来包装就会很麻烦。
当然你可能会问：我可以将所有不是对象的类型都用同一个对象来包装，这样不就不麻烦了吗？
这样当然一定程度上解决了这个问题，但是也引入了其他问题，比如：我的代码跟这个对象是耦合的，因为当你需要修改这个属性时，需要类似state.prop=value这样去修改，但其实这个state是不必要的，属性与这个state并没有关联性，仅仅因为reactive的限制而加上的，所以ref更合适

 

第 2 个答案：

关于问题 2

你想你要用 reactive 存一个值，但是 reactive 只能接受对象吧？所以要用一个对象把值包起来：reactive({ value: 0 })，这个是不是和 ref 有点像？

然后麻烦在哪？

  1. 上面说了，你得手动包那么一层
  2. 不如 ref 那么安全，或者说严谨。你写了 const counter = reactive({ value: 0 })，别人写一个 counter.val = 0，也是可以运行的，容易造成混乱。当然这个可以用 TypeScript 解决 const counter: { value: number } = reactive({ value: 0 })，这也会增加麻烦；反之你写 const counter = ref(0) 就肯定不会有人在 counter 后面乱写别的东西
  3. 然后，享受不到 ref 在模板中自动解包的便利。假如 counter 是个 ref 你就可以这么写 <MyComp :value="counter" />、<button @click="counter ++">+1</button>

响应式对象：import { reactive } from 'vue'const state = reactive({ count: 0 })请问下： ...