VUE實踐總結

前言

本文主要總結了本身vue實際開發項目當中遇到的一些常見問題以及解決方案

VUE組件的data是function

當一個 組件被定義， data 必須聲明爲返回一個初始數據對象的函數，由於組件可能被用來建立多個實例。若是  data 仍然是一個純粹的對象，則全部的實例將 共享引用同一個數據對象！

解釋：如咱們所知，Object是引用類型，若是組件的data是Object就會影響到全部的實例

VUE如何傳遞參數給子組件

對於父組件來講等價於給子組件綁定了一個屬性

// parent.vue
<childComponent :isShow="parentParam"></childComponent>

而後子組件須要經過props接收到父組件的參數

// child.vue
props:{
    isShow:{
        type:Boolean,
        default:false
    }
}

VUE子組件如何傳遞參數給父組件

對於數據繞子組件執行一圈又回到父組件的需求是很常見的。

對於子組件來講，子組件處理完邏輯後經過$emit發送一個消息（事件）

// child.vue
methods:{
    logic(){
        this.$emit("someMsg",param1,param2);
    }
}

對於父組件來講，在子組件的"標籤"上監聽這個消息（事件）

// parent.vue
<childComponent :isShow="parentParam" @someMsg="someMsgHandler"></childComponent>

<script>
    export default{
        methods:{
            someMsgHandler(param1,param2){
                // do something
            }
        }
    }
</script>

VUE父組件調用子組件的function

// parent.vue
<childComponent :isShow="parentParam" ref="child"></childComponent>

<script>
    export default{
        methods:{
            callChild(){
                // 假設子組件有一個someThingHandler的函數
                this.$refs.child.someThingHandler();
            }
        }
    }
</script>

VUE修改數據視圖不更新問題

新手常常會碰到這種狀況，我明明改變了這個變量，可是視圖居然沒有更新，說好的mvvm呢，黑人問號？

產生的緣由極可能就是下面這句話了

由於 Vue 沒法探測普通的新增屬性 (好比  this.myObject.newProperty = 'hi')

細糾一下緣由就是，vue的響應式原理是get的時候依賴收集 （添加Watcher），set的時候通知相關的Watcher進行視圖更新，直接給對象添加一條數據天然沒有這個過程，因此天然沒法更新視圖啦~

解決方案：Vue.set( target, key, value ) （別名：vm.$set(target, key, value) ）

VUE watch配置注意事項

computed的做用是監聽數據變化計算出屬性，watch的做用就是監聽數據變化執行相應的邏輯，but這裏須要注意一下

若是你監聽的是一個對象，你須要這樣

<script>
    export default{
        watch:{
            obj:{
                handler(oldValue,newValue){
                    // do something
                }
            },
            // 這句不能漏掉
            deep:true
        }
    }
</script>

而後還有，由於是對象，因此oldValue!==newValue行不通滴。實在要比較只能比較對象的具體值了。而後這裏又容易觸發另一個問題，數據初始化的時候也會觸發watch，so要作好臨界判斷哦~~

vue生命週期階段詳解

大體能夠分爲8個階段

• beforeCreate：建立前，這個階段組件的$data和$el都爲undefined
• created：建立完成，這個階段$data已經初始化完成
• beforeMount：$el依然爲undefined，虛擬dom階段
• mounted：$el掛載值
• beforeUpdate：組件更新前
• updated：組件更新後
• beforeDestroy：組件銷燬前
• destroy：組件銷燬後