Unsplash

• class 和 style 使用動(dòng)態(tài)屬性，使用駝峰式寫法
• v-if和 v-show v-if 不渲染不滿足判斷條件的模塊，v-show 渲染但不顯示，使用場(chǎng)景：是否多次切換或頻繁更新條件狀態(tài)
• keep-alive 緩存組件，使用場(chǎng)景：頻繁切換，不需要重復(fù)渲染
• v-for 中添加唯一的 key 為了高效的更新虛擬 DOM，會(huì)根據(jù) key 值去判斷某個(gè)值是否修改，如果修改，則重新渲染這一項(xiàng)，否則復(fù)用之前的元素，添加方式：key="'list_' + index"
• mixin 抽離多個(gè)組件里的公共邏輯 缺點(diǎn)：變量來(lái)源不明確，不利于代碼閱讀；多個(gè) mixin 可能會(huì)造成命名沖突；mixin 和組件可能會(huì)出現(xiàn)多對(duì)多關(guān)系，復(fù)雜度高
• $nextTick Vue 是異步渲染，data 改變后，DOM 不會(huì)立刻渲染，頁(yè)面渲染時(shí)會(huì)將 data 的做整合，$nextTick 會(huì)在 DOM 渲染完之后執(zhí)行延遲回調(diào)，減少 DOM 操作次數(shù)，提高性能
• 組件 data 為什么返回函數(shù) 兩個(gè)實(shí)例都引用同一個(gè)對(duì)象，當(dāng)其中一個(gè)實(shí)例屬性改變時(shí)，另一個(gè)實(shí)例屬性也隨之改變，只有當(dāng)兩個(gè)實(shí)例擁有自己的作用域時(shí)，才不會(huì)互相干擾

Component.prototype.data = {
  message: 'hello'
}
Component.prototype.data = function() {
  return {
    message: 'hello'
  }
}

復(fù)制

• 組件化 傳統(tǒng)組件，只是靜態(tài)渲染，更新還要依賴于操作 DOM Vue MVVM 數(shù)據(jù)驅(qū)動(dòng)視圖，修改 Model 數(shù)據(jù)；ViewModel 監(jiān)聽(tīng)事件、指令；View 渲染
• 動(dòng)態(tài)組件 :is

// 列表頁(yè)：輪播圖、文章、視頻、圖片
<div v-for="(item, index) in newsData" :key="index">
  <component :is="item.type"/>
</div>

復(fù)制

• 異步組件 import

comments: {
  Tab: () => import('../comments/Tab')
}

復(fù)制

• 計(jì)算屬性和偵聽(tīng)器 computed 有緩存，data 不變則不會(huì)重新計(jì)算，監(jiān)聽(tīng)值類型可正常拿到 oldVal watch 一般用于監(jiān)聽(tīng)數(shù)據(jù)變化的同時(shí)，進(jìn)行異步操作或者是比較大的開(kāi)銷，監(jiān)聽(tīng)引用類型拿不到 oldVal，因?yàn)橹羔樝嗤?，此時(shí)已經(jīng)指向了新的 Val
• Vue 生命周期（創(chuàng)建、掛載、更新、銷毀） beforeCreate created 頁(yè)面還沒(méi)有渲染，但 Vue 實(shí)例已經(jīng)初始化了，可以調(diào)用 methods 中的方法、改變 data 中的數(shù)據(jù)，使用場(chǎng)景：發(fā)送請(qǐng)求獲取數(shù)據(jù) beforeMount mounted 頁(yè)面已經(jīng)渲染完畢，可以獲取到 el 中的 DOM 元素，進(jìn)行 DOM 操作 beforeUpdate updated beforeDestroy 清除定時(shí)器、自定義事件 destroyed
• 父子組件創(chuàng)建、更新順序 父組件 created 子組件 created 子組件 mounted 父組件 mounted 父組件 beforeUpdate 子組件 beforeUpdate 子組件 updated 父組件 updated
• 組件之間的傳值通信 父組件給子組件傳值通過(guò) props 子組件給父組件傳值通過(guò) $emit 觸發(fā)回調(diào) 其他組件通信，通過(guò)實(shí)例一個(gè) Vue 實(shí)例 event 作為媒介，要相互通信的組件之中，都引入 event
• 動(dòng)態(tài)路由配置（路由懶加載）

{
  path: '/user/:id',
  component: () => import('../components/User')
}

復(fù)制

• vue-router 路由模式 hash 模式 url 多了 # 號(hào)，它的特點(diǎn)在于：hash 雖然出現(xiàn) URL 中，但不會(huì)被包含在 HTTP 請(qǐng)求中，對(duì)后端完全沒(méi)有影響，不需要后臺(tái)進(jìn)行配置，因此改變 hash 不會(huì)重新加載頁(yè)面 history 模式 利用了 pushState() 和 replaceState() 方法，history 模式改變了路由地址，因?yàn)樾枰笈_(tái)配置地址

History.pushState() 方法用于在歷史中添加一條新記錄，瀏覽器地址欄立刻顯示新地址，但并不會(huì)跳轉(zhuǎn)，它只是成為瀏覽歷史中的最新記錄 History.replaceState() 的使用與 history.pushState() 非常相似，區(qū)別在于 replaceState() 是修改了當(dāng)前的歷史記錄項(xiàng)而不是新建一個(gè)

• 事件修飾符

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThis"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在event.target是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThis">...</div>

復(fù)制

• 表單部分

<template>
  <p>輸入框:{{name}}</p>
  <input type="text" v-model.trim="name"/>
  <input type="text" v-model.lazy="name"/>
  <input type="text" v-model.number="age"/>

  <p>多行文本：{{desc}}</p>
  <textarea v-model="desc"></textarea>

  <p>復(fù)選框{{checked}}</p>
  <input type="checkbox" v-model="checked"/>

  <p>多個(gè)復(fù)選框{{checkedNames}}</p>
  <input type="checkbox" id="beijing" value="beijing" v-model="checkedNames"/>
  <label for="beijing">北京</label>
  <input type="checkbox" id="shenzhen" value="shenzhen" v-model="checkedNames"/>
  <label for="shenzhen">深圳</label>
  <input type="checkbox" id="guangzhou" value="guangzhou" v-model="checkedNames"/>
  <label for="guangzhou">廣州</label>

  <p>單選{{gender}}</p>
  <input type="radio" id="male" value="male" v-model="gender"/>
  <label for="male">男</label>
  <input type="radio" id="female" value="female" v-model="gender"/>
  <label for="female">女</label>

  <p>下拉列表選擇{{selected}}</p>
  <select v-model="selected">
    <option disable value="">請(qǐng)選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

  <p>下拉列表選擇(多選){{selectedList}}</p>
  <select v-model="selectedList" multiple>
    <option disable value="">請(qǐng)選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      name: '年糕',
      age: 17,
      desc: 'lalalala',
      checked: true,
      checkedNames: {},
      gender: 'male',
      selected: '',
      selectedList: []
    }
  }
}
</script>

復(fù)制文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505844.html

到了這里，關(guān)于vue面試知識(shí)點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！