前端面試題(Vue篇)

2022-06-11 12:00:11 字數 2792 閱讀 2602

一、vue元件的scoped的作用

在style中加scoped屬性,表示它的樣式作用於當下模組,很好的實現樣式私有化的目的

但是在很多時候我們都要對公共樣式進行調整 但是寫在scoped屬性下無作用

解決方法:

1、混合型使用

2、深度作用選擇器 >>> 如果想在scoped中影響到子元件的樣式可以使用

二、v-on可以監聽繫結多個方法?(可以)

乙個元素繫結多個事件的寫法:comehere

methods方法中:comehere

三、vue中使用event物件

物件事件

四、vue中如何編寫可復用元件

①建立元件頁面eg toast.vue;

②用vue.extend()擴充套件乙個元件構造器,再通過例項化元件構造器,就可創造出可復用的元件

③將toast元件掛載到新建立的div上;

④把toast元件的dom新增到body裡;

⑤修改優化達到動態控制頁面顯示文字跟顯示時間

import vue from 'vue';

import toast from '@/components/toast'; //引入元件

let toastconstructor = vue.extend(toast) // 返回乙個「擴充套件例項構造器」

let mytoast = (text,duration)=>)

toastdom.text = text;

toastdom.duration = duration;

// 在指定 duration 之後讓 toast消失

settimeout(()=>, toastdom.duration);

}export default mytoast;

五、為什麼vue元件中data型別必須為函式?

因為在物件為引用型別,所以data不可以為物件,因為當有多個元件同時呼叫用乙個物件的時候,當修改其中的乙個屬性值就會影響到其他元件的值

function 和 object 都為引用型別 但是function return出的物件是唯一性 object 如果乙個值改變 那麼其他元件引用的物件值也會改變(這個不是vue設計模式的問題 而是js的特性所致)

六、vue的生命週期

1、vue的生命週期就是 vue例項從建立到銷毀的全過程

大可分為八個階段

建立前/後 載入前/後 更新前/後 銷毀前/後

開始建立、初始化資料、編譯模板、掛載dom->渲染、更新->渲染、解除安裝等一系列過程

2、頁面第一次載入會觸發的鉤子函式

beforecreate、created、beforemounte、mounted

在mounted鉤子中dom渲染已經完全載入完成

3、鉤子函式的具體使用方法

beforecreate:可以加loading事件 在載入例項時觸發

created:初始化完成時的事件可以寫在這,如在這結束loading事件,非同步請求也適合在這呼叫(dom還未完全渲染完成所以不能直接進行dom操作)

mounted:掛載元素,獲取dom節點(dom已經完全載入完成)

updated:如果對資料統一處理,在這裡寫相應的函式

beforedestroy:可以銷毀一下用不倒的計時器或者**事件 以免消耗效能以及影響其他元件使用

nexttick: 更新資料後可以直接進行dom操作

七、v-if 和 v-show 的區別:

v-if:完整的銷毀和重新建立

條件渲染當判斷條件是false是不渲染 頁面也不會生成html標籤

(只顯示一次時適用)

v-show:就是 css 的 display 的none 和 block 的切換

無論判斷條件為true或者false 頁面都會存在這個html標籤 只是通過display控制顯示與否

(頻繁切換顯示和隱藏時 適用)

八、動態繫結class的陣列用法:

①、物件方法:v-bind:class=""

②、陣列方法:v-bind:class=""

③、行內:v-bind:style=""

九、mvvm模式:

m--model 代表資料模型,也可以再model中定義資料修改和操作的業務邏輯

v--view 代表檢視 ui元件,通過資料模型轉換成ui顯示

vm--viewmodel 監聽模型資料的改變和控制檢視能力、處理使用者互動、就是同步model和view的物件

十、computed和watch的區別

computed:計算屬性,更多用於處理複雜運算  且具有快取性,computed值在getter執行後會快取,只有在其依賴的屬性值改變時才會重新呼叫getter進行計算

watch:監聽屬性 更多是觀察作用 擁有兩個引數 oldval newval 無快取性 無論值有無變化都會執行 當資料變化時進行**然後操作

十一、vue常用的修飾符

①、一般修飾符: v-model

.lazy --- v-model.lazy 在每次input事件觸發後將輸入框的值與資料進行同步,可以新增lazy修飾符從而轉變為使用change事件進行同步

.number --- 只能輸入數字

.trim --- 自動清除首尾的空格

②、事件修飾符:v-on

.stop --- 阻止單擊事件繼續傳播

.once --- 只觸發一次

③、按鍵修飾符:

④、系統修飾鍵:      

Vue 前端面試題

1.說一下 vue 的雙向繫結資料的原理 vue 實現資料雙向繫結主要是 採用資料劫持結合 發布者 訂閱者 模式的方式,通過object.defineproperty 來劫持各個屬性的setter getter,在資料變動時發布訊息給訂閱者,觸發相應監聽 2.解釋單向資料流和雙向資料繫結 單向資料流...

前端面試題 css篇

盒模型 盒模型由 margin border padding content 四個屬性組成 w3c的標準盒模型 width content,不包含 border padding ie盒模型 width border padding content 相互轉換 二者之間可以通過css3的 box siz...

前端面試題

sprites是什麼和為什麼要使用他們?css 精靈 把一堆小的整合到一張大的上,減輕伺服器對的請求數量 有可能替代sprites的方法是什麼?svg圖示,字型圖示,字元編碼等等。1 在div排版的時候,假設現在是100px的寬,我在盒子左側用padding left留個10px的白,div就撐開了...