前言

最近太忙了，博客好久沒有更新了。今天忙里偷閑，簡單總結一下最近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>