溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用vue 怎么樣避免變量賦值后雙向綁定，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
如： this.list = this.list2, 結果在list改變后 list2也改變，這不是我們想要的效果
第一種：
利用 JSON.parse 和 JSON.stringify
this.list= JSON.parse( JSON.stringify(this.list2) )
第二種：
ES6 的解析語法
this.list= { ...this.list2}
this.arr= [...this.arr2]
補充知識：解決vue中v-model綁定的變量賦值給了另一個變量后，兩個變量同時改變
先來看一下問題背景
我們要做一個 搜索+分頁 的功能，使用vue
我們將分頁控件綁定了點擊事件，點擊后提交v-model綁定的formData表單，但是我們忽略了一個問題，就是當輸入的信息改變的情況下，不點擊搜索，直接點擊分頁控件，提交的將會是新現在搜索框中的搜索條件。這樣就不和邏輯了。
于是我們在data中新加了一個表單的對象 submitForm，只有在點擊 查詢 的時候，v-model綁定的 formData 表單才會賦值給這個對象，而翻頁的時候提交的是 submitForm 。這樣就解決了這個問題。
data() {
return {
formData: {
timeStart: '',
timeEnd: '',
// 分頁數據
pageNo: 1,
pageSize: 10
},
submitForm: {
timeStart: '',
timeEnd: '',
// 分頁數據
pageNo: 1,
pageSize: 10
},
}
this.submitForm = this.formData
// 用 new也是一樣達不到效果
this.submitForm = new Object(this.formData)但是！！！
submitForm 竟然跟著變了
這是因為在Object賦值的時候，傳遞的不是值，而是引用，他們指向了同一個空間！
解決
第一種：利用 JSON.parse 和 JSON.stringify
this.submitForm = JSON.parse( JSON.stringify(this.formData) )
第二種：ES6 的解析語法
this.submitForm = { ...this.formData }
上述就是小編為大家分享的使用vue 怎么樣避免變量賦值后雙向綁定了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
