一、生命周期

鉤子函數(shù)：

• beforeCreate
• created：此時首次可以使用data和methods
• beforeMount：模板在內存中
• mounted：DOM渲染在頁面中，可以訪問DOM結構

二、computed、getter、setter

• computed：處理復雜的聲明式邏輯
• getter：computed的默認屬性，用于讀值
• setter：設值屬性

//html中
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>


//js中
data: {
    message: 'Hello'
},
computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
    
    //getter為默認屬性，一般默認省略getter,完整寫法：
    reversedMessage： {
        get() {
            return this.message.split('').reverse().join('')
        },
        set(newValue) {
            this.message = newValue
        }
    }
}

//結果
Original message: "Hello"
Computed reversed message: "olleH"

運行vm.message = 'goodbye',setter會被調用，message會被更新

Q1. computed vs methods

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed可以實現(xiàn)的結果看似用methods也可以實現(xiàn)，二者的區(qū)別在于：計算屬性(computed)是基于它們的響應式依賴進行緩存的,只在相關響應式依賴發(fā)生改變時它們才會重新求值；相比之下，每次觸發(fā)重新渲染都會使得調用方法(methods)再次執(zhí)行函數(shù)。

Q2. computed vs watch

watch是VUE實例上監(jiān)聽響應數(shù)據變動的屬性，當數(shù)據發(fā)生變化時做出相應的變化。

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
},
//使用watch
watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
}
//使用computed
computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

可以看出使用watch，當一個數(shù)據的變化受多個數(shù)據影響的時候，命令式會變得重復，這個時候很容易造成濫用watch。watch更適合于在數(shù)據變化時執(zhí)行異步或者開銷較大的操作時。

• watch擅長處理的場景：一個數(shù)據影響多個數(shù)據
• computed擅長處理的場景：一個數(shù)據受多個數(shù)據影響

三、watch監(jiān)聽對象內部變化

• 只是監(jiān)聽Obj內的某一屬性：直接用obj.key進行監(jiān)聽
• 對整個obj深層監(jiān)聽

data: {
    a: 100,
    b: {
        value: 1，
        type: 2
    }
}

watch: {
    //普通監(jiān)聽
    a(newval, oldval){
        console.log("new-a:"+newval+',old-a:'+oldval);
    }
    b(val, oldVal){
        console.log("b.value: "+val.value, oldVal.value);
     },
    
    
    //監(jiān)聽整個obj，深層監(jiān)聽
    b:{
        handler(val, oldVal){
            console.log("b.value: "+val.value, oldVal.value);
        },
        deep:true
        immediate: true
     },
     
    //監(jiān)聽Obj中的屬性，obj.key
    'b.value': {
        handler(val,oldVal){
          console.log("b.value: "+val, oldVal);
        }
    },

}

• handler：監(jiān)聽數(shù)組或對象時候用到的方法，深層監(jiān)聽。只要obj中有屬性值變化就進行監(jiān)聽但不知道具體是哪個屬性值變化。
• deep：默認值是false，true發(fā)現(xiàn)對象內部值的變化即深層監(jiān)聽,(監(jiān)聽數(shù)組的變動不需要這么做)。
• immediate：立即以表達式的當前值觸發(fā)回調。true代表如果在 wacth里聲明了之后，就會立即先去執(zhí)行里面的handler方法，false就跟我們以前的效果一樣，在數(shù)據變化的時候才執(zhí)行，不會在綁定的時候就執(zhí)行。

Q1：監(jiān)聽對象中某一屬性值變化

• 監(jiān)聽obj.key
• 利用computed作為中間層，監(jiān)聽computed計算得到的值，就可以只監(jiān)聽對象中的某一屬性變化從而做出相應操作

computed: {
    newvalue(){
        return this.b.value
    }
},
watch: {
    newvalue(val, oldVal){
        console.log("b.value: "+val, oldVal);   
     },
}
 

Q2：深層監(jiān)聽的理解

監(jiān)聽器會一層層的往下遍歷給對象的所有屬性都加上了這個監(jiān)聽器

四、v-for中key的作用

key的作用是"唯一標識" ，可以標志組件的唯一性，可以更高效的更新虛擬DOM。

vue的dom渲染是虛擬dom，數(shù)據發(fā)生變化時，diff算法會只比較更改的部分，如果數(shù)據項的順序被改變，Vue將不是移動DOM元素來匹配數(shù)據項的改變，而是簡單復用此處每個元素。

加上key值后，當VUE節(jié)點發(fā)生變化的時候可以通過key值來識別相同的節(jié)點，更高效率更新DOM。

參考可見：http://chabaoo.cn/article/178628.htm

五、$nextTick的作用

在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據之后立即使用這個方法，獲取更新后的 DOM。

解決的問題：有些時候在改變數(shù)據后立即要對dom進行操作，此時獲取到的dom仍是獲取到的是數(shù)據刷新前的dom，無法滿足需要，這個時候就用到了$nextTick。

// 修改數(shù)據
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

六、$set

如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。Vue 不允許在已經創(chuàng)建的實例上動態(tài)添加新的根級響應式屬性。
使用 Vue.set(object, key, value)方法將響應屬性添加響應式對象，并確保這個新屬性同樣是響應式的，且觸發(fā)視圖更新。

解決：在vue中對一個對象內部進行一些修改時，vue沒有監(jiān)聽到變化無法觸發(fā)視圖的更新，此時來使用$set來觸發(fā)更新，使視圖更新為最新的數(shù)據。

【響應式：只有當實例被創(chuàng)建時中存在的屬性才是響應式的，或者說在data中存在的才能響應。
原因：由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的?！?/p>

<template>
  <div>
 <p @click="addb(a)">{{a.b}}</p>
 <p @click="addc(a)">{{a.c}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      a: {
          b: 1
         },
    }
  },
  methods: {
    addb(a) {
       a.b = a.b + 1;
    },
    addc(a) {
        a.c = a.c + 1;
        console.log(a.c)
     },
  },
  mounted() {
    this.a.c = 200   //{{a.c}}不能主動觸發(fā)視圖更新故無法被渲染出來，當下一次視圖更新時才出現(xiàn)
    this.$set(this.a, 'c' ,200)   //觸發(fā)視圖更新，{{a.c}}被渲染
  }
}
</scirpt>

• this.a.c = 200：點擊b的數(shù)字才可以觸發(fā)視圖刷新，點擊c的數(shù)字console.log出來的c是變化的，但是視圖未更新還是原來的c
• this.$set(this.a, 'c' ,'200')：點擊c視圖變化，是最新的c

七、組件間的傳值

• props：父傳子
• $emit：子傳父
• eventbus：兄弟組件間
• vuex：
• $parent / $children / ref：
• provide / inject：
• Vue.observable：
• $attrs：
• $listeners：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論