reactive

reactive

setup() {
  // reactive 返回对象的响应式副本
  // 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。
  const state = reactive({
    count: 1
  });
  return { state };
}

reactive 与 ref 一起使用

setup() {
  // reactive 返回对象的响应式副本
  // 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。
  const state = reactive({
    count: 1
  });

  // reactive 将解包所有深层的 refs，同时维持 ref 的响应性。
  const num = ref(2);
  const numReactive = reactive({ num });

  // ref 会被解包
  console.log(numReactive.num === num.value); // true

  // 更新 numReactive.num
  num.value++;
  console.log(num.value); // 3
  console.log(numReactive.num); // 3

  // 更新 num.value
  numReactive.num++;
  console.log(numReactive.num); // 4
  console.log(num.value); // 4

  // 当将 ref分配给 `reactive` property 时，ref 将被自动解包。
  const num3 = ref(3);
  const num3Reactive = reactive({});
  num3Reactive.num = num3;
  console.log(num3Reactive.num); // 3
  console.log(num3Reactive.num === num3.value); // true

  return { state };
}