vue的數據賦值聯動改變解決方案

1.踩坑

1.1.深拷貝/淺拷貝

這實際上算不上vue的問題，算是js基礎沒打好的坑吧。

先來看一個簡單的例子：

let obj = {name:'fiona-SUN'}; let copyObj = obj; copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona' 

在js中也有棧（stack）和堆（heap）的概念：

• 棧：自動分配的內存空間，大小確定會自動釋放。存放變量/局部變量/形參等。在js中存放簡單數據段（五種基本數據類型：Number、String、Boolean、Null、Undefined），他們是按值存放的，可以直接訪問。
• 堆：動態分配的內存，大小不定並且不會自動釋放。存放在堆內存中的對象，棧中的變量實際保存的是一個指針，這個指針指向堆中的某一個位置。

所以上述例子中，屬於淺拷貝，當我們聲明一個對象，由於他不屬於五種基本數據類型（即非簡單數據段），棧中會存放一個我們聲明的obj變量，它指向了堆中實際的這個對象的地址。當我們把這個引用地址賦值給了copyObj，實際它獲得的是一個與obj一致的指向堆中的地址。當copyOjb改變了指向的對象地址的實際的值的時候，obj拿到的值也就自然而然變化了。看圖理解⬇

 

image

嗯，道理我都懂，但是寫代碼我就自然而然的忽略了，該反思。。。

深拷貝的方法

• 方法一：逐個去拿到簡單數據項（網上可以搜到遞歸解決，思路類似)

let obj = {name:'fiona-SUN'}; let copyFunc = (originObj) => { let copyObj = {}; for(let key in originObj){ copyObj[key] = originObj[key]; } return copyObj; }; let copyObj = copyFunc(obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN' 

• 方法二：通過JSON去解析

let obj = {name:'fiona-SUN'}; let copyObj = JSON.parse(JSON.stringify(obj)); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN' 

• 方法三：es6之展開Object.assign（拷貝obj的內容到一個新的堆內存，copyObj存儲新內存的引用）

let obj = {name:'fiona-SUN'}; let copyObj = Object.assign({}, obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN' 

• 方法四：es6之展開運算符（僅用於數組）

let arr = [1,2,3]; let copyArr = [...obj]; copyArr[2] = 0; console.log(copyArr[2]); // 0 console.log(arr[2]); // 2 

數組的深拷貝：

方法一：使用slice

var arr = [1,2,3]; var newArr = arr.slice(0); 

方法二：使用concat

var arr = [1,2,3]; var newArr = arr.concat(); 

1.2.列表更新檢測

1.2.1數組更新檢測

以下摘自vue官網API

由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue) 

為了解決第二類問題，你可以使用 splice：

example1.items.splice(newLength) 

觸發視圖更新的方法：

1. 變異方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

1. vue提供的set方法

• Vue.set( target, key, value )

1.2.2對象更新檢測

還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的 

解決方法：

1. vue提供的set方法

• Vue.set( target, key, value )

1. Object.assign()

• bject.assign({}, target, {key:value})

1.3.頁面刷新vuex被清空

這真的是遇到一個很坑的問題，同一個頁面(router未改變)，一旦刷新（刷新或深度刷新），存儲的vuex就馬上和你說拜拜

• localStorage
  網上推薦最多的方法就是用localStorage。但是我個人覺得不太合適，還得看項目吧。localStorage是永久存儲的。

• 數據重新獲取
  我使用的方法是在需要某些數據之前先判斷一下數據是否存在，如果不存在重新獲取。

1.4nextTick適當使用

將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

簡而言之，等待DOM更新之后再進行操作。

1.5.異步問題

這個是一個亘古不變的話題。

請求后台數據異步，常不經意的帶來了問題。（處理異步的方法就不詳細描述了，網上一搜一大堆）

1.6.組件之間的調用方式

1.6.1.父子組件

• prop向下傳遞，事件向上傳遞
• 子組件添加ref屬性，父組件可以獲取到子組件的實例（不建議）
• 插槽slot 作用域插槽

1.6.2.非父子組件

• 使用狀態管理
• 實例化一個公共vue實例

1.7.計算屬性設置值

計算屬性是基於它們的依賴進行緩存的，一旦依賴發生變化，計算屬性會重新計算

想要改變計算屬性的值。要通過set方法去觸發它所依賴的變量,(類似於觸發它重新計算，單純賦予一個新值，在取的時候也是不會被改變的)

1.8.vue文件中內聯樣式中有無scoped屬性的差別

• 有scoped屬性:
  當前僅當該vue文件可以使用這個樣式。
• 無scoped屬性：
  影響其他文件

1.9 v-for v-key

當 Vue.js 用v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用 v-bind 來綁定動態值 (在這里使用簡寫)：

1.10 v-for 和 v-if

當它們處於同一節點，v-for的優先級比v-if更高。

1.11 js文件中引入的css不會自動加前綴

無論是開發環境還是生成環境都不會自動加前綴，因為vue-loader只管.vue文件里面的樣式，沒有自動執行autoprefixer loader

參考鏈接

在build/utils.js下引入postcss-loader

var postcssLoader = { loader: 'postcss-loader', options: { plugins: (loader) => [ require('autoprefixer')() ], sourceMap: true } } 

如果還有問題在改成

var postcssLoader = { loader: 'postcss-loader', options: { plugins: (loader) => [ require('autoprefixer')({ browsers: [ // 加這個后可以出現額外的兼容性前綴 "> 0.01%" ] }) ], sourceMap: true } } 

1.12 組件、prop大小寫不敏感，事件敏感

對於組件和prop而言,html上用kebab-case (短橫線分隔命名) ，其對應的js上要用

（HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：）

【但是：如果你使用字符串模板，那么這個限制就不存在了。】

components: {
    kebabCase
}

---

prop: ['kebabCase']

跟組件和 prop 不同，事件名不存在任何自動化的大小寫轉換。而是觸發的事件名需要完全匹配監聽這個事件所用的名稱。

跟組件和 prop 不同，事件名不會被用作一個 JavaScript 變量名或屬性名，所以就沒有理由使用 camelCase 或 PascalCase 了。並且 v-on 事件監聽器在 DOM 模板中會被自動轉換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 v-on:myEvent 將會變成 v-on:myevent——導致 myEvent 不可能被監聽到。

因此，我們推薦你始終使用 kebab-case 的事件名。

1.13 refs是靜態節點

refs是靜態節點

1.14 prop值的改變--不是立即

如果父組件中給子組件傳遞了一個prop的值，然后調用子組件的方法去獲取該值，會發現值沒有立即改變。

解決方法：

1. 可以監聽值的改變去調用相應子組件的方法
2. 將子組件相關方法的調用放在nextTick里面

1.15 elmentui里面的el-form '就地復用'

和v-for一樣，更新已渲染過的元素時，它默認用‘就地復用’策略。如果數據項的順序被改變，Vue將不會移動DOM元素來匹配數據項的順序，而是簡單服用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

1.16 elementui中的el-table的列顯示與隱藏

如果有一組按鈕組，點擊不同的tab的時候顯示不同的列，列會更換位置。默認用‘就地復用’，不會更新，需要加一個key值取隨機數

1.17 fetch兼容

在vue-cli中使用fetch方式請求的時候。存在一定的兼容問題。

可以在build/webpack.base.conf.js中添加一個plugins

plugins:[ new webpack.ProvidePlugin({ fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch', Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise', }) ] 

1.18 字符串模板

字符串模板

ps:注意依賴包的下載

2.優化

2.1.錯誤處理

錯誤處理很重要但是這是最容易讓開發忽略的點。

2.1.1.請求接口錯誤

由於我的請求是使用axios插件或者fetch單獨寫在了一個js，可以對其進行響應攔截。一旦失敗，或者后台報錯，就進行響應的錯誤處理以及友好提示，也避免了重復的代碼，提高可維護性

2.1.2.頁面錯誤處理（404）

1. nginx未匹配到路由走404路由
2. router.beforeEach是否匹配到響應的路由，否則走錯誤路由。

2.1.3 錯誤提示封裝

將錯誤提示模塊化，通過vuex來操作錯誤的顯示以及信息等內容。

2.2.減少不必要的依賴包

性能優化是很重要的，特別是對於vue這種首屏加載時間長的。

例如有些項目用到了圖表（echarts）,可以選擇加載依賴包，不用加載整個echarts庫。

2.3.不發送多個相同的請求

不發送多個相同的請求，在點擊觸發請求的同時鎖定請求，直至給出響應/錯誤解鎖。

以上內容，如有錯誤請指出，不甚感激。
如需轉載，請注明出處

2.4.組件中引入css的css依賴 -- sass-resources-loader

為了讓SCSS之類的文件在CSS中引入中不需要每次都引入var.scss文件，可以引入一個sass-resources-loader解決。

2.4.為了解決組件內引入的外部css文件沒有做css兼容處理 -- postcss-loader

在build/utils中引入postcss-loader

loader: 'postcss-loader', options:{ plugins: (loader) => [ require('autoprefixer')() ], sourceMap: true }

作者：逸宸a
鏈接：https://www.jianshu.com/p/32d44a047b07
來源：簡書