2018年2月8日 前言 最近太忙了，博客好久沒(méi)有更新了。今天忙里偷閑，簡(jiǎn)單總結(jié)一下最近vue項(xiàng)目重構(gòu)的一些技術(shù)要點(diǎn)。

vue數(shù)據(jù)更新， 視圖未更新 這個(gè)問(wèn)題我們經(jīng)常會(huì)遇到，一般是vue數(shù)據(jù)賦值的時(shí)候，vue數(shù)據(jù)變化了，但是視圖沒(méi)有更新。這個(gè)不算是項(xiàng)目重構(gòu)的技術(shù)要點(diǎn)，也和大家分享一下vue2.0通常的解決方案吧！

解決方案如下：

1、通過(guò)vue.set方式賦值

Vue.set(數(shù)據(jù)源, key, newValue) 2、 通過(guò)Array.prototype.splice方法

數(shù)據(jù)源.splice(indexOfItem, 1, newValue) 3、修改數(shù)據(jù)的長(zhǎng)度

數(shù)據(jù)源.splice(newLength) 4、變異方法

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

push() pop() shift() unshift() splice() sort() reverse() prop 對(duì)象數(shù)組應(yīng)用 在 JavaScript 中對(duì)象和數(shù)組是引用類(lèi)型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。利用這一點(diǎn)，我們?cè)谧咏M件中改變prop數(shù)組或者對(duì)象，父組件以及所有應(yīng)用到prop中數(shù)據(jù)的地方都會(huì)變化。我之前寫(xiě)過(guò)一篇js深拷貝和淺拷貝的文章，感興趣的去看下，其實(shí)，原理是一致的。

案例如下：

<input class="pinput max" type="text" v-model="itemData.data.did">

<script> export default { components: { }, data() { }, props: { itemData: Object }, methods: { } }; </script> 所有應(yīng)用到itemData的地方都會(huì)變化！

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

1、定義一個(gè)局部變量，并用 prop 的值初始化它：

props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 2、定義一個(gè)計(jì)算屬性，處理 prop 的值并返回：

props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } } v-model 的一些坑 其實(shí)v-model和sync都是一些語(yǔ)法糖，我之前有文章介紹過(guò)，官網(wǎng)也能找到類(lèi)似的案例！

v-model 數(shù)據(jù)有時(shí)候是undefined的時(shí)候，不會(huì)報(bào)錯(cuò)，所以，一定要注意，v-model不能是undefined，否則有些莫名的問(wèn)題！

重構(gòu)-動(dòng)態(tài)組件的創(chuàng)建 有時(shí)候我們有很多類(lèi)似的組件，只有一點(diǎn)點(diǎn)地方不一樣，我們可以把這樣的類(lèi)似組件寫(xiě)到配置文件中，動(dòng)態(tài)創(chuàng)建和引用組件

方法一：component 和is配合使用

通過(guò)使用保留的 元素，并對(duì)其 is 特性進(jìn)行動(dòng)態(tài)綁定，你可以在同一個(gè)掛載點(diǎn)動(dòng)態(tài)切換多個(gè)組件：

var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { / ... / }, posts: { / ... / }, archive: { / ... / } } }) <component v-bind:is="currentView"> <!-- 組件在 vm.currentview 變化時(shí)改變！ --> </component> 方法二：通過(guò)render方法創(chuàng)建

<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"]這個(gè)是在配置文件中動(dòng)態(tài)配置的，type點(diǎn)擊的時(shí)候會(huì)改變，會(huì)取不同type下面的attr屬性！

公共屬性抽離 我們?cè)陧?xiàng)目中，經(jīng)常會(huì)用很多狀態(tài)或者數(shù)據(jù)，我們可以把很多公共數(shù)據(jù)抽離出來(lái)，放到一個(gè)對(duì)象中，后面我們可以監(jiān)聽(tīng)這個(gè)數(shù)據(jù)對(duì)象變化。進(jìn)行數(shù)據(jù)保存或者獲取。

c: { handler: function (val, oldVal) { / ... / }, deep: true }, // 該回調(diào)將會(huì)在偵聽(tīng)開(kāi)始之后被立即調(diào)用 d: { handler: function (val, oldVal) { / ... / }, immediate: true }, 可以利用上面深度監(jiān)聽(tīng)。假如初始化的時(shí)候要立即執(zhí)行，我們可以用立即執(zhí)行監(jiān)聽(tīng)！

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

require("echarts/theme/"+ data.theme); import加載要放到頭部，初始化的時(shí)候，可以把默認(rèn)主題用import加載進(jìn)來(lái)！