reactive is working not consistent with playground

[asialiugf]

Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. npm init vite@latest : create a new project (or npm init vue@latest : select vue ts)
2. copy the playground App.vue to the project's App.vue
3. run it !

App.vue

obj:{{ obj }}

reactiveObj:{{ reactiveObj }}

reactiveObj1:{{ reactiveObj1 }}

修改obj

修改reactive

修改reactive1

<script setup lang="ts"> import { reactive, ref, toRefs } from "vue"; import { defineComponent } from "@vue/runtime-core"; let obj = { value: 0 }; let obj1 = { value: 0 }; let reactiveObj = reactive<{ value: number }>(obj); const reactiveObj1 = reactive<{ value: number }>(obj); console.log("-------------------------------------"); console.log(obj === reactiveObj); // false console.log(reactiveObj === reactiveObj1); // true console.log(obj); console.log(reactiveObj); const addObj = (): void => { obj.value += 1; console.log(obj); console.log("----" + reactiveObj); }; const addRef = (): void => { reactiveObj.value += 1; console.log(obj); console.log("0000"); console.log(reactiveObj); obj = { value: 1000 }; }; function addRef1(): void { reactiveObj1.value += 1; console.log("1111:" + reactiveObj1.value); reactiveObj = { value: 1000 }; } </script>

What is expected?

the result is not the same with playground .
I think the result of playground is OK, but the real project is not the same with playground.

What is actually happening?

I have changed the reactive value to 1000 , but the template's result is not 1000 in the real project created by the command of quick start of document of vue3.

---

no

[asialiugf]

I have do it followed your sugestion, it did not work yet.

I have changed it to

<scritpt setup lang="ts">

, so I think no need to import defineomponent ,

1= npm init vite@latest :
or npm init vue@latest : select vue ts)
2= copy the playground App.vue to the project's App.vue
3= run it , you can reproduce it

the realworld envirenment of vue is working no correct ...

[liulinboyi]

Add Example

This is probably a bug.

nomal

<template>
  <div>obj:{{ obj }}</div>
  <div>reactiveObj:{{ reactiveObj }}</div>
  <div>reactiveObj1:{{ reactiveObj1 }}</div>
  <div><button @click="addRef1">修改reactive1</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from "vue";

export default {
    setup() {
      let obj = {
        value: 0
      };
      let obj1 = {
        value: 0
      };
      let reactiveObj = reactive(obj);
      const reactiveObj1 = reactive(obj);

      console.log("-------------------------------------");
      console.log(obj === reactiveObj); // false
      console.log(reactiveObj === reactiveObj1); // true

      console.log(obj);
      console.log(reactiveObj);

      function addRef1() {
        reactiveObj1.value += 1;
        console.log("1111:" + reactiveObj1.value);
        reactiveObj = { value: 1000 };
        console.log(reactiveObj)
      }

      return {
        obj,
        obj1,
        reactiveObj,
        reactiveObj1,
        addRef1
      }
    }
}
</script>

setup

<template>
  <div>obj:{{ obj }}</div>
  <div>reactiveObj:{{ reactiveObj }}</div>
  <div>reactiveObj1:{{ reactiveObj1 }}</div>
  <div><button @click="addRef1">修改reactive1</button></div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { defineComponent } from "@vue/runtime-core";

let obj = { value: 0 };
let obj1 = { value: 0 };
let reactiveObj = reactive<{ value: number }>(obj);
const reactiveObj1 = reactive<{ value: number }>(obj);

console.log("-------------------------------------");
console.log(obj === reactiveObj); // false
console.log(reactiveObj === reactiveObj1); // true

console.log(obj);
console.log(reactiveObj);

function addRef1(): void {
  reactiveObj1.value += 1;
  console.log("1111:" + reactiveObj1.value);
  reactiveObj = { value: 1000 };
  console.log(reactiveObj)
}
</script>

[lidlanca]

Likely duplicate of
#5655

[posva]

Please be clear when reporting a bug, it's quite hard to decipher.

Note you should do const reactiveObj = reactive(...), not let reactiveObj = ... and not reassign the object.

[asialiugf]

yes