亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關于VUE的面試題(小結)

  發(fā)布時間:2020-01-16 16:48:56   作者:福星星   我要評論
這篇文章主要介紹了關于VUE的面試題(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

一、生命周期

鉤子函數(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ù)據(jù)變動的屬性,當數(shù)據(jù)發(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ù)據(jù)的變化受多個數(shù)據(jù)影響的時候,命令式會變得重復,這個時候很容易造成濫用watch。watch更適合于在數(shù)據(jù)變化時執(zhí)行異步或者開銷較大的操作時。

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

三、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ù)據(jù)變化的時候才執(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ù)據(jù)發(fā)生變化時,diff算法會只比較更改的部分,如果數(shù)據(jù)項的順序被改變,Vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變,而是簡單復用此處每個元素。

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

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

五、$nextTick的作用

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

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

// 修改數(shù)據(jù)
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ù)據(jù)。

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

<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:

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

相關文章

  • Vue.js的高級面試題(附答案)

    這篇文章主要介紹了Vue.js的高級面試題(附答案),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2020-01-13
  • 12道vue高頻原理面試題,你能答出幾道

    這篇文章主要介紹了12道vue高頻原理面試題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-12-27
  • Vuex面試題匯總(推薦)

    這篇文章主要介紹了Vuex面試題匯總(推薦),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-15
  • web前端面試中關于VUE的面試題(含答案)

    這篇文章主要介紹了web前端面試中關于VUE的面試題(含答案),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2019-11-08
  • 面試必備的13道可以舉一反三的Vue面試題

    這篇文章主要介紹了面試必備的13道可以舉一反三的Vue面試題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來
    2019-08-05
  • 你要的Vue面試題都在這里

    這篇文章主要介紹了Vue面試題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-07-01
  • Vue 高頻基礎面試題

    這篇文章主要介紹了Vue 高頻基礎面試題,在前端面試中經常會遇到,今天小編特意整理分享到腳本之家平臺,需要的朋友可以參考下
    2020-02-12

最新評論