$nextTick 的含義
將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它,然后等待 DOM 更新。
vue 組件中的data為什么必須是一個函數(shù)
data 選項必須是一個函數(shù),因此每個實例可以維護(hù)一份被返回對象的獨立的拷貝
assets 和static 目錄的區(qū)別
一般在 static 里放一些類庫的文件,絕對路徑直接引用,assets 里放屬于項目的資源文件。相對路徑。會被 webpack 打包進(jìn)代碼
vue常用的修飾符含義
.stop:阻止事件冒泡
.prevent: 阻止默認(rèn)事件
.capture: 觸發(fā)事件捕獲
.self:當(dāng)事件在該元素本身觸發(fā)回調(diào)
.once: 只執(zhí)行一次
vue和jQuery的區(qū)別
jquery側(cè)重樣式操作,動畫效果等
Vue的數(shù)據(jù)與視圖分離,以數(shù)據(jù)驅(qū)動視圖(只關(guān)心數(shù)據(jù)變化,DOM操作被封裝
delete 和Vue.delete刪除數(shù)組的區(qū)別
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete直接刪除了數(shù)組 改變了數(shù)組的鍵值。
Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
ue-router使用pushState進(jìn)行路由更新,靜態(tài)跳轉(zhuǎn),頁面不會重新加載;location.href會觸發(fā)瀏覽器,頁面重新加載一次
vue slot的作用
Vue2.6 中把普通插槽和作用域插槽給合并了
插槽就是一個返回VNode的函數(shù)而已
v-show 和 v-if指令共同點和不同點
共同點:都是dom渲染
不同點:如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。v-if如果條件為假則不渲染dom元素
如何讓css只在當(dāng)前組件中起作用
將當(dāng)前組件的<style>修改為<style scoped>
<keep-alive>的作用是什么?
keep-alive用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗,
一般用應(yīng)于 選項卡
如何獲取dom
在html元素上設(shè)置ref屬性
在js里面this.$refs
vue的指令以及含義
v-for:基于一個數(shù)組來渲染一個列表
v-html: 更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 綁定事件監(jiān)聽器 語法糖@
v-bind:動態(tài)綁定一個或者多個attribute,或一個組件prop到表達(dá)式
v-pre: 不需要表達(dá)式 跳過這個元素和它的子元素的編譯過程
v-cloak: 不需要表達(dá)式 可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢
//css
[v-cloak] {
display: none;
}
//html
<div v-cloak>
{{ message }}
</div>
v-once: 不需要表達(dá)式 只渲染元素和組件一次
為什么使用key
無:key屬性時,狀態(tài)默認(rèn)綁定的是位置;有:key屬性時,狀態(tài)根據(jù)key的屬性值綁定到了相應(yīng)的數(shù)組元素
key 是為 Vue 中 vnode 的唯一標(biāo)記,通過這個 key,我們的 diff 操作可以更準(zhǔn)確、更快速
v-model是哪兩個指令的語法糖
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
分別簡述computed和watch的使用場景
computed 是計算屬性,有緩存 可以獲取多個值輸出一個
watch 是監(jiān)聽一個影響多個
v-on可以監(jiān)聽多個事件的寫法
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur}">//可以正常執(zhí)行不同方法
<div v-on="{ mousedown:onInput,mouseup:onFocus,mouseenter:onBlur}" >盒子</div>
//可以正常執(zhí)行不同方法
<div v-on="{click:onInput,click:onFocus,click:onBlur}">盒子</div>
//綁定多個相同事件,只執(zhí)行最后一個方法
<div @click="{onInput,onFocus,onBlur}">盒子</div>
//這樣綁定無效
params和query的區(qū)別
//query傳參:
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收參數(shù):
this.$route.query.id
//params傳參:
this.$router.push({
name:'xxx',
params:{
id:id
}
})
//接收參數(shù):
this.$route.params.id
params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這里寫成了path,接收參數(shù)頁面會是undefined。
使用query傳參的話,會在瀏覽器的url欄看到傳的參數(shù)類似于get請求,使用params傳參的話則不會,類似于post請求
vue初始化頁面閃動問題,看到{{message}}的原因和處理
[v-cloak] {
display: none;
}
created 和mounted 的區(qū)別
created 階段 可以獲取到Vue中的data和methods中的數(shù)據(jù)
mounted 可以獲取到dom元素進(jìn)行操作
vue獲取數(shù)據(jù)在那個周期函數(shù)
可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行調(diào)用,
ssr 不支持 beforeMount 、mounted 鉤子函數(shù),所以放在 created 中有助于一致性
vue-router是什么? 有哪些組件
路由模塊,主要來實現(xiàn)路由。常用的組件有router-link、router-view
active-class 是哪個組件的屬性
active-class是vue-router模塊的router-link組件中的屬性,用來做選中樣式的切換;
怎么定義vue-router 的動態(tài)路由,怎么獲取傳過來的值
可以通過query,param兩種方式
區(qū)別:query通過url傳參,刷新頁面還在;params刷新頁面不在
router 的區(qū)別
route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對象。可以從里面獲取name,path,params,query
router為VueRouter的實例,相當(dāng)于一個全局的路由器對象,里面含有很多屬性和子對象
vue-router的兩種模式
- hash: 使用 URL hash 值來作路由。支持所有瀏覽器,包括不支持 HTML5 History Api 的瀏覽器;
- history : 依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式;
- abstract : 支持所有 JavaScript 運行環(huán)境,如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API,路由會自動強制進(jìn)入這個模式.
vuex是什么? 哪種場景使用他
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
vuex有哪幾種屬性
state getters mutations actions modules