這篇文章主要介紹了淺談vue專案重構技術要點和總結,現在分享給大家，也給大家做個參考。
前言
最近太忙了，部落格好久沒有更新了。今天忙裡偷閒，簡單總結一下最近vue專案重構的一些技術要點。
vue資料更新， 視圖未更新
這個問題我們常常會遇到，一般是vue資料賦值的時候，vue資料變化了，但是視圖沒有更新。這不算是專案重構的技術要點，也跟大家分享一下vue2.0通常的解決方案吧！
解決方案如下：
1、透過vue.set方式賦值
Vue.set(数据源, key, newValue)
2、 透過Array.prototype.splice方法
資料來源.splice(indexOfItem, 1, newValue)
3、修改資料的長度
資料來源.splice(newLength)
#4、變異方法
Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：
push() pop() shift() unshift() splice() sort() reverse()
prop 物件陣列應用
在JavaScript 中物件和陣列是參考類型，指向同一個記憶體空間，如果prop 是一個對象或數組， 在子元件內部改變它會影響父元件的狀態。利用這一點，我們在子元件中改變prop數組或對象，父元件以及所有應用到prop中資料的地方都會變化。我之前寫過一篇js深拷貝和淺拷貝的文章，有興趣的去下，其實，原理是一致的。
案例如下：
<input class="pinput max" type="text" v-model="itemData.data.did">
<script>
export default {
components: {
},
data() {
},
props: {
itemData: Object
},
methods: {
}
};
</script>所有應用到itemData的地方都會改變！
上面這種改變prop，Vue 不會在控制台給予警告，假如我們完全改變或賦值prop，控制台會發出警告！引用官方給出的解決方案如下：
1、定義一個局部變量，並用prop 的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}2、定義一個計算屬性，處理prop 的值並回傳：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}v-model 的一些坑
其實v-model和sync都是一些文法糖，我之前有文章介紹過，官網也能找到類似的案例！
v-model 資料有時候是undefined的時候，不會報錯，所以，一定要注意，v-model不能是undefined，否則有些莫名的問題！
重構-動態元件的建立
有時候我們有很多類似的元件，只有一點點地方不一樣，我們可以把這樣的類似元件寫到在設定檔中，動態建立和引用元件
方法一：component 和is配合使用
透過使用保留的元素，並對其is 特性進行動態綁定，你可以在同一個掛載點動態切換多個元件：
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变！ -->
</component>方法二：透過render方法建立
<script>
export default {
data() {
return {
};
},
render: function(createElement) {
let _type = bi.chart.data.type;
let _attr = bi.chart.components[_type]["attr"];
return createElement(_attr, {
props: {
}
});
}
};
</script>bi.chart.components[_type] ["attr"]這個是在設定檔中動態設定的，type點擊的時候會改變，會取不同type下面的attr屬性！
公共屬性抽離
我們在專案中，常常會用很多狀態或數據，我們可以把很多公共資料抽離出來，放到一個物件中，後面我們可以監聽這個資料物件變化。進行資料保存或取得。
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},可以利用上面深度監聽。假如初始化的時候要立即執行，我們可以用立即執行監聽！
require動態載入依賴
我們可以利用require同步特性，在程式碼中動態載入依賴，例如下面echart主題，我們可以點擊切換的時候，動態加載！
require("echarts/theme/"+ data.theme);import載入要放到頭部，初始化的時候，可以把預設主題用import載入進來！
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
在angularjs中取得預設選取的單選按鈕的value方法（詳細教學）
透過angularJS中的radio實作單項二選一的使用方法（詳細教學）
#以上是詳細解讀vue重構技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！
