前端面試題（帶答案）

前端?試題（帶答案））vue什么是vue?命周期？答：Vue?命周期是指vue實(shí)例對象從創(chuàng)建之初到銷毀的過程，vue所有功能的實(shí)現(xiàn)都是圍繞其?命周期進(jìn)?的，在?命周期的不同階段調(diào)?對應(yīng)的鉤?函數(shù)可以實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩?重要功能。vue?命周期的作?是什么？答：它的?命周期中有多個事件鉤?，讓我們在控制整個Vue實(shí)例的過程時更容易形成好的邏輯vue的?命周期的?個鉤?函數(shù)？ft?命周期執(zhí)?的時候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個階段使?data中的數(shù)據(jù)和methods中的?法created（）datamethods都已經(jīng)被初始化好了，可以調(diào)?了ft時，頁?還是舊的?上的DOM節(jié)點(diǎn)，最早可以在和這個階段中進(jìn)?beforeDestroy()銷毀前Vue實(shí)例從運(yùn)?階段進(jìn)?到了銷毀階段，這個時候上所有的data和methods，指令，過濾器……都是處于可?狀態(tài)。還沒有真正被銷毀destroyed（）被銷毀這個時候上所有的data和methods，指令，過濾器……都是處于不可?狀態(tài)。組件已經(jīng)被銷毀了。第?次頁?加載會觸發(fā)哪?個鉤?？答:第?次頁?加載時會觸發(fā)beforeCreate,created,beforeMount,mounted這?個鉤?.簡述每個周期具體適合哪些場景？loading事件，在加載實(shí)例時觸發(fā)mounted:掛載元素，獲取到DOM節(jié)點(diǎn)beforeDestroy:可以做?個確認(rèn)停?事件的確認(rèn)框nextTick:更新數(shù)據(jù)后?即操作domcreated和mounted的區(qū)別?答：created:在模板渲染成html前調(diào)?，即通常初始化某些屬性值，然后再渲染成視圖。mounted:在模板渲染成html后調(diào)?，通常是初始化頁?完成后，再對html的dom節(jié)點(diǎn)進(jìn)??些需要的操作。DOM渲染在哪個周期中已經(jīng)完成？答：mountedVue路由mvvm框架是什么？mvc的MVVM是Model-View-ViewModel的縮寫，Model代表數(shù)據(jù)模型負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)封裝，View代表UI組件負(fù)責(zé)界?和顯來。在MVVM架構(gòu)下，View和Model沒有直接聯(lián)系，?是通過ViewModel進(jìn)?交互，我們只關(guān)注業(yè)務(wù)邏輯，不需要?動操作DOM，不需要關(guān)注View和Model的同步?作vue-router是什么？有哪些組件？VueRouter是Vue.js官?的路由管理器。它和Vue.js的核?深度集成，讓構(gòu)建單頁?應(yīng)?變得易如反掌。<router-link><router-link>和<router-view>和<keep-alive>active-class是哪個組件的屬性？router-link標(biāo)簽被點(diǎn)擊時將會應(yīng)?這個樣式的動態(tài)路由？怎么獲取傳過來的值？動態(tài)路由的創(chuàng)建，主要是使?path屬性過程中，使?動態(tài)路徑參數(shù)，以冒號開頭，如下：{{path:'/details/:id'name:'Details'components:Details}Details組件上。當(dāng)匹配到/details下的路由時，參數(shù)值會被設(shè)置到this.route.params下，所以通過這個屬性可以獲取動態(tài)參數(shù)console.log(this.route.params.id)全局前置守衛(wèi)constrouter=newVueRouter({})router.beforeEach((to,from,next)={//todosomethings})to:Route,代表要進(jìn)?的?標(biāo)，它是?個路由對象。next?法調(diào)?的參數(shù)next(false):終端當(dāng)前的導(dǎo)航。如瀏覽器URL改變，那么URL會充值到from路由對應(yīng)的地址。next(’/’)||next({path:’/’}):跳轉(zhuǎn)到?個不同的地址。當(dāng)前導(dǎo)航終端，執(zhí)?新的導(dǎo)航。nextresolved全局后置鉤?router.afterEach((to,from)={//todosomethings})后置鉤?并沒有next函數(shù)，也不會改變導(dǎo)航本?。路由獨(dú)享鉤?beforEnterconstrouter=newVueRouter({routes:[{path:‘/home’,component:Home，beforeEnter:(to,from,next)={//todosomethings//參數(shù)與全局守衛(wèi)參數(shù)?樣}}]})組件內(nèi)導(dǎo)航鉤?constHome={template:<div</div,beforeRouteEnter(to,from,next){//在渲染該組件的對應(yīng)路由被confirm前調(diào)?this’，因?yàn)楫?dāng)守衛(wèi)執(zhí)?前，組件實(shí)例還沒被創(chuàng)建},from,next){//例：對于?個動態(tài)參數(shù)的路徑/home/:id,在/home/1和/home/2之間跳轉(zhuǎn)的時候ft組件實(shí)例會被復(fù)?，?這個鉤?就會在這個情況下被調(diào)?。//可以訪問組件實(shí)例‘this’},beforeRouteLeave(to,from,next){//可以訪問組件實(shí)例‘this’}}beforeRouterEnter不能訪問this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)?，因ftnext實(shí)例。在導(dǎo)航被確認(rèn)的時候執(zhí)?回調(diào)，并把實(shí)例作為回調(diào)的?法參數(shù)。constHome={template:<div</div,beforeRouteEnter(to,from,next){next(vm={//通過‘vm’訪問組件實(shí)例})}}$route和$router的區(qū)別是什么？path,params,hash,query,fullPath,matched,name等路由信息參數(shù)。vue-router響應(yīng)路由參數(shù)的變化watch:{$route(to,from){console.log(to.path)//對路由變化做出響應(yīng)}}·next){//todosomethings}vue-router響應(yīng)路由參數(shù)的變化watch:{$route(to,from){console.log(to.path)//對路由變化做出響應(yīng)}}·next){//todosomethings}vue-router的兩種模式hashwindow.onhashchange=function(event){console.log(event.oldURL,event.newURL)lethash=location.hash.slice(1)}historyo需要后臺配置?持。如果刷新時，服務(wù)器沒有響應(yīng)響應(yīng)的資源，會刷出404，實(shí)現(xiàn)路由懶加載（動態(tài)加載路由）把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問時才加載對應(yīng)的組件即為路由的懶加載，可以加快項(xiàng)?的加載速度，提?效率constrouter=newVueRouter({routes:[{path:‘/home’,name:‘Home’，component:()=import(’…/views/home’)}]})Vue常見?試題vue的優(yōu)點(diǎn)？vue的優(yōu)勢:輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)?速度快。?組件向?組件傳遞數(shù)據(jù)？?組件向?組件出傳遞數(shù)據(jù)，使??定義事件的?式。?組件向?組件傳遞數(shù)據(jù)，使?props屬性的?式。vue?組件向?組件傳值?v-if和v-show的相同點(diǎn)和不同點(diǎn)?1、相同點(diǎn)：v-showv-if都能控制元素的顯?和隱藏。2、不同點(diǎn)：2.1實(shí)現(xiàn)本質(zhì)?法不同v-show本質(zhì)就是通過設(shè)置css中的display設(shè)置為none，控制隱藏v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素2.2）編譯的區(qū)別v-showcssv-if監(jiān)聽和?組件2.4）性能?較v-show只編譯?次，后?其實(shí)就是控制css，?v-if不停的銷毀和創(chuàng)建，故v-show性能更好?。4、總結(jié)（適?場景）：如果要頻繁切換某節(jié)點(diǎn)時，使?v-show（?論true或者false初始都會進(jìn)?渲染，ft切換開銷?較?，初始開銷較?），如果不需要頻繁切換某節(jié)falsedom元素來控制顯?和隱藏的，因ft初始渲染開銷較?，切換開銷?較?）當(dāng)前組件當(dāng)前組件<style>寫成<stylescoped><keep-alive></keep-alive>的作?是什么?<keep-alive></keep-alive>包裹動態(tài)組件時，會緩存不活動的組件實(shí)例,主要?于保留組件狀態(tài)或避免重新渲染。??話:?如有?個列表和?個詳情，那么?戶就會經(jīng)常執(zhí)?打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是?個頻率很?的頁?，那么就可以對列表組件使?<keep-alive></keep-alive>進(jìn)?緩存，這樣?戶每次返回列表的時候，都能從緩存中快速渲染，?不是重新渲染DOM元素?法?：?法?：this.$獲取到該元素，并且可以直接調(diào)??組件中定義的?法；1、v-if：判斷是否隱藏2、v-for：數(shù)據(jù)循環(huán)3、v-bind:class：綁定?個屬性4、v-model:實(shí)現(xiàn)數(shù)據(jù)雙向綁定5、v-ifv-show6、v-once7、v-html:8、v-cloak:是什么？使?它的?途有哪些?module.exports出?個vue.js組件對象V-for為什么必須使?key?增加Key可以標(biāo)識組件的唯?性，key的作?主要是為了?效的更新虛擬DOMaxios的基本概念及安裝配置?法?ajax:異步請求，是?種?需再重新加載整個?頁的情況下，能夠更新部分?頁的技術(shù)axios:?于瀏覽器和node.js的基于promise的HTTP客戶端1.從瀏覽器制作XMLHttpRequests2.讓HTTP從node.js的請求3.?持promiseapi4.攔截請求和響應(yīng)轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)取消請求數(shù)據(jù)8.客戶端?持防?xsrfaxios的安裝：cmd命令?進(jìn)?到vue項(xiàng)?下，執(zhí)?npminstallaxios然后執(zhí)?提?npminstall--saveaxiosvue-axios配置?法：importaxiosfrom‘a(chǎn)xios’Vtotype.axios=axios這時候還不能跨域請求，在config下的index.js?輸?：proxyTable:proxyTable:{'/api':{//使?"/api"來代替"http://f.apiplus.c"target:':5000/',//源地址changeOrigin:true,//改變源,允許跨域pathRewrite:{'^/api路徑重寫}}12.axios解決跨域問題（vue-cli3)?vue中v-model的應(yīng)?及使?詳解?Scss的安裝和使?？router是定義路由相關(guān)的配置;view視圖；app.vue是?個應(yīng)?主組件；main.js是???件computed：通過屬性計算?得來的屬性1、computed內(nèi)部的函數(shù)在調(diào)?時不加()。的屬性沒有改變的時候，當(dāng)前函數(shù)不會執(zhí)?。3、computed中的函數(shù)必須?return返回。使?場景：當(dāng)?個值受多個屬性影響的時候 購物車商品結(jié)算watch：屬性監(jiān)聽。3、watch中的函數(shù)是不需要調(diào)?的。4的變化，需要進(jìn)?深度監(jiān)聽?！啊?){} ----?handler+deep的?式進(jìn)?深度監(jiān)聽。5、特殊情況下，watch?法監(jiān)聽到數(shù)組的變化，特殊情況就是說更改數(shù)組中的數(shù)據(jù)時，數(shù)組已經(jīng)更改，但是視圖沒有更新。更改數(shù)組必須要?splice()或者set。this.arr.splice(0,1,100)?????修改arr中第0項(xiàng)開始的1個數(shù)據(jù)為100，this.set(this.arr,0,100) 修改arr第0項(xiàng)值為100。使?場景：當(dāng)?條數(shù)據(jù)的更改影響到多條數(shù)據(jù)的時候 搜索框區(qū)別：2次監(jiān)聽的值發(fā)?變化的時候都會執(zhí)?回調(diào)。3、是否調(diào)?return：computed中的函數(shù)必須要?return返回，watch中的函數(shù)不是必須要?return。4、使?場景：computed----當(dāng)?個屬性受多個屬性影響的時候，使?computed-------購物車商品結(jié)算。watch 當(dāng)?條數(shù)據(jù)影響多條數(shù)據(jù)的時候，使?watch 搜索框。v-on可以監(jiān)聽多個?法嗎？可以Vue.js中this.nextTick()的使?？this.nextTick()將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)?。在修改數(shù)據(jù)之后?即使?DOMVue.nextTickthis為什么必須是?個函數(shù)？newVuedatacomponentdata它vue中如何使?event對象？Vue組件間通信6種?式（?上找視頻看）？漸進(jìn)式框架的理解?單頁?與多頁?間的區(qū)別及優(yōu)缺點(diǎn)?htmljscss。所有的頁?內(nèi)容都包含在這個所謂的主頁?中。但在寫的時候，還是會分開寫（頁??段），然后在交互的時候由路由程序動態(tài)載?，單頁?的頁?跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)?于pc端。多頁?（MPA），就是指?個應(yīng)?中有多個頁?，頁?跳轉(zhuǎn)時是整頁刷新單頁?的優(yōu)點(diǎn)：2，前后端分離3，頁?效果會?較炫酷（?如切換頁?內(nèi)容時的專場動畫）單頁?缺點(diǎn)：seo2，導(dǎo)航不可?，如果?定要導(dǎo)航需要??實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁?不能?瀏覽器的前進(jìn)后退功能，所以需要??建?堆棧管理）3，初次加載時耗時多4，頁?復(fù)雜度提?很多vue過濾器filter的詳解?1.代碼運(yùn)?的地?<!--<!--在雙花括號中-->{{date|formatDate}}<!--在`v-bind`中--><divv-bind:id="data|formatDate"></div>2.場景：時間格式的轉(zhuǎn)化注冊過濾器函數(shù)?先定義過濾器有兩種?式，第?種是全局過濾器，我們可以直接在vue對象上使?filter?法注冊過濾器，這種全局注冊的過濾器在任何?個組件內(nèi)都可以使?。第?種則是組件內(nèi)部的過濾器，注冊組件內(nèi)部過濾器則只能在當(dāng)前組件內(nèi)使?，接下來我們使?這兩種?式注冊過濾器函數(shù)。//全局函數(shù)Vue.filter('formatTime',Vue.filter('formatTime',function(value){constdate=newDate(val);consthour=date.getHours();constminutes=date.getMinutes();constseconds=date.getSeconds();return`${hour}:${minutes}:${seconds}`;})過濾器可以串聯(lián)：{{message|filterA|filterB}}接收參數(shù){{message|filterA(‘a(chǎn)rg1’,arg2)}}filterA被定義為接收三個參數(shù)的過濾器函數(shù)。其中messagearg1’作為第?個參數(shù)，表達(dá)式arg2的值作為第三個參數(shù)。v-for與v-if的優(yōu)先級?永遠(yuǎn)不要把v-if和v-for同時?在同?個元素上。?般我們在兩種常見的情況下會傾向于這樣做：為了過濾?個列表中的項(xiàng)?(?如v-for=“userinusers”v-if=“user.isActive”)。在這種情形下，請將users替換為?個計算屬性(?如activeUsers)，讓其返回過濾后的列表。為了避免渲染本應(yīng)該被隱藏的列表(?如v-for=“userinusers”v-if=“shouldShowUsers”)。這種情形下，請將v-if移動?容器元素上(?如ul,ol)。static和assets的區(qū)別?assets和static兩個都是?于存放靜態(tài)資源?件。放在static中的?件不會進(jìn)?構(gòu)建編譯處理，也就不會壓縮體積，在打包時效率會更?，但體積更?在服務(wù)器中就會占據(jù)更?的空間放在assets中的?件會進(jìn)?壓縮體積、代碼格式化，壓縮后會放置在static中?同上傳服務(wù)器。中進(jìn)?打包，引?的第三??件放到static中，因?yàn)橐?的?件已經(jīng)做過打包處理。vue常?的指令v-ifv-forv-htmlv-textvue常?的修飾符lazyv-modelinputlazychange步v-modelnumbertrim如果要?動過濾?戶輸?的?尾空?字符，可以給v-model添加trim修飾符vue中數(shù)組變動更新檢測？變異?法顧名思義，變異?法會改變被這些?法調(diào)?的原始數(shù)組，它們也將會觸發(fā)視圖更新，這些?法如下push()push()pop()

shift()unshift()splice()sort()使?舉例：example1.items.push({message:‘Baz’})?變異?法?變異?法與變異?法的區(qū)別就是，?變異?法不會改變原始數(shù)組，總是返回?個新數(shù)組，當(dāng)使??變異?法時，可以?新數(shù)組替換舊數(shù)組，?變異?法?致有：filter(),concat()和slice()Vue.set?法(視圖更新)？33.vue.js的兩?核?？vue.jsvue.js的兩?核?：1.數(shù)據(jù)驅(qū)動 --2.組件系統(tǒng)Vuegettersettervue將遍歷data中對象的所有property，并使?Object.defineProperty把這些property全部轉(zhuǎn)為getter/setter。getter/setterVueproperty每個組件實(shí)例都對應(yīng)?個watcher實(shí)例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)property記錄為依賴。相應(yīng)的訂閱者去處理相關(guān)的邏輯。settersetterwatcher，從?使它關(guān)聯(lián)的組件重新渲染。組件系統(tǒng)組件的核?選項(xiàng)模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給?戶的DOM之間的映射關(guān)系。初始數(shù)據(jù)（data）：?個組件的初始數(shù)據(jù)狀態(tài)。對于可復(fù)?的組件來說，這通常是私有的狀態(tài)。源只有該組件和它的?組件可以調(diào)?Jquery和vue對??vuevue適?的場景：復(fù)雜數(shù)據(jù)操作的后臺頁?，表單填寫頁?jquery適?的場景：?如說?些html5的動畫頁?，?些需要js來操作頁?樣式的頁?然??者也是可以結(jié)合起來?起使?的，vue側(cè)重數(shù)據(jù)綁定，jquery側(cè)重樣式操作，動畫效果等，則會更加?效率的完成業(yè)務(wù)需求@@符號的使?組件的放置位置vue-cli打包項(xiàng)?后路徑錯誤問題??、問題描述npmrunbuilddist?件夾，訪問的時候報如下錯誤：?、解決辦法vue.config.js?件，內(nèi)容如下，module.exports={module.exports={publicPath:'./',configureWebpack:{resolve:{alias:{'assets':'@/assets','common':'@/common','components':'@/components','network':'@/network','views':'@/views','plugins':'@/plugins',}}}}前端三?框架的對??[MVX框架模式：MVC+MVP+MVVMMVC：Model(模型)+View(視圖)+controller(控制器)，主要是基于分層的?的，讓彼ft的職責(zé)分開。Controller/Presenter負(fù)責(zé)邏輯的處理+Model提供數(shù)據(jù)+View負(fù)責(zé)顯?。在MVP中，Presenter完全把View和Model進(jìn)?了分離，主要的程序邏輯在Presenter?實(shí)現(xiàn)。View的時候可以保持Presenter不變。MVP模式的框架：Riot,js。MVVM：MVVM是把MVC?的Controller和MVP?的Presenter改成了ViewModel。Model+View+ViewModel。View的變化會?動更新到Model,Model的變化也會?動同步到View上顯?。Vue.js是什么？看到了上?的框架模式介紹，我們可以知道它是屬于MVVM模式的框架。那它有哪些特性呢？其實(shí)Vue.js不是?個框架，因?yàn)樗痪劢挂晥D層，是?個構(gòu)建數(shù)據(jù)驅(qū)動的Web界?的庫。Vue.js通過簡單的API（應(yīng)?程序編程接?）提供?效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。Vue.js的特性如下：指令插件化Vue.js與其他框架的區(qū)別？與AngularJS的區(qū)別相同點(diǎn)：都?持指令：內(nèi)置指令和?定義指令。都?持過濾器：內(nèi)置過濾器和?定義過濾器。都?持雙向數(shù)據(jù)綁定。都不?持低端瀏覽器。不同點(diǎn)：AngularJS的學(xué)習(xí)成本?，?如增加了DependencyInjection特性，?Vue.js本?提供的API都?較簡單、直觀。2.在性能上，AngularJS依賴對數(shù)據(jù)做臟檢查，所以Watcher越多越慢。Vue.js使?基于依賴追蹤的觀察并且使?異步隊列更新。所有的數(shù)據(jù)都是獨(dú)?觸發(fā)的。對于龐?的應(yīng)?來說，這個優(yōu)化差異還是?較明顯的。與React的區(qū)別相同點(diǎn)：vue特殊?件格式，對?件內(nèi)容都有?些約定，兩者都需要編譯后使?。中?思想相同：?切都是組件，組件實(shí)例之間可以嵌套。都提供合理的鉤?函數(shù)，可以讓開發(fā)者定制化地去處理需求。等功能到核?包，?是以插件的?式加載。在組件開發(fā)中都?持mixins的特性。不同點(diǎn)：React依賴VirtualDOM,?Vue.js使?的是DOM模板。React采?的VirtualDOM會對渲染出來的結(jié)果做臟檢查。Vue.js在模板中提供了指令，過濾器等，可以?常?便，快捷地操作DOM。delete和Vue.delete刪除數(shù)組的區(qū)別?SPA?屏加載慢如何解決?將公共的js庫?script引?，讓瀏覽器并?下載資源vue-router與location.href的?法區(qū)別？詳解Vue的slot新?法？43.axios和ajax優(yōu)缺點(diǎn)的理解？Vue封裝組件的過程詳解?vue（）、??組件通信props和$emit??組件通信?組件有時需要與?組件進(jìn)?溝通，溝通的?式就是?組件emit事件，?組件通過監(jiān)聽這個事件來做進(jìn)?步動作。??組件與?組件通信則使?props假設(shè)這?有?個?組件并引?了?個?組件my-comp：11<my-compv-for="msginmsgs":key="msg.id":msg="msg"></my-comp>msgmsgpropimportimportMyCompfrom'@/components/MyComp.vue'exportdefault{name:'home',components:{MyComp},data(){return{id:1,data:'hellojs'},{id:2,data:'cssworld'},{id:3,data:'animatedstyle'}]}}}我們通過點(diǎn)擊?組件每?項(xiàng)觸發(fā)?個事件，?組件監(jiān)聽這個事件去動態(tài)改變?組件的color樣式，這就是?組件監(jiān)聽?組件事件，事件處理函數(shù)可以從?組件傳遞值給?組件：<my-comp<my-compv-for="msginmsgs":key="msg.id":msg="msg":colored="colored"@handle-change-color="handleChangeColor"></my-comp>handle-change-colorcolordatacoloredprops傳?到?組件：importMyCompfrom‘@/components/MyComp.vue’exportdefault{name:‘home’,MyComp},data(){return{colored:false,//狀態(tài)msgs:[{id:1,data:‘hellojs’},{id:2,data:‘cssworld’},{id:3,data:‘a(chǎn)nimatedstyle’}]}},methods:{(){this.colored=!this.colored//監(jiān)聽事件動態(tài)改變colored}//handleChangeColor(param){//?組件觸發(fā)的事件可能包含參數(shù)}}然后編輯?組件：<div><div><div@click="handleClick":style="{color}">{{msg.id}}-{{msg.data}}</div></div>clickhandleClickexportdefault{exportdefault{name:'MyComp',computed:{colorcolor為樣式returnthis.coloredredblackprops動態(tài)修改樣式}},props:['msg','colored'],methods:{handleClick(e){this.$emit('handle-change-color')//使?$emit?法觸發(fā)?組件handle-change-color事件this.$emit('handlerparam還可以給事件傳遞參數(shù)}}}coloredpropcolorcoloredhandleClick被點(diǎn)擊時$emit派發(fā)?組件的handle-change-color事件效果如下：?組件$children操作?組件$children?組件：<template><template>class="home"><my-compv-for="msginmsgs":key="msg.id":msg="msg"></my-comp></div></template>handleClick事件被放置在div中importimportMyCompfrom'@/components/MyComp.vue'exportdefault{//...data(){return{//...}]}},methods:{handleClick(){this.$children.forEach(child=>{child.$data.colored=!child.$data.colored//逐?控制?組件的$data})}}}$emitdata：exportdefault{exportdefault{name:'MyComp',data(){return{colored:false//colored狀態(tài)}},computed:{color(){returnthis.colored?'red':'black'}},props:['msg']}?組件$parent訪問?組件?組件可通過$parent來修改?組件的$data，因ftcolored定義在?組件中。<template><template><divclass="home"><my-compv-for="msginmsgs":key="msg.id":msg="msg":colored="colored"></my-comp></div></template>通過prop傳遞colored參數(shù)給?組件importimportMyCompfrom'@/components/MyComp.vue'exportdefault{name:'home',components:{MyComp},data(){return{coloredfalsecolored狀態(tài)msgs:[{//...}]}}}?組件定義colored<template><template><div><div@click="handleClick":style="{color}">{{msg.id}}-{{msg.data}}</div></div></template>?組件渲染msg并監(jiān)聽click事件exportexportdefault{//...props:['msg','colored'],methods:{handleClick(e){this.$parent.$data.colored=!this.$parent.$data.colored}}}通過$parent訪問?組件，并修改$data狀態(tài)中央事件總線我們可以使?使?中央事件總線來處理???組件間的通信具體步驟是創(chuàng)建?個Vue實(shí)例，然后on監(jiān)聽事件，emit來派發(fā)事件////src/eventBus.jsimportVuefrom'vue'exportdefaultnewVue()Vueimportimportbusfrom'@/eventbus'exportdefault{//...methods:{handleClick(e){bus.$emit('change-color')}}}后代元素$emit觸發(fā)eventBus的事件importimportbusfrom'@/eventbus'exportdefault{//...(){bus.$on('change-color',()=>{this.colored=!this.colored})}}祖先元素$on?法監(jiān)聽eventBus的事件provide/inject的，如果是對象那么則是響應(yīng)式的：exportdefault{exportdefault{name:'home',provide(){return{colored:this.colored//依賴于data}},components:{MyComp},data(){return{colored必須為對象value:false},msgs:[{//...datacolored，該變量必須為?個對象，才是響應(yīng)式的。?必須為?個對象methods:methods:{handleChangeColor(){this.colored.value=!this.colored.value}}exportdefault{exportdefault{name:'MyComp',inject:['colored'],//injectcoloredcomputed:{color(){returnthis.colored.value?'red':'black'//domore...}},//...后代組件通過inject獲取到祖先組件提供的對象，根據(jù)對象做進(jìn)?步動作。$root直接訪問根組件$rootVueVue////src/main.jsdata(){return{//在這???！colored:false}},router,store,render:h=>h(App)}).$mount('#app')然后我們在其他各個組件中都能夠使?：exportdefault{exportdefault{name:'MyComp',//...(){console.log(this.$root)//直接訪問到根組件},//...}vue封裝通?組件？Vue包含?組觀察數(shù)組的變異?法，所以它們也將會觸發(fā)視圖更新。這些?法如下：push()pop()shift()unshift()splice()sort()reverse()filterconcatslice組：example1.items=example1.items.filter(functionexample1.items=example1.items.filter(function(item){returnitem.message.match(/Foo/)})ft。VueDOM?實(shí)現(xiàn)了?些智能的、啟發(fā)式的?法，所以??個含有相同元素的數(shù)組去替換原來的數(shù)組是?常?效的操作。注意事項(xiàng)：由于JavaScript的限制，Vue不能檢測以下變動的數(shù)組：當(dāng)你利?索引直接設(shè)置?個項(xiàng)時，例如：vm.items[indexOfItem]=newValue當(dāng)你修改數(shù)組的長度時，例如：vm.items.length=newLength舉個例?：varvarvm=newVue({data:{items:['a','b','c']}})vm.items[1x不是響應(yīng)性的vm.items.length2不是響應(yīng)性的////Vue.setVue.set(vm.items,indexOfItem,newValue)//Atotype.splicevm.items.splice(indexOfItem,1,newValue)你也可以使?vm.$setVue.setvm.$set(vm.items,vm.$set(vm.items,indexOfItem,newValue)vm.items.splice(newLength)vm.items.splice(newLength)vuex常見?試題在main.js引?store，注?。新建了?個?錄store，……export。場景有：單頁應(yīng)?中，組件之間的狀態(tài)、?樂播放、登錄狀態(tài)、加?購物車statemutationsmutations定義的?法動態(tài)修改Vuex的store中的狀態(tài)或數(shù)據(jù)。getters類似vue的計算屬性，主要?來過濾?些數(shù)據(jù)。actionstore.dispath來分發(fā)action。vuex有?種屬性？StateGetter、Mutation、Action、Modulestate=>基本數(shù)據(jù)(數(shù)據(jù)源存放地)getters=>從基本數(shù)據(jù)派?出來的數(shù)據(jù)mutations=>提交更改數(shù)據(jù)的?法，同步！actions像?個裝飾器，包裹mutations，使之可以異步。modules模塊化Vuex可維護(hù)性會下降，想修改數(shù)據(jù)要維護(hù)三個地?；可維護(hù)性會下降，想修改數(shù)據(jù)要維護(hù)三個地?；可讀性會下降，因?yàn)?個組件?的數(shù)據(jù)，根本就看不出來是從哪來的；增加耦合，?量的上傳派發(fā)，會讓耦合性??增加，本來Vue?Component就是為了減少耦合，現(xiàn)在這么?，和組件化的初衷相背。vue.js中ajax請求代碼應(yīng)該寫在組件的methods還是vuex的actions中？?種是：“請求后端接?”這個ajax代碼應(yīng)該是寫在按鈕的點(diǎn)擊事件處理函數(shù)中，然后在這個處理函數(shù)??提交mutations分發(fā)actions的按鈕vuex中如何異步修改狀態(tài)？第?步在你建?vuex的store.js中聲明actions?法importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststate={//狀態(tài)對象count1:1,},constmutations={//觸發(fā)狀態(tài)jia(state,n){state.count1+=n;},jian(state){state.count1--;},},constactions={jiaAction(context){mit('jia',10)/*這句話就是說，我現(xiàn)在store調(diào)?了同步的?法jia()*/},jianAction({commit}){commit('jian')/*這句話就是說，我現(xiàn)在store調(diào)?了同步的?法jian()*/}}exportdefaultnewVuex.Store({state,mutations,getters,actions/*這與state,mutations的操作?法是相同*/})2第?步在你的模板(?如a.vue)?引?你需要actions?法1)import引?mapActionsimport{mapState,mapMutations,mapGetters,mapActions}from'vuex'2）在你的?法中引?...mapActions(['jiaAction','jianAction'])格式?般都是固定照抄即可代碼如下：<template><div><div>{{count1}}</div></div></template><script>importstorefrom'@/store'import{mapState,mapMutations,mapGetters,mapActions}from'vuex'exportdefault{data(){return{}},methods:{...mapMutations(['jia','jian']),...mapActions(['jiaAction','jianAction'])},computed:{...mapState(["count1"]),},store}</script><stylescoped>.color{color:red;}</style>3第三步在你的組件的模板(a.vue)?引?點(diǎn)擊事件代碼如下：<template><div><div>{{count1}}</div><p><button@click="jianAction">-</button></p></div></template>整體代碼如下:<template><div><div>{{count1}}</div><p><button@click="jianAction">-</button></p></div></template><script>importstorefrom'@/store'import{mapState,mapMutations,mapGetters,mapActions}from'vuex'exportdefault{data(){return{}},methods:{...mapMutations(['jia','jian']),...mapActions(['jiaAction','jianAction'])},computed:{...mapState(["count1"]),},store}</script>注:現(xiàn)在你點(diǎn)擊你的+或-的按鈕，觀察它的值與你把<button@click="jianAction">-</button>換成<button@click="jia">+</button><button@click="jian">-</button>有何不同？沒有區(qū)別說明你調(diào)試代碼成功4第四步進(jìn)?異步驗(yàn)證我們在我們的store.js中的jiaAction加?jiaAction?法setTimeout(()=>{mit('jian')},3000)console.log('我先被執(zhí)?');你再觀察結(jié)果，你會發(fā)現(xiàn)jian這個?法在3s之后執(zhí)?，你點(diǎn)jia依然可以在3s之內(nèi)先執(zhí)?，這就是異步修改狀態(tài)與同步的區(qū)別。整體代碼如下:a.vue部分<template><div><d