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深拷貝和淺拷貝的文章，感興趣的去看下，其實，原理是一致的。

案例如下：

<inputclass="pinput max"type="text"v-model="itemData.data.did">
 
<script>exportdefault{
  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(){returnthis.size.trim().toLowerCase()}}

v-model 的一些坑

其實v-model和sync都是一些語法糖，我之前有文章介紹過，官網也能找到類似的案例！

v-model 數據有時候是undefined的時候，不會報錯，所以，一定要註意，v-model不能是undefined，否則有些莫名的問題！

重構-動態組件的創建

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

方法一：component 和is配合使用

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

var vm =newVue({
  el:‘#example‘,
  data:{
    currentView:‘home‘},
  components:{
    home:{/* ... */},
    posts:{/* ... */},
    archive:{/* ... */}}})<component v-bind:is="currentView"><!--組件在 vm.currentview 變化時改變！--></component>

方法二：通過render方法創建

<script>exportdefault{
  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},

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

動態加載依賴

import命令會被 JavaScript 引擎靜態分析

// 報錯if(x ===2){importHaoroomsfrom‘./Haorooms‘;}

解決方案一：require加載

因為require是運行時加載模塊，import命令無法取代require的動態加載功能。

在代碼中動態加載依賴，例如下面echart主題，我們可以點擊切換的時候，動態加載！

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

解決方法二：import()函數

例如：

const main = document.querySelector(‘main‘);import(`./section-modules/${someVariable}.js`).then(module=>{module.loadPageInto(main);}).catch(err =>{
    main.textContent = err.message;});

按需加載。

button.addEventListener(‘click‘,event=>{import(‘./dialogBox.js‘).then(dialogBox =>{
    dialogBox.open();}).catch(error =>{/* Error handling */})});

條件加載

if(condition){import(‘moduleA‘).then(...);}else{import(‘moduleB‘).then(...);}

動態的模塊路徑

import(f()).then(...);

上面代碼中，根據函數f的返回結果，加載不同的模塊。

$destroy()銷毀組件，沒有銷毀slot

可以用v-if判斷slot，如下：

<comp-b @close-a="showA = false"><comp-av-if="showA"/></comp-b>

另外可以用v-if指定組件渲染循序，例如，某個組件要在ajax請求返回數據之後再渲染，我們可以給組件一個狀態，默認是false，當ajax請求返回數據之後，狀態改成true。

轉自：https://www.haorooms.com/post/vue_project_cg

【轉】vue項目重構技術要點和總結