金三銀四 2021年前端面試筆記

又到了找工作的黃金時(shí)間，3-4月份，跳槽是每個(gè)人的職業(yè)生涯中都要經(jīng)歷的過程，筆者最近也是復(fù)習(xí)了一波，整理了一下面試中關(guān)于javascript和vue的一些問題仍秤。看到本文的你如果感覺對(duì)你有幫助可很，不如素質(zhì)三連诗力，碼字不易，感謝您的支持我抠！

JavaScript

數(shù)據(jù)類型

介紹一下js中的數(shù)據(jù)類型以及值是如何存儲(chǔ)的

• JavaScript中一共有8種數(shù)據(jù)類型苇本，其中基本數(shù)據(jù)類型有：Null袜茧、Undefined、Boolean瓣窄、String笛厦、Number、Bigint俺夕、Symbol裳凸。
  還有一種數(shù)據(jù)類型object：里面包含function、Array劝贸、Date等姨谷。

• 基本數(shù)據(jù)類型保存在棧區(qū)中，占據(jù)空間小映九、大小固定梦湘。
  引用數(shù)據(jù)類型保存在棧區(qū)和堆區(qū)，占據(jù)空間大氯迂，且大小不固定践叠。引用數(shù)據(jù)類型在棧區(qū)中存放了指針，指針指向堆區(qū)的實(shí)際地址嚼蚀。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址管挟，取得地址后從堆中獲得實(shí)體轿曙。

js中數(shù)據(jù)類型判斷

說一說在js中判斷數(shù)據(jù)類型的方法

typeof

• typeof可以判斷原始數(shù)據(jù)類型，除了null之外：

    console.log(typeof 2) //number    console.log(typeof 'hello') //string    console.log(typeof null) //object    console.log(typeof true)//boolean    console.log(typeof undefined) //undefined    console.log(typeof []) //object

• 因?yàn)橐驗(yàn)樘厥庵祅ull被認(rèn)為是一個(gè)對(duì)空對(duì)象的引用

instanceof

• instanceof可以正確的判斷對(duì)象的類型僻孝，因?yàn)閮?nèi)部機(jī)制是通過判斷對(duì)象的原型鏈中是不是能找到類型的prototype:

wWAKt1.png

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">wWAKt1.png</figcaption>

    console.log([] instanceof Array) //true    console.log({} instanceof Object)//true    console.log(function(){} instanceof Function)//true    console.log(1 instanceof Number)//false

constructor

• constructor主要是利用原型上的prototype.constructor指向?qū)嵗臉?gòu)造函數(shù)來進(jìn)行判斷的

    console.log((1).constructor === Number) //true    console.log('1'.constructor===String)//true    console.log((function(){}).constructor===Function) //true    console.log([].constructor===Array) //true    console.log(({}).constructor===Object) //true

• 但constructor有個(gè)特點(diǎn)就是：如果我創(chuàng)建了一個(gè)對(duì)象导帝，我們?cè)偃バ薷乃脑停妥兊貌荒敲纯煽浚?/li>

    function Func(){}    Func.prototype=new Array();    const f=new Func()    console.log(f.constructor===Function)//false

Object.prototype.toString.call

• 使用 Object 對(duì)象的原型方法toString,返回值是[object 類型]字符串,該方法基本上能判斷所有的數(shù)據(jù)類型.

    var toString = Object.prototype.toString;    console.log(toString.call(2)) //[object Number]    console.log(toString.call(true)) //[object Boolean]    console.log(toString.call(function(){})) //[object Function]

作用域和作用域鏈

談一談你對(duì)作用域穿铆、作用域鏈的理解您单。

• 作用域：作用域就是定義變量的區(qū)域，它有一套訪問變量的規(guī)則荞雏，根據(jù)這套規(guī)則來管理瀏覽器引擎如何在當(dāng)前作用域和嵌套作用域中中根據(jù)變量（標(biāo)識(shí)符）進(jìn)行變量查找虐秦。

• 作用域鏈：作用域鏈保證對(duì)執(zhí)行環(huán)境有權(quán)訪問所以變量和函數(shù)的有序訪問，通過作用域鏈凤优，我們可以訪問到外層環(huán)境中的變量和函數(shù)悦陋。

• 作用域鏈的本質(zhì)上是一個(gè)指向變量對(duì)象的指針列表。變量對(duì)象是一個(gè)包含了執(zhí)行環(huán)境中所有變量和函數(shù)的對(duì)象筑辨。作用域鏈的前端始終都是當(dāng)前執(zhí)行上下文的變量對(duì)象俺驶。全局執(zhí)行上下文的變量對(duì)象（也就是全局對(duì)象）始終是作用域鏈的最后一個(gè)對(duì)象。當(dāng)我們查找一個(gè)變量時(shí)棍辕，如果當(dāng)前執(zhí)行環(huán)境中沒有找到暮现，我們可以沿著作用域鏈向后查找

this

談一談你對(duì)this的理解还绘，以及在各種環(huán)境下的this

• 在瀏覽器里，在全局范圍內(nèi)this指向window對(duì)象

• 在函數(shù)中栖袋，this永遠(yuǎn)指向最后調(diào)用他的那個(gè)對(duì)象(箭頭函數(shù)除外)拍顷。

• 在構(gòu)造函數(shù)中，this指向new出來的新對(duì)象栋荸。

• call菇怀、apply、bind中的this被強(qiáng)綁定在指定的那個(gè)對(duì)象上晌块。

• 箭頭函數(shù)this為父作用域的this爱沟，不是調(diào)用時(shí)的this。

原型匆背，原型鏈

談一談JavaScript中原型呼伸，原型鏈，有什么特點(diǎn)

• 在js中钝尸，我們可以通過構(gòu)造函數(shù)來創(chuàng)建一個(gè)對(duì)象括享，每個(gè)構(gòu)造函數(shù)都會(huì)有個(gè)prototype屬性，這個(gè)屬性值是一個(gè)對(duì)象珍促，這個(gè)對(duì)象包含了可以由該構(gòu)造函數(shù)的所有實(shí)例共享的屬性和方法铃辖。當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性猪叙，那么它就會(huì)去它的原型對(duì)象里找這個(gè)屬性娇斩，這個(gè)原型對(duì)象又會(huì)有自己的原型，于是就這樣一直找下去穴翩，也就是原型鏈的概念犬第。原型鏈的盡頭一般來說都是Object.prototype。

    function Func(name){        this.name=name    };    let tom=new Func('TOM');    console.log(tom)    console.log(tom.__proto__===Func.prototype) //true    console.log(tom.__proto__.constructor==Func) //true

• 再上一張圖芒帕，更好理解

w2zC4g.png

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">w2zC4g.png</figcaption>

• 原型對(duì)象的作用：

    function Func(name){        this.name=name;        this.say=function(){            console.log(this.name)        }    }    let m=new Func('tom');    let n=new Func('tom')    console.log(m)    console.log(n)    console.log(m.say===n.say) //false 

• 每次進(jìn)行new歉嗓，都會(huì)開辟新的區(qū)域，這樣很顯然不好背蟆，所以我們可以吧共有的方法放在原型對(duì)象上鉴分，這樣就避免了內(nèi)存浪費(fèi)：

    function Func(name){        this.name=name;    }    Func.prototype.say=function(){        console.log(this.name)    }    let m=new Func('tom');    let n=new Func('tom')    console.log(m)    console.log(n)    console.log(m.say===n.say) //true

閉包

談一談對(duì)閉包的理解，以及使用場(chǎng)景

• 閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域內(nèi)的變量的函數(shù)淆储。閉包最常見的就是在函數(shù)中創(chuàng)建函數(shù)冠场，創(chuàng)建的函數(shù)就可以訪問到當(dāng)前函數(shù)的局部變量。

• 過使用閉包本砰，我們可以通過在外部調(diào)用閉包函數(shù)碴裙，從而在外部訪問到函數(shù)內(nèi)部的變量，可以使用這種方法來創(chuàng)建私有變量。

• 另一個(gè)用途是使已經(jīng)運(yùn)行結(jié)束的函數(shù)上下文中的變量對(duì)象繼續(xù)留在內(nèi)存中舔株，因?yàn)殚]包函數(shù)保留了這個(gè)變量對(duì)象的引用莺琳，所以這個(gè)變量對(duì)象不會(huì)被回收。

    function func(){        let n=0;        function add(){            n++;            console.log(n)        }        return add    }    let a=func();    a() //1    a()//2

事件模型

什么是事件载慈？都有哪幾種事件惭等？

• 事件是指用戶操作頁面時(shí)候發(fā)生的交互或者網(wǎng)頁本身的一些操作，瀏覽器一共有三種事件模型：

• DOM0級(jí)模型：這種模型不會(huì)傳播办铡，沒有事件流的概念辞做，但現(xiàn)在有的瀏覽器支持以冒泡的方式實(shí)現(xiàn)，它可以在網(wǎng)頁中直接定義監(jiān)聽函數(shù)寡具，也可以通過js屬性來指定監(jiān)聽函數(shù)秤茅。

• IE事件模型：在這種事件模型中，一次事件一共有兩個(gè)過程童叠，事件處理階段和事件冒泡階段框喳，事件處理階段首先會(huì)執(zhí)行目標(biāo)元素綁定的監(jiān)聽事件。然后是事件冒泡階段厦坛，冒泡指的是事件從冒泡到document五垮，一次檢查經(jīng)過的節(jié)點(diǎn)是否綁定了事件監(jiān)聽函數(shù)，會(huì)按順序依次進(jìn)行杜秸。

• DOM2級(jí)事件模型：在該事件模型中放仗，一次事件一共有三個(gè)過程，第一個(gè)過程就是事件捕獲階段撬碟，捕獲指的是事件從document一直向下傳播到目標(biāo)元素匙监，依次檢查經(jīng)過的節(jié)點(diǎn)是否綁定了事件監(jiān)聽函數(shù)，如果有則執(zhí)行小作。后面的兩個(gè)階段和IE事件模型基本一樣。這樣的事件模型稼钩，事件綁定的函數(shù)就是addEventListener,其中第三個(gè)參數(shù)可以指定事件是否在捕獲階段執(zhí)行顾稀。

    //DMO0     element.onclick=function(){}    //DOM2    element.addEventListener('click',function(){},false)    //DOM3 增加了鼠標(biāo)事件，鍵盤事件    element.addEventListener('keyup',function(){},false)

• DOM事件的捕獲流程:window--->document--->html--->body--->逐漸傳遞

• DOM事件冒泡過程：目標(biāo)元素--->父元素--->body--->html--->document--->window

Event對(duì)象的常見應(yīng)用

• event.preventDefault() //阻止默認(rèn)行為 比阻止點(diǎn)擊a標(biāo)簽轉(zhuǎn)跳

• event.stopPropagation() //阻止事件冒泡

• event.stoplmmediatePropagation() //同時(shí)注冊(cè)兩個(gè)事件坝撑，決定事件優(yōu)先級(jí)

• event.currentTarget() //事件代理静秆，把子元素的事件委托給父元素

• event.target() //當(dāng)前被點(diǎn)擊的元素

異步編程

談一談js中的異步編程方案，它為了解決什么巡李？

• 我們之前寫代碼抚笔，可能會(huì)出現(xiàn)函數(shù)嵌套函數(shù)，如果多個(gè)嵌套侨拦，結(jié)構(gòu)就會(huì)很亂殊橙，也不容易維護(hù)，于是便有了異步編程的概念。

Promise

• Promise是異步編程的一種解決方案膨蛮，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大叠纹。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)敞葛，統(tǒng)一了用法誉察，原生提供了Promise對(duì)象。

• 所謂Promise惹谐，簡(jiǎn)單說就是一個(gè)容器持偏，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說氨肌，Promise 是一個(gè)對(duì)象鸿秆，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API儒飒，各種異步操作都可以用同樣的方法進(jìn)行處理谬莹。

• Promise對(duì)象的狀態(tài)不受外界影響，它有三種狀態(tài)桩了，pending(進(jìn)行中)附帽、fulfilled(已成功)、rejected(已失敗)井誉。只有異步操作的結(jié)果蕉扮，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)颗圣。這也是Promise這個(gè)名字的由來喳钟，它的英語意思就是“承諾”，表示其他手段無法改變在岂。它的狀態(tài)可以從pending變?yōu)?strong>fulfilled奔则，或者從pending變?yōu)?strong>rejected。

then方法

• Promise只是能夠簡(jiǎn)化層層回調(diào)的寫法蔽午，而實(shí)質(zhì)上易茬，Promise的精髓是“狀態(tài)”，用維護(hù)狀態(tài)及老、傳遞狀態(tài)的方式來使得回調(diào)函數(shù)能夠及時(shí)調(diào)用抽莱，它比傳遞callback函數(shù)要簡(jiǎn)單、靈活的多骄恶。

    const testPormise=new Promise((resovle,reject)=>{       console.log("hi,Pormise");       let test=true;       if(test){            resovle('成功～')       }else{           reject("失敗了")       }    });    testPormise.then((res)=>{        console.log(res)    }).catch((erro)=>{        console.log(erro)    })

rejected

• 只有執(zhí)行了rejected這樣就可以在then中捕獲到食铐，然后執(zhí)行失敗情況下的回調(diào)：

 let p = new Promise((resolve, reject) => {        //做一些異步操作      setTimeout(function(){            var num = Math.ceil(Math.random()*10); //生成1-10的隨機(jī)數(shù)            if(num<=3){                resolve(num);            }            else{                reject('數(shù)字太大了');            }      }, 2000);    });    p.then((data) => {            console.log('resolved',data);        },(err) => {            console.log('rejected',err);        }    ); 

catch

• catch和then用法一樣，用來指定reject的回調(diào)：

    p.then((data) => {        console.log('resolved',data);    }).catch((err) => {        console.log('rejected',err);    });

all

• all接收一個(gè)數(shù)組參數(shù)僧鲁，里面的值最終都算返回Promise對(duì)象,誰執(zhí)行的慢虐呻，以誰為準(zhǔn)執(zhí)行回調(diào)：

    let Promise1 = new Promise(function(resolve, reject){})    let Promise2 = new Promise(function(resolve, reject){})    let Promise3 = new Promise(function(resolve, reject){})    let p = Promise.all([Promise1, Promise2, Promise3])    p.then(funciton(){    // 三個(gè)都成功則成功      }, function(){    // 只要有失敗象泵，則失敗     })

race

• 誰跑的快，以誰為準(zhǔn)執(zhí)行回調(diào),常見應(yīng)用場(chǎng)景為設(shè)置請(qǐng)求超時(shí)時(shí)間铃慷，在請(qǐng)求超時(shí)后執(zhí)行相應(yīng)的回調(diào)单芜。

Event Loop

說一說js中事件執(zhí)行機(jī)制是怎么樣的？

• “JavaScript 是單線程犁柜、異步洲鸠、非阻塞、解釋型腳本語言”馋缅。JavaScript 語言的一大特點(diǎn)就是單線程扒腕，也就是說，同一個(gè)時(shí)間只能做一件事萤悴。為了協(xié)調(diào)事件瘾腰、用戶交互、腳本覆履、UI 渲染和網(wǎng)絡(luò)處理等行為蹋盆，防止主線程的不阻塞，Event Loop 的方案應(yīng)用而生硝全。

• 在js中栖雾，任務(wù)進(jìn)入執(zhí)行棧，先判斷任務(wù)類型伟众，如果是同步任務(wù)析藕，直接進(jìn)入到主線程執(zhí)行。如果是異步任務(wù)凳厢，會(huì)把任務(wù)放到異步隊(duì)列账胧，等同步任務(wù)執(zhí)行完以后，事件觸發(fā)線程會(huì)從消息隊(duì)列中取出剛才加入隊(duì)列的函數(shù)先紫，如果有治泥，就一條一條的去執(zhí)行。

    console.log(1)    setTimeout(() => {        console.log(2)    }, 1000);    console.log(3)    //1 3 2

微任務(wù)

• js中遮精，setTimeout屬于宏任務(wù)车摄，像Promise為微任務(wù)，

    console.log(1)    setTimeout(() => {        console.log(2)    }, 1000);    let test=new Pormise((resolve)=>{        console.log(3);        resolve();    })    .then(=>console.log(4))    console.log(5)    1.3 5 4.2

• 首先會(huì)輸出1仑鸥，然后遇到setTimeout，注冊(cè)任務(wù)接著又遇到Pormise变屁，首先先輸出3眼俊，然后注冊(cè)任務(wù)，接著會(huì)輸出5粟关，這時(shí)候執(zhí)行棧沒有可執(zhí)行的疮胖，然后會(huì)從隊(duì)列中取环戈，這時(shí)候會(huì)先取出微任務(wù)進(jìn)行執(zhí)行，進(jìn)入到then澎灸，輸出4院塞，這時(shí)候執(zhí)行棧又為空，這時(shí)候繼續(xù)從隊(duì)列中取出一條任務(wù)性昭，這時(shí)候會(huì)輸出2拦止。

繼承

如何實(shí)現(xiàn)繼承？怎么樣能完美繼承糜颠？

• 構(gòu)造函數(shù)繼承,借助構(gòu)造函數(shù)通過call apply改變指向?qū)崿F(xiàn)繼承汹族，但這種繼承方式有一個(gè)缺點(diǎn)：繼承不了父類原型對(duì)象上的屬性，只能繼承構(gòu)造函數(shù)內(nèi)的屬性其兴。

    function Parent1(){        this.name='Parent1'    };    Parent1.prototype.say=function(){        console.log(this.name)    }    function Child1(){        Parent1.call(this);//apply        this.type='Child1'    }    let n=new Child1();    console.log(n.say)//undefined

• 原型鏈實(shí)現(xiàn)繼承,缺點(diǎn)：實(shí)例出來的是共用的顶瞒。

   function Parent(){        this.name='Parent1';        this.arr=[1,2,3,4,5]    };    Parent.prototype.say=function(){        console.log(this.name)    }    function Child(){        this.type='Child1'    }    Child.prototype=new Parent();    var s1=new Child();    var s2=new Child();    s1.arr.push(6)    console.log(s1.arr) //[1,2,3,4,5,6]    console.log(s2.arr) //[1,2,3,4,5,6]    //他們倆是公用的    console.log(s1.__proto__===s2.__proto__) //true

• 組合繼承(借鑒上面兩個(gè)的優(yōu)點(diǎn))

    function Parent(){        this.name='tom';    };    Parent.prototype.say=function(){        console.log(this.name)    };    function Child(){        Parent.call(this)        this.age=18;    };    Child.prototype=Object.create(Parent.prototype);    Child.prototype.constructor=Child;

Vue

vue生命周期

Vue有幾個(gè)生命周期？哪個(gè)生命周期可以獲取到真實(shí)DOM元旬？修改data里面的數(shù)據(jù)榴徐，會(huì)觸發(fā)什么生命周期？組件data為什么是一個(gè)函數(shù)匀归？

• 簡(jiǎn)單來說坑资，vue的生命周期可以歸為3類，創(chuàng)建階段朋譬、運(yùn)行階段盐茎、銷毀階段脖隶。

創(chuàng)建階段

• beforeCreate：實(shí)例剛在內(nèi)存中創(chuàng)建出來哺窄，還沒有初始化 data和 methods，只包含一些自帶額生命周期函數(shù)邢滑。

• created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建完成狡赐，此時(shí)data和methods已經(jīng)創(chuàng)建完成窑业。

• beforeMount：此時(shí)已經(jīng)編譯模版，但沒有渲染到頁面中枕屉。

• mounted：渲染模版常柄，創(chuàng)建階段到此結(jié)束。這時(shí)候可以操作dom搀擂。

運(yùn)行階段

• beforeUpdate：界面中的數(shù)據(jù)還是舊的西潘，但是data數(shù)據(jù)已經(jīng)更新，頁面中和data還沒有同步哨颂。修改data數(shù)據(jù)就會(huì)觸發(fā)這個(gè)函數(shù)喷市。

• updated：頁面重新渲染完畢，頁面中的數(shù)據(jù)和data保持一致威恼。修改data數(shù)據(jù)就會(huì)觸發(fā)這個(gè)函數(shù)品姓。

銷毀階段

• beforeDestroy：執(zhí)行該方法的時(shí)候寝并，Vue的生命周期已經(jīng)進(jìn)入銷毀階段，但是實(shí)例上的各種數(shù)據(jù)還出于可用狀態(tài)腹备。

• destroyed：組件已經(jīng)全部銷毀衬潦，Vue實(shí)例已經(jīng)被銷毀，Vue中的任何數(shù)據(jù)都不可用

vue組件通信

vue組件如何通信植酥？有幾種方式镀岛？

• 在vue中組件通訊可以分為父子組件通訊和非父子組件通信。
  

  父子組件通信: props;
  image.png
  children; provide / inject ; ref ;
  image.png

  listeners
  兄弟組件通信: eventBus ;vuex
  

  跨級(jí)通信: eventBus惧互；Vuex哎媚；provide / inject 、
  image.png
  listeners
  下面演示幾種常用的使用方法：

props / $emit

• 父組件通過props的方式向子組件傳遞數(shù)據(jù)喊儡，而通過$emit子組件可以向父組件通信拨与。

父組件向子組件傳值(props)

prop 只可以從上一級(jí)組件傳遞到下一級(jí)組件（父子組件），即所謂的單向數(shù)據(jù)流艾猜。而且 prop 只讀买喧，不可被修改，所有修改都會(huì)失效并警告匆赃。

    <!-- section父組件 -->    <template>        <div class="section">            <com-article :articles="articleList"></com-article>        </div>    </template>    <script>        import comArticle from './test/article.vue'        export default {        name: 'HelloWorld',        components: { comArticle },        data() {            return {            articleList: ['紅樓夢(mèng)', '西游記', '三國演義']            }        }    }     </script>    // 子組件 article.vue    <template>        <div>            <span v-for="(item, index) in articles" :key="index">{{item}}</span>        </div>    </template>    <script>    export default {        props: ['articles']    }    </script>

子組件向父組件傳值($emit)

$emit綁定一個(gè)自定義事件, 當(dāng)這個(gè)語句被執(zhí)行時(shí), 就會(huì)將參數(shù)arg傳遞給父組件,父組件通過v-on監(jiān)聽并接收參數(shù)淤毛。

    <!-- // 父組件中 -->    <template>        <div class="section">            <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>            <p>{{currentIndex}}</p>        </div>    </template>    <script>        import comArticle from './test/article.vue'        export default {            name: 'HelloWorld',            components: { comArticle },            data() {                return {                currentIndex: -1,                articleList: ['紅樓夢(mèng)', '西游記', '三國演義']                }            },            methods: {                onEmitIndex(idx) {                this.currentIndex = idx                }            }        }    </script>    <!-- 子組件 -->    <template>        <div>            <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>        </div>    </template>    <script>        export default {            props: ['articles'],            methods: {                emitIndex(index) {                  this.$emit('onEmitIndex', index)                }            }        }    </script>

parent

通過

image.png

children就可以訪問組件的實(shí)例，拿到實(shí)例代表什么算柳？代表可以訪問此組件的所有方法和data低淡。如在#app上拿

image.png

parent得到的是undefined，而在最底層的子組件拿

image.png

parent和

image.png

children 的值是數(shù)組瞬项，而

image.png

children已經(jīng)被移除蔗蹋。

    <template>        <div class="hello_world">            <div>{{msg}}</div>            <!-- child -->            child            <com-a></com-a>            <button @click="changeA">點(diǎn)擊改變子組件值</button>        </div>    </template>    <script>        import ComA from './child'        export default {            name: 'HelloWorld',            components: { ComA },            data() {                return {                msg: 'Welcome'                }            },            methods: {                changeA() {                    // 獲取到子組件A                    console.log(this.$children)                    this.$children[0].messageA = 'this is new value'                }            }        }    </script>    <!-- 子組件中 -->    <template>        <div class="com_a">            <span>{{messageA}}</span>            <p>獲取父組件的值為:  {{parentVal}}</p>        </div>    </template>    <script>        export default {            data() {                return {                messageA: 'this is old'                }            },            computed:{                parentVal(){                    return this.$parent.msg;                }            }        }    </script>

ref/refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素囱淋；如果用在子組件上猪杭，引用就指向組件實(shí)例，可以通過實(shí)例直接調(diào)用組件的方法或訪問數(shù)據(jù)

    <!-- //子組件 -->    <template>        <div >child</div>    </template>    <script>        export default {            data() {                return {                    name: 'this is child'                }            },            methods: {                sayHello(){                    return 'say hello'                }            },        }    </script>    <!-- 父組件 -->    <template>        <div >            <com-a ref="child"></com-a>        </div>    </template>    <script>        import ComA from './child'        export default {        components: { ComA },            data() {                return {                msg: 'Welcome'                }            },            mounted() {                const child = this.$refs.child;                console.log(child.name) //this is child                console.log(child.sayHello()) //say hello            },        }    </script>

eventBus

eventBus 又稱為事件總線妥衣，在vue中可以使用它來作為溝通橋梁的概念, 就像是所有組件共用相同的事件中心皂吮，可以向該中心注冊(cè)發(fā)送事件或接收事件， 所以組件都可以通知其他組件税手。eventBus也有不方便之處, 當(dāng)項(xiàng)目較大,就容易造成難以維護(hù)的災(zāi)難蜂筹。

vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)芦倒，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化.
Vuex 解決了多個(gè)視圖依賴于同一狀態(tài)和來自不同視圖的行為需要變更同一狀態(tài)的問題狂票，將開發(fā)者的精力聚焦于數(shù)據(jù)的更新而不是數(shù)據(jù)在組件之間的傳遞上.

雙向綁定的原理

vue2是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter熙暴，getter闺属，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)周霉。vue3中則采用Proxy掂器，它可以監(jiān)聽到數(shù)組內(nèi)的數(shù)據(jù)變化。

為什么 Vue 組件中 data 必須是一個(gè)函數(shù)俱箱？

如果 data 是一個(gè)對(duì)象国瓮，當(dāng)復(fù)用組件時(shí)，因?yàn)?data 都會(huì)指向同一個(gè)引用類型地址狞谱，其中一個(gè)組件的 data 一旦發(fā)生修改乃摹，則其他重用的組件中的 data 也會(huì)被一并修改。
如果 data 是一個(gè)返回對(duì)象的函數(shù)跟衅，因?yàn)槊看沃赜媒M件時(shí)返回的都是一個(gè)新對(duì)象孵睬，引用地址不同，便不會(huì)出現(xiàn)如上問題伶跷。

Vue 中 computed 和 watch 有什么區(qū)別

計(jì)算屬性 computed：
（1）支持緩存掰读，只有依賴數(shù)據(jù)發(fā)生變化時(shí)，才會(huì)重新進(jìn)行計(jì)算函數(shù)叭莫；
（2）計(jì)算屬性內(nèi)不支持異步操作蹈集；
（3）計(jì)算屬性的函數(shù)中都有一個(gè) get(默認(rèn)具有，獲取計(jì)算屬性)和 set(手動(dòng)添加雇初，設(shè)置計(jì)算屬性)方法拢肆；
（4）計(jì)算屬性是自動(dòng)監(jiān)聽依賴值的變化，從而動(dòng)態(tài)返回內(nèi)容靖诗。

偵聽屬性 watch:
(1) 不支持緩存郭怪，只要數(shù)據(jù)發(fā)生變化，就會(huì)執(zhí)行偵聽函數(shù)呻畸；
(2) 偵聽屬性內(nèi)支持異步操作移盆；
(3) 偵聽屬性的值可以是一個(gè)對(duì)象，接收 handler 回調(diào)伤为，deep咒循，immediate 三個(gè)屬性；
(3) 監(jiān)聽是一個(gè)過程绞愚，在監(jiān)聽的值變化時(shí)叙甸，可以觸發(fā)一個(gè)回調(diào)，并做一些其他事情位衩。

結(jié)尾

更多前端學(xué)習(xí)文章裆蒸，請(qǐng)點(diǎn)擊前端進(jìn)階班，歡迎關(guān)注糖驴！記得素質(zhì)三連僚祷！