【面試】前端面試題_ZenDei技術網路在線

一、javaScript中如何檢測一個變數是 String 類型： 1. typeto（obj） "srting" 2. typeTo obj "string" 3. obj.constructor string 二、用js去除字元串空格的方法？ 1. 使用正則匹配的方式： a: str = str ...

一、javaScript中如何檢測一個變數是 String 類型：

1.  typeto（obj） ===  "srting"
2.  typeTo obj === "string"  
3.  obj.constructor === string

二、用js去除字元串空格的方法？ 1. 使用正則匹配的方式：

     a:    str = str.replace(/\s*/g,"")    //去掉所有空格  
     b:    str = str.replace(/^\s|\s$/g,"")  // 去掉兩邊的空格
     c：   str = str.replace(/^\s/,"")   // 去掉左邊的空格
     d：   str = str.replace(/\s$/g,"")  // 去掉後面的空格

2：使用 str.trim() 方法

 a:  str = str.trim(str) // 缺點無法去掉中間的空格
 b:  str.trimLeft()  str.trimRight()  // 去除左右的空格

3. 使用jquery的 $.strim() 方法

 a: str = $.trim(str)  // 缺點無法去掉中間的空格

三、如何獲取瀏覽器url查詢字元串的參數值？

function showWindowHref(){
    var shHref = window.location.href
    var args = shHref.split('?')
    if(args[0] === shHref){
        return ""
    }
    var arr = args[1].split('&')
    var obj = {}
    for(var i = 0 ; i < arr.length; i++){
        var stg = arr[i].split('=')
        obj[stg[0]] = stg[1];
    }
    return obj;
}
var href = showWindowHref();
var value = href['name']

四、js對字元串的操作函數

concat() 將兩個或者多個文本的字元串連接起來，返回一個新字元串。
indexOf() 返回字元在字元串的匹配位置。如果沒有匹配到返回 -1 。
charAt() 返回指定位置的字元。
lastIndexOf() 返回匹配到的字元最後一次出現的位置。
match() 檢查一個字元是否匹配到正則表達式。
substr() 返回從字元串的 startPos 位置開始。長度為 length的字元串。
substring() 返回字元串的一個子串。第一個參數是開始位置，第二個是結束位置。
slince() 提取字元串的一部分，返回一個新字元串。
replace() 用來查找匹配一個正則字元串，使用新字元串代替匹配字元串。
search() 執行一個正則表達式，如果匹配成功返回索引位置，如果沒有成功返回 -1 。
split() 將一個字元串劃分為一個字元串數組。
toLowerCase() 將整個字元串轉成小寫。
toUpperCase() 將整個字元串換成大寫。

五、如何添加、移動、移除、複製、創建、查找節點？ 1、添加節點：

a:  createDocumentFragment()   // 創建一個DOM節點
b:  createElement()   // 創建一個具體元素
c：createTextNode()  // 創建一個文本節點

2 、添加、移除、替換、插入

a： appendChild()   // 添加
b:  removeChild()  // 移除
c：  replaceChild()   // 替換
d：  insertBefore()   // 插入

3、查找

a： getElementsByTagName()   // 根據標簽名稱查找
b： getElementsByName()   // 根據標簽元素的Name 屬性
c：  getElementsById()    // 根據標簽的 id查找   唯一性

六、寫出3個關於this的經典應用 1. 在html中的應用

<input type="button" onclick=“showInfo(this);”  value="點擊一下"  />

2. 在構造函數中的應用

function Animal(name,color){
    this.name = name;
    this.color = color;
}

3. 在 input點擊後獲取值

var sBtn = getElementById('#botton')
sBtn.onclick = function(){
        console.log(this.value)
    }

4. 在 apply 和 call 求數組最值時的應用

var number = [22,44,55,66,33,88,99]
var applyNumber = Math.max.apply(this,number)
console.log(applyNumber)
var callNumber = Math.min.call(this,22,44,55,66,33,88,99)
console.log(callNumber)

七、比較 typeof 和 instancefo 區別？相同點：都是用來判斷一個變數是否為空，或者是什麼類型。不同點： typeof 是返回數據類型。而instanceof是返回一個boolean 值。詳細區別： 1. typeof 一般只能返回這幾種：number、boolean、undefined、fucntion、object、string 2. typeof 用於判斷一個變數是否存在 if(typeof a!=undefined) 3. typeof 對於 Array ，null 等特殊對線都會判斷為 object instanceof 用於判斷一個變數是否是於一個對象。

a instanceof b  ? "true" : "false"      
var array = new Array()
console.log(array instanceof Array);
console.log(array instanceof Object);

2. 判斷構造函數的類型

function test(){}
var a = new test()
console.log(a instanceof test)

3. instanceof 判斷的 object 只是js 語法中的對象，不是dom模型對像

 if (window instanceof Object){ alert('Y')} else {  alert('N');}   // 我的到的是true

八、如何理解閉包？ 1.定義：一個函數的返回值是另一個函數，並且另一個函數應用了其父函數的內部變數，並且在外部被執行了，就形成了閉包。 2.使函數外部可以調用內部申明的變數。 3. 實例：根據作用域鏈的規則，底層作用域沒有申明的變數會向上一級查到。知道找到window的變數，如果沒有就返回 undefined , 有就返回。

var count = 10
 
function add(){
    var count = 0 ;
    return function(){
        console.log( count += 1);
    }
    
}
var s = add();
s();
s();

4. 變數的作用域：全局作用域和局部作用域 a. 函數書內部可以讀取函數外部的變數，外部不可以讀取內部的變數。 b. 內部申明變數的時候要用var 。 5. 閉包需要註意的地方： a. 濫用閉包，會的造成記憶體泄露，由於閉包中的變數是存儲在記憶體中的，記憶體消耗過大會影響網頁性能，解決辦法是在函數退出之前刪除局部變數。 b. 改變父元素的值，隨意改變父元素的值會影響父元素的其他地方。九、什麼是跨域？跨域請求的資源方法有哪些？ 1.什麼是跨域？瀏覽器的同源策略導致的，方式發送請求url的協儀、功能變數名稱、埠三者有一個與當前頁面地址不同即為跨域。 2. 方法？ a. porxy 代理定義：用於將請求先發送給後臺伺服器，後臺伺服器在發送請求，然後將結果返回給前端。實現方法： nginx 方向代理。註意點： 1.如果代理是請求的 https協議。那麼porxy需要先新人改證書。否則請求失敗。 3. CORS 定義：現在瀏覽器自身支持跨域的一種方法。用法：一般需要後端工作人員在請求數據的時候允許跨域的操作。

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

4. jsonp 跨域定義：動態插入一個script 標簽。原因為瀏覽器對script資源的請求沒有同源策略的限時。資源請求到就會執行沒有阻塞。實現方式： 1. 首先在客戶端註冊一個callback, 然後把callback的名字傳給伺服器。此時，伺服器先生成JSON數據。然後以JavaScript 語法的方式，生成一個function,function名字就是傳遞上來的參數jsonp. 2.然後，將JSON數據直接以入參的方式，放置到function中，這樣就生成了一段 js 語法的文檔，返回給客戶端。 3。最後，在客戶端瀏覽器中解析script標簽，並執行返回的JavaScript文檔，此時數據作為參數，傳入到了客戶端預先定義好的回調函數里(動態執行回調函數)。特點：通過動態的創建script標簽來請求其它域的數據，數據為 json 格式。缺點： 1. 無法實現post請求。2. 請求是否失敗很難判斷。十、談談垃圾回收機制的方式以及記憶體管理？ 1. 回收機制方式？ a：垃圾回收機制：執行環境負責管理的代碼執行過程中的的記憶體。 b: 垃圾收集器會定期（周期性）的找出那些不在繼續使用的變數，然後釋放記憶體，但是這個不是真實的，開銷比較大，實際垃圾回收機制會定期的執行。 c: 示例如下

var fn1 = function(){
    var obj = { name: "張三" }
}
var fn2 = function(){
    var obj = {name: "張三"}
    return obj
}
var a = fn1();
var b = fn2();

fn1 中申明的變數是局部變數，在執行fn1 後，該記憶體會被js引擎中的垃圾回收機制釋放。而fn2 中返回的變數被全局變數b所指所以改記憶體並不會被釋放。 d: 回收策略：標記清理和引用計數標記清理：當變數進入環境是被標記為“進入環境”離開環境是“離開環境” 某時候立即回收器會過濾掉所環境中所有的變數，以及進入的變數。剩下的就是準備回收的變數。引用標記：就是變數的應用次數，當變數引用次數為0時，就準備回收。十一、開發中遇到記憶體泄漏是如何解決的？ 1：定義：記憶體泄漏是指一塊被分配的記憶體，既不能使用，也不能回收。知道瀏覽器進程結束。c#和java中使用自動垃圾回收方法管理記憶體，幾乎不會發生泄漏。瀏覽器也是自動垃圾回收方法，但是瀏覽器方法有bug會產生記憶體泄露。 2：記憶體泄漏的幾種情況：（1）：當頁面中的元素被移除替換而綁定的事件沒有被移除，IE中沒有做出恰當處理。需要手工移除事件。（2）：由於函數裡面定義函數，內部函數或者事件回調外爆了。就形成了閉包。閉包會使得函數內局部變數得不到釋放。

function bindEvent(){
    var obj = document.getElementById('test')
    obj.onclick = function(){
 
    }
}
                            
function bindEvent(){
    var obj = document.getElementById('test')
    obj.onclick = function(){
 
    }
    obj = null
}

十二、面向對象繼承的實現。面向對象的基本特征是：多態、繼承、封閉 java中繼承的方法：

prototype 原型鏈繼承
call/apply 繼承
混合方法（prototype 和 call /applay ）
對象冒充
只繼承原型鏈的繼承
完美組合繼承
Object.create 繼承

1: 原型鏈繼承（內部函數和原型鏈上都可以繼承）

function teacher(name){
    this.name = name
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name)
}
var teacher1 = new teacher('張三')
 
function student(name){
    this.name = name
}
 
student.prototype = new teacher()
 
var student1 = new student('李四')
 
teacher1.sayName()
student1.sayName()

缺點： 1. 子類的原型是父類的實例化，父類的內部申明的方法被繼承在子類原型鏈上。 2. 在創建子類實例時不能向父類構造函數傳遞參數。 2： call()和apply()方法（只能繼承內部申明的函數，不能繼承原型連上）

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
//student1.sayName();           // 報錯
student1.sayAge();

缺點：無法繼承原型鏈上的方法 3：混合適用法（原型和內部申明的方法都可繼承）

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
student.prototype =  new teacher() 
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
student1.sayName();             // 不報錯   由於繼承下來了。
student1.sayAge();

缺點：兩次調用的父元素的構造函數，子類繼承父類的屬性，一組在實例上面繼承，一組在原型上面繼承（原型上創建不多餘的本該在實例的上的屬性。內部函數被經常在子類的原型上。）

對象冒充 (只能繼承內部申明的函數，不能繼承原型鏈上的方法)

function Teacher(name,age){
    this.name = name;
    this.age = age;
    this.sayAge = function(){
        console.log('對象方法')
    }
}
Teacher.name = "牛逼"
Teacher.sayName = function(){
    console.log('name'+ this.name + '靜態方法' )
}
Teacher.prototype.sayAAA = function(){
    console.log('prototype -- teacher')
}
function Student(name,age){
    this.student = Teacher ;
    this.student(name,age);
    delete this.student ;
}
// Student.prototype.sayAAA = function(){
//  console.log('student')
// }
 
var teacher1 = new Teacher('張三','17');
var student1 = new Student('李四','25');
// console.log(teacher1)
teacher1.sayAAA();
student1.sayAAA();

缺點：原型鏈上的方法無法繼承

只繼承原型鏈的繼承(無法繼承內部函數)

function teacher(name){
    this.name = name
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name)
}
var teacher1 = new teacher('張三')
 
function student(name){
    this.name = name
}
 
student.prototype = teacher.prototype
 
var student1 = new student('李四')
 
teacher1.sayName()
student1.sayName()

缺點：無法繼承構造函數的對象方法

完美組合繼承

function teacher(name,age){
    this.name = name ;
    this.age = age;
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('name' + this.name , "age" + this.age)
}
 
function student(){
    var args = arguments
    teacher.call(this,args[0] ,args[1]);
}
student.prototype =  teacher.prototype
var teacher1 = new teacher('張三' ,'25');
var student1 = new student('王五','26');
console.log(teacher1)
console.log(student1)
teacher1.sayName();
teacher1.sayAge();
student1.sayName();             // 不報錯   由於繼承下來了。
student1.sayAge();

缺點：========= 7. Object.create 繼承

function teacher(name){
    this.name = name
    this.sayAge = function(){
        console.log('內部方法')
    }
}
teacher.prototype.sayName = function(){
    console.log('prototype')
}
function student(name){
    this.name = name
}
 
student.prototype = Object.create(teacher.prototype)
 
var student1 = new student('張三')
console.log(student1)
student1.sayAge();            // 報錯
student1.sayName();         // prototype

缺點：無法繼承內部申明的方法。與student.prototype = teacher.prototype 的區別在於一個是在自己的原型裡面生成另一個父元素一樣的原型鏈，一個是將原型指向父元素的原型。十二、構造函數的三種方法申明 1. 靜態方法：就是通過構造函數 XXX.test = function (){} 來申明的方法。實例化是無法繼承的，通過繼承也會是無法繼承的，調用方式只有 XXX.test() 方式來調用。 2. 對象方法一般是在構造函數裡面通過 this.test = function(){} 來申明的。實例化和繼承都可以繼承屬性。 3. 對象的原型方法，通過實例化和繼承都可以被繼承。十三、判斷一個字元串中出現次數最多的的字母？

var str = 'asdfssaaasasasasaa'
var json = {}
for(var i = 0 ; i < str.length ; i++){
    if(!json[str[i]]){
        json[str[i]] = 1
    }else{
        json[str[i]]++
    }
    
}
var iMax = 0;
var iIndex = ""
for( key in json){
    if(json[key] > iIndex){
        iIndex = json[key];
        iMax = key
    }
}
console.log('出現次數最多的是:'+iMax+'出現'+iIndex+'次');

十四、Array 對象屬性 constructor 返回對創建此對象的數組函數的引用。 length 設置或返回數組中元素的數目。 prototype 使您有能力向對象添加屬性和方法。 Array 對象方法 concat() 連接兩個或更多的數組，並返回結果。 join() 把數組的所有元素放入一個字元串。元素通過指定的分隔符進行分隔。 pop() 刪除並返回數組的最後一個元素。 shift() 刪除並返回數組的第一個元素 push() 向數組的末尾添加一個或更多元素，並返回新的長度。 unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。 reverse() 顛倒數組中元素的順序。 slice() 從某個已有的數組返回選定的元素 sort() 對數組的元素進行排序 splice() 刪除元素，並向數組添加新元素。 toSource() 返回該對象的源代碼。 toString() 把數組轉換為字元串，並返回結果。 toLocaleString() 把數組轉換為本地數組，並返回結果。 valueOf() 返回數組對象的原始值十五、編寫一個方法去掉一個數組的重覆元素方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);
結果如下： [0, 2, 3, 4]

方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
結果為：[2, 3, 4, 5, 6]

HTML & CSS:

一、什麼是盒模型？一個元素占空間大小的構成：border、padding、margin、content 組成。二、什麼是行內元素、塊級元素、空元素。行內元素： span i em img a b strong input button textarea label select 塊級元素： div ui li p h1-h6 dl dd dt blockquote 空元素：（系沒有內容的元素）： img input br link mate hr 三、css的垂直居中5種方式：

父元素設置： position：relative ；

子元素設置為： position： absolute; top:0; left:0; right:0; bottom:0; margin: auto; 2. 父元素設置為： position： relative ；子元素設置為： position： absolute：top：50%；left：50%；margin-top: 高度一半；margin- left：寬度的一半 3. 父元素設置為： poistion： relative；子元素設置為：position： absolute；top: 50%; left: 50%; trasform: translate(-50%,-50%); 4. 父元素設置為: display: felx ; align-items: conter ; justify-content: conter ; 子元素不設置： 5. 文本的垂直和水平居中： text-align： conter ； line-height： height ；四、簡述一下 src 和 href 的區別？ src：用於指向外部資源的位置，將內容嵌套到文檔所在位置，將所引用的資源下載並應用到文檔。在下此類文檔的時候瀏覽器引擎會暫停其他資源的下載和處理。知道此類文件被下載、編譯、執行完成，更像是嵌入到當前標簽內。這也是js為什麼需要在最後載入。 href：用於指向網路資源的位置，建立當前文檔和當前連接的聯繫。用於超鏈接。五、簡述同步和非同步的區別：同步是阻塞模式，非同步是不阻塞模式同步是在當一個進程進行某個請求的時候，不在執行後面的代碼，一直處於等待狀態。直到受到返回信息。非同步是指當一個進程進行某個請求的時候，繼續執行後面的代碼，受到返回在執行返回的代碼。效率高。六、px 和 em 的區別 px和em 都是長度單位 px：是一個固定大小的單位。 em: 值不是固定的。並且會繼承父元素的font-size:的大小。瀏覽器預設font-size：是16px ；所以 16px = 1em 七、瀏覽器內核分別是什麼？ IE: trident 內核 Firfox: gecko 內核 Safari： webkit 內核 Opera : Blink 內核 Chrome： Blink內核八、什麼叫優雅降級和漸進增強？優雅降級：一開始就構建完整功能，然後在相容低版本的瀏覽器。漸進增強：針對低版本的瀏覽器時先保證最基本的功能，然後在根據高版本的瀏覽器追加功能。九、localstorage 、 sessionstorage 、 cookie 的區別？共同點: 存儲瀏覽器的緩存數據區別： 1. 存儲內容是否發送到伺服器：設置cookie後會將存儲的數據自動發到伺服器，造成寬頻浪費。 web storage 會將數據緩存在本地。 2. 數據儲存的大小不同： cookie 是不能超過4K, web storage 可以大到5M 3. 數據儲存的時間區別： cookie 在這支時間之前都有效。 sessionstorage 在關閉瀏覽器之前有效。 localstorage 是永久有效的。 4. 作用域不同： cookie 和 localstorage 是在同源視窗中共用的。sessionstorage不會在十、 web storage 於 cookie的優勢： 1. 存儲空間大 2. 不會向伺服器發送內容，3.豐富易用的介面，4獨立的存儲空間。十一、ajax的優缺點以及工作原理？定義和用法： asynchronous javascript and xml ；。是一種快速創建動態網頁的技術，無需重新載入真個頁面，只需要部分刷新的技術。優點： 1.減少了伺服器端壓力，按需請求，最大程度的減少了冗餘請求。 2. 局部刷新。 3. 基於XML的標準。廣泛應用。缺點： 1.大量的ajax情求，在編輯的時候需要考錄瀏覽器相容。 2. 只是局部刷新，對後退沒有用。 3.對流媒體的和移動設備的支持不太好。 ajax 實現步驟： 1.創建ajax對象。（XMLHttpRequest） 2.判斷傳輸方式（GET/POST） 3.打開連接（open） 4.發送請求（send） 5.完成前四步。onreadystatechange 判斷響應碼在200-300.或者 304.執行回調。十二、請指出document load 和 document ready 的區別？相同點: 頁面文檔載入是觸發。不同點： ready 表示文檔已經載入完成，不包含圖片和和非文字文件 load 表示文檔載入完成，包含圖片文件在內的所有元素十三、正則表達 1. 寫一個function 清楚字元串前後的空格。

function trim(str){
    if(str && typeof str === "string"){
        return str.replace(/(\^s*)| (s*)$ /g ,"");
    }
 
}

郵箱校驗

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "[email protected]";
console.log(reg.test(email));    // true

十四、開發以及性能的優化 1、規避多人開發函數重名命名的問題？命名空間、封閉空間、變數轉化為對象變數、模塊化、對象化 2、請說出三種減低頁面的載入時間的方法? (1) 壓縮css，js 文件（2）合併css，js 文件，減少http請求（3）外部引入的js、css放在最底部 (4) 減少dom操作。儘可能的用變數替換不必要的dom操作。 3、你所瞭解的web技術攻擊（1）XSS 跨站腳本攻擊：通過存在安全漏洞的網站，使得註冊用戶用戶的瀏覽器執行非法html或者jacascript代碼。（2）SQL 註入攻擊（3）SCRF 攻擊：通過已經設置好的陷阱，對註冊用戶做一些信息更改。 4、web前端如何提高性能的優化？內容方面： 1. 減少HTTP請求 2. 減少dom 3. 使用ajax請求，（可緩存）針對css： 1.將css代碼放在上端。 2.從頁面中剝離js、css 3. 精簡css。4 避免css表達式、針對jacascript： 1. 腳本放在底部。 2.從頁面剝離js代碼。3. 精簡代碼。4.移除重覆針對圖片： 1. 優化圖片。2不要在html中使用縮放圖。3。給圖片上設置寬高。一面圖片為載入不影響後面的載入。 5、瀏覽器如何渲染頁面？ 1. 解析html文件，創建dom樹，遇到 link style 和 script 會阻塞。外部樣式不會阻塞 script的載入。 2. 解析css。優先順序別：瀏覽器預設樣式< 用戶設置對象 < 外部樣式 < 內聯樣式 < html中的style 3. 將css於html結合。渲染dom樹。 4. 佈局和重繪。重繪和重排。 6.頁面閃爍 --》頁面中先載入出html的結構，之後再載入我們的樣式 vue.js 題目 1、v-model是什麼？ vue中標簽怎麼綁定事件？答：v-model這個指令只能用在表單元素上，可以用他進行雙向數據綁定。綁定事件：<input @click=doLog() /> 2、mvvm框架是什麼？說說對雙向數據綁定的理解？它和其它框架（jquery）的區別是什麼？哪些場景適合？答：mvvm的m模型就是用來定義驅動的數據、v經過數據改變後的html、vm就是連接數據和視圖，用來實現雙向綁定雙向綁定:一個變了另外一個跟著變了，例如：視圖一個綁定了模型的節點有變化，模型對應的值會跟著變區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。場景：數據操作比較多的場景，更加便捷 3、自定義指令的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？答：全局定義指令：在vue對象的directive方法裡面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令（局部定義指令）：directives 鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）、componentUpdated（被綁定元素所在模板完成一次更新周期時調用）、unbind（只調用一次，指令與元素解綁時調用）鉤子函數參數：el、binding 4、說出至少4種vue當中的指令和它的用法？答：v-if：判斷是否隱藏；v-for：數據迴圈出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定 5、請詳細說下你對vue生命周期的理解？總共分為8個階段創建前/後，載入前/後，更新前/後，銷毀前/後。創建前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。更新前/後：當data變化時，會觸發beforeUpdate和updated方法。銷毀前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在 6、請說下 vue 組件的優點，以及註冊使用的過程？答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。使用Vue.component方法註冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。 7、Vue.js內置的指令，用什麼開頭？ v-開頭的以上內容借鑒： https://blog.csdn.net/wdlhao/article/details/79079660