vue2.0題目 - 簡書

1 .v-show和v-if的區(qū)別

v-show 通過css display 控制顯示和隱藏
v-if 組件真正的渲染和銷毀,而不是顯示和隱藏
頻繁的切換使用v-show

為何在v-for中用key

必須使用key,切不能是index和random
diff算法中通過tag和key來判斷,是否是saneNode
減少渲染次數(shù),提升渲染性能

vue的生命周期

單組件生命周期

父子組件生命周期

加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父beforeUpdate->父updated
銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
轉(zhuǎn)載 https://www.cnblogs.com/status404/p/8733629.html

組件如何通訊

父子組件props和this.$emit
自定義事件 event.$no event.$off event.$emit
vuex 所有組件傳遞信息

組件渲染和更新的過程

組件渲染和更新的過程.png

雙向數(shù)據(jù)綁定 v-model 實現(xiàn)原理

input 元素的 value= this.name
綁定 input 事件 this.name=$event.target.value
data 更新觸發(fā) re-render

computed 特點

緩存,data不變,不會重新計算
提高性能

為何組件的data必須是一個函數(shù)

vue編譯后實際上一個class類,用的時候相當(dāng)于實例化,實例化data在閉包里

ajax請求應(yīng)該放在哪個周期里?

mounted里,渲染完成后出發(fā)請求
js是單線程,ajax異步獲取數(shù)據(jù)
放在mounted之前沒有用,只會讓邏輯更加混亂

如何將組件所有props傳遞給子組件(優(yōu)先級不高)

$props
<User v-bind="$props" />

如何自己實現(xiàn)v-model

<template>
  <input type="text" :value="$emit('change',$emit.target.value)">
  <!-- change 和 model.event 對應(yīng)起來即可 -->
</template>
<script>
export default {
  model:{
    props:"text",//對應(yīng)到props 的text
    event:'change'
  },
  props:{
    text:String
  }
}
</script>

多個組件相同邏輯,如何處理

mixin
*mixin的一些確定

何時使用異步組件

加載大組件
路由異步加載

何時使用keep-alive

緩存組件,不需要重讀渲染
多個靜態(tài)tab頁的切換
優(yōu)化性能

何時使用beforeDestory

解除自定義事件 event.$off
清除定時器
解綁自定義的DOM事件,如window.scroll

什么是作用域插槽

<template>
  <a :href='url'> 
    <slot :website="website">
      {{website.subTitle}}
    </slot>
  </a>
</template>
<script>
export default {
  props:['url'],
  data(){
    return {
      website:{
        url:'www.baidu.com',
        title:"百度",
        subTitle:"貼吧"
      }
    }
  }
}
</script>

<template>
  <ScopedSlotDemo :url='website.url'>
    <template v-slot='slotProps'>
      <!-- slotProps 名字可自定義 -->
      {{slotProps.website.title}}
    </template>
  </ScopedSlotDemo>
</template>

vuex 中 action和 mutation 有何區(qū)別?

action可以處理異步,mutation 不可以
mutation 做原子操作
action可以整合多個 mutation

vue-router 常用路由模式

hash 默認(rèn)
h5 history 需服務(wù)端支持
比較

如何配置vue-router 異步加載

export default new Router({
  routers:[
    {
      path:'/',
      component:()=>import('./../components/Navigator')
    },
    {
      path:'/feedback',
      component:()=>import('./../components/feedback')
    },
  ]
})

請用vnode描述一個DOM解構(gòu)

  <div id='div1' class='container'>
    <p>vdom</p>
    <ul style='font-size:20px'>
      <li>a</li>
    </ul>
  </div>

{
  tag:'div',
  props:{
    className:'container',
    id:'div1'
  },
  children:[
    {
      tag:'p',
      children:'vdom'
    },
    {
      tag:'ul',
      props:{style:'font-size:20px'},
      children:[{
        tag:'li',
        children:'a'
      }]
    }
  ]
}

監(jiān)聽data的核心api Object.defineProperty

深度監(jiān)聽,監(jiān)聽數(shù)組
優(yōu)缺點

vue如何監(jiān)聽數(shù)組變化

Object.defineProperty 不能監(jiān)聽數(shù)組變化
重新定義原型,重寫push pop 等方法,實現(xiàn)監(jiān)聽
proxy 可以原生支持監(jiān)聽數(shù)組變化

請描述響應(yīng)式原理

監(jiān)聽data變化
組件渲染和更新過程

地方法算法的時間復(fù)雜度

O(n)
在O(n^3)(n的三次方)上做了調(diào)整
只比較同一層級,如何tag相同,則直接銷毀重建,
通過tag和key判斷是不是同一個組件,如果是同一個組件,則不重復(fù)對比,使它的復(fù)雜度從n的三次方減到n

簡述diff算法過程

patch(elem,vnode) 和patch(vnode,newNode)
patchVnode 和addVnodes 和removeVnodes
updateChildren ,key的重要性(通過key判斷是否同一個節(jié)點)

vue為何是異步渲染,$nextTick 何用?

異步渲染(以及合并data修改),以提高渲染性能
$nextTick 在dom更新完以后,觸發(fā)回調(diào)

vue常見性能優(yōu)化方法

合理使用v-show ,v-if
合理使用computed
v-for 加上key ,以及避免和v-if同時使用(v-for優(yōu)先級高,每次v-for時,都要計算v-if)
自定義事件,DOM事件及時銷毀
合理使用異步組件
合理使用keep-alive
data 層級不要太深 (深度監(jiān)聽一次完成,計算次數(shù)多)
使用vue-loader在開發(fā)環(huán)境做預(yù)編譯
webpack 層面的優(yōu)化
前端通用的性能優(yōu)化.如圖片懶加載
使用SSR(nuxt)