vue.js - 为什么 react 变量在未分配给 v-model 时会发生变化

Question

我对组合 API 相当陌生，但到目前为止它还是比较简单的。

我正在发起一个返回一些数据的 Axios 调用；

const transaction = ref({});
let pbl = reactive({});

const getPayByLinkTransaction = () => {
    axios({
        method: "get",
        url: "pay-by-link",
        params: {
            merchantUuid: import.meta.env.VITE_MERCHANT_UUID,
            uuid: route.params.uuid,
        },
    })
        .then((res) => {
            transaction.value = res.data;
            pbl = res.data;            
        })
        .catch((e) => {
            console.log(e);
        });
}

getPayByLinkTransaction();

然后我有以下文本字段:

<v-text-field v-model="transaction.reference" variant="solo" class="mb-1"
:rules="config?.fields?.reference?.required ? required : []"></v-text-field>

PBL - {{ pbl.reference }} <br>
Transaction - {{ transaction.reference }}

引用键包含 John Doe 作为开始。

奇怪的是，当我开始在文本字段中输入内容时，交易和pbl对象中的引用都会发生变化。

由于 v-model 附加到 transaction.reference，它是否不仅应该更改 transaction 对象中的变量？

为什么pbl对象也发生变化？

我想要的是两个对象，其中一个包含原始数据，另一个包含修改后的数据(如果用户要修改任何详细信息)。

Answer 1

我无法在 Vue 2 和 Vue 2 中使用 Composition API 重现该问题。

所以，这是我对正在发生的事情的假设。

您正在将同一个对象从 res.data 分配给 transaction 和 pbl。由于是同一个对象，因此 reference 相对于 transaction.reference 的更改也会更改 pbl.reference

这是使用 Options API 来理解问题的简单 Vue 2 Playground 。

const App = { 
  el: '#app',
  data() {
    return {
      myObj: { id: 1, counter: 0 },
      myObjCopy: {}
    }
  },
  methods: {
     replaceObj() {
      let obj = { id: this.myObj.id + 1, counter: 0 };
      this.myObj = obj;
      this.myObjCopy = obj;
    },
    plus() {
      this.myObj.counter++; 
    }
  }
}
const app = new Vue(App);

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app">
<button type="button" @click="replaceObj()">Replace My Object</button><hr/>
My Object Id: {{myObj.id}}<br/>
Counter: {{myObj.counter}}
<button type="button" @click="plus()">+1</button><br/>
<hr/>
My Object Copy Id: {{myObjCopy.id}}<br/>
Counter: {{myObjCopy.counter}}
</div>
<script type="text/javascript" src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9afacbc99ebf7eef7e8ed" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>

有趣的是，Vue 3 中的 react 性表现不同。

// true in 2.7, false in 3.x
reactive(foo) === foo;

Vue 3 reactive() 函数创建一个 Proxy 对象。检查Behavior Differences from Vue 3

const { createApp, ref, reactive } = Vue;
const App = { 
  setup() {    
    let obj = { id: 1, counter: 0 };
    const myObj = ref(obj);
    let myObjCopy = reactive(obj);    
    const plus = () => {
      myObj.value.counter++; 
    }    
    const replaceObj = () => {
      let obj = { id: myObj.value.id + 1, counter: 0 };
      myObj.value = obj;
      myObjCopy = obj;
    }
    return { myObj, myObjCopy, plus, replaceObj}
  }
}
const app = createApp(App)
app.mount('#app')

<div id="app">
<button type="button" @click="replaceObj()">Replace My Object</button><br/><br/>
My Object Id: {{myObj.id}}<br/>
Counter: {{myObj.counter}}
<button type="button" @click="plus()">+1</button><br/>
<hr/>
My Object Copy Id: {{myObjCopy.id}}<br/>
Counter: {{myObjCopy.counter}}
</div>
<script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>