一、生命周期

鉤子函數(shù)：

• beforeCreate
• created：此時(shí)首次可以使用data和methods
• beforeMount：模板在內(nèi)存中
• mounted：DOM渲染在頁面中，可以訪問DOM結(jié)構(gòu)

二、computed、getter、setter

• computed：處理復(fù)雜的聲明式邏輯
• getter：computed的默認(rèn)屬性，用于讀值
• setter：設(shè)值屬性

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


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

//結(jié)果
Original message: "Hello"
Computed reversed message: "olleH"

運(yùn)行vm.message = 'goodbye',setter會(huì)被調(diào)用，message會(huì)被更新

Q1. computed vs methods

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

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

Q2. computed vs watch

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

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，當(dāng)一個(gè)數(shù)據(jù)的變化受多個(gè)數(shù)據(jù)影響的時(shí)候，命令式會(huì)變得重復(fù)，這個(gè)時(shí)候很容易造成濫用watch。watch更適合于在數(shù)據(jù)變化時(shí)執(zhí)行異步或者開銷較大的操作時(shí)。

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

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

• 只是監(jiān)聽Obj內(nèi)的某一屬性：直接用obj.key進(jìn)行監(jiān)聽
• 對整個(gè)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)聽整個(gè)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ù)組或?qū)ο髸r(shí)候用到的方法，深層監(jiān)聽。只要obj中有屬性值變化就進(jìn)行監(jiān)聽但不知道具體是哪個(gè)屬性值變化。
• deep：默認(rèn)值是false，true發(fā)現(xiàn)對象內(nèi)部值的變化即深層監(jiān)聽,(監(jiān)聽數(shù)組的變動(dòng)不需要這么做)。
• immediate：立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)。true代表如果在 wacth里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，false就跟我們以前的效果一樣，在數(shù)據(jù)變化的時(shí)候才執(zhí)行，不會(huì)在綁定的時(shí)候就執(zhí)行。

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

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

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

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

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

四、v-for中key的作用

key的作用是"唯一標(biāo)識(shí)" ，可以標(biāo)志組件的唯一性，可以更高效的更新虛擬DOM。

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

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

參考可見：http://www.dbjr.com.cn/article/178628.htm

五、$nextTick的作用

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

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

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

六、$set

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

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

【響應(yīng)式：只有當(dāng)實(shí)例被創(chuàng)建時(shí)中存在的屬性才是響應(yīng)式的，或者說在data中存在的才能響應(yīng)。
原因：由于 Vue 會(huì)在初始化實(shí)例時(shí)對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的?！?/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}}不能主動(dòng)觸發(fā)視圖更新故無法被渲染出來，當(dāng)下一次視圖更新時(shí)才出現(xiàn)
    this.$set(this.a, 'c' ,200)   //觸發(fā)視圖更新，{{a.c}}被渲染
  }
}
</scirpt>

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

七、組件間的傳值

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論