這篇文章給大家分享的是有關vue項目重構技術要點的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網站建設、域名、網絡空間、網站運營、企業(yè)網站設計、興城網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

vue數(shù)據(jù)更新， 視圖未更新

這個問題我們經常會遇到，一般是vue數(shù)據(jù)賦值的時候，vue數(shù)據(jù)變化了，但是視圖沒有更新。這個不算是項目重構的技術要點，也和大家分享一下vue2.0通常的解決方案吧！

解決方案如下：

1、通過vue.set方式賦值

Vue.set(數(shù)據(jù)源, key, newValue)

2、 通過Array.prototype.splice方法

數(shù)據(jù)源.splice(indexOfItem, 1, newValue)

3、修改數(shù)據(jù)的長度

數(shù)據(jù)源.splice(newLength)

4、變異方法

Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：

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

prop 對象數(shù)組應用

在 JavaScript 中對象和數(shù)組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數(shù)組， 在子組件內部改變它會影響父組件的狀態(tài) 。利用這一點，我們在子組件中改變prop數(shù)組或者對象，父組件以及所有應用到prop中數(shù)據(jù)的地方都會變化。我之前寫過一篇js深拷貝和淺拷貝的文章，感興趣的去看下，其實，原理是一致的。

案例如下：

所有應用到itemData的地方都會變化！

上面這種改變prop，Vue 不會在控制臺給出警告，假如我們完全改變或者賦值prop，控制臺會發(fā)出警告！引用官方給出的解決方案如下：

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 數(shù)據(jù)有時候是undefined的時候，不會報錯，所以，一定要注意，v-model不能是undefined，否則有些莫名的問題！

重構-動態(tài)組件的創(chuàng)建

有時候我們有很多類似的組件，只有一點點地方不一樣，我們可以把這樣的類似組件寫到配置文件中，動態(tài)創(chuàng)建和引用組件

方法一：component 和is配合使用

通過使用保留的 元素，并對其 is 特性進行動態(tài)綁定，你可以在同一個掛載點動態(tài)切換多個組件：

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})

 

方法二：通過render方法創(chuàng)建

bi.chart.components[_type]["attr"]這個是在配置文件中動態(tài)配置的，type點擊的時候會改變，會取不同type下面的attr屬性！

公共屬性抽離

我們在項目中，經常會用很多狀態(tài)或者數(shù)據(jù)，我們可以把很多公共數(shù)據(jù)抽離出來，放到一個對象中，后面我們可以監(jiān)聽這個數(shù)據(jù)對象變化。進行數(shù)據(jù)保存或者獲取。

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 該回調將會在偵聽開始之后被立即調用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

可以利用上面深度監(jiān)聽。假如初始化的時候要立即執(zhí)行，我們可以用立即執(zhí)行監(jiān)聽！

require動態(tài)加載依賴

我們可以利用require同步特性，在代碼中動態(tài)加載依賴，例如下面echart主題，我們可以點擊切換的時候，動態(tài)加載！

require("echarts/theme/"+ data.theme);

import加載要放到頭部，初始化的時候，可以把默認主題用import加載進來！

感謝各位的閱讀！關于“vue項目重構技術要點的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！