前端面試題（帶答案）

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

shift()unshift()splice()sort()使?舉例：example1.items.push({message:‘Baz’})?變異?法?變異?法與變異?法的區(qū)別就是，?變異?法不會(huì)改變?cè)紨?shù)組，總是返回?個(gè)新數(shù)組，當(dāng)使??變異?法時(shí)，可以?新數(shù)組替換舊數(shù)組，?變異?法?致有：filter(),concat()和slice()Vue.set?法(視圖更新)？33.vue.js的兩?核?？vue.jsvue.js的兩?核?：1.數(shù)據(jù)驅(qū)動(dòng) --2.組件系統(tǒng)Vuegettersettervue將遍歷data中對(duì)象的所有property，并使?Object.defineProperty把這些property全部轉(zhuǎn)為getter/setter。getter/setterVueproperty每個(gè)組件實(shí)例都對(duì)應(yīng)?個(gè)watcher實(shí)例，它會(huì)在組件渲染的過程中把“接觸”過的數(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）：?個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可復(fù)?的組件來說，這通常是私有的狀態(tài)。源只有該組件和它的?組件可以調(diào)?Jquery和vue對(duì)??vuevue適?的場(chǎng)景：復(fù)雜數(shù)據(jù)操作的后臺(tái)頁?，表單填寫頁?jquery適?的場(chǎng)景：?如說?些html5的動(dòng)畫頁?，?些需要js來操作頁?樣式的頁?然??者也是可以結(jié)合起來?起使?的，vue側(cè)重?cái)?shù)據(jù)綁定，jquery側(cè)重樣式操作，動(dòng)畫效果等，則會(huì)更加?效率的完成業(yè)務(wù)需求@@符號(hào)的使?組件的放置位置vue-cli打包項(xiàng)?后路徑錯(cuò)誤問題??、問題描述npmrunbuilddist?件夾，訪問的時(shí)候報(bào)如下錯(cuò)誤：?、解決辦法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',}}}}前端三?框架的對(duì)??[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的時(shí)候可以保持Presenter不變。MVP模式的框架：Riot,js。MVVM：MVVM是把MVC?的Controller和MVP?的Presenter改成了ViewModel。Model+View+ViewModel。View的變化會(huì)?動(dòng)更新到Model,Model的變化也會(huì)?動(dòng)同步到View上顯?。Vue.js是什么？看到了上?的框架模式介紹，我們可以知道它是屬于MVVM模式的框架。那它有哪些特性呢？其實(shí)Vue.js不是?個(gè)框架，因?yàn)樗痪劢挂晥D層，是?個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界?的庫。Vue.js通過簡(jiǎn)單的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都?較簡(jiǎn)單、直觀。2.在性能上，AngularJS依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢。Vue.js使?基于依賴追蹤的觀察并且使?異步隊(duì)列更新。所有的數(shù)據(jù)都是獨(dú)?觸發(fā)的。對(duì)于龐?的應(yīng)?來說，這個(gè)優(yōu)化差異還是?較明顯的。與React的區(qū)別相同點(diǎn)：vue特殊?件格式，對(duì)?件內(nèi)容都有?些約定，兩者都需要編譯后使?。中?思想相同：?切都是組件，組件實(shí)例之間可以嵌套。都提供合理的鉤?函數(shù)，可以讓開發(fā)者定制化地去處理需求。等功能到核?包，?是以插件的?式加載。在組件開發(fā)中都?持mixins的特性。不同點(diǎn)：React依賴VirtualDOM,?Vue.js使?的是DOM模板。React采?的VirtualDOM會(huì)對(duì)渲染出來的結(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??組件通信?組件有時(shí)需要與?組件進(jìn)?溝通，溝通的?式就是?組件emit事件，?組件通過監(jiān)聽這個(gè)事件來做進(jìn)?步動(dòng)作。??組件與?組件通信則使?props假設(shè)這?有?個(gè)?組件并引?了?個(gè)?組件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ā)?個(gè)事件，?組件監(jiān)聽這個(gè)事件去動(dòng)態(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)聽事件動(dòng)態(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動(dòng)態(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)擊時(shí)$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)建?個(gè)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的，如果是對(duì)象那么則是響應(yīng)式的：exportdefault{exportdefault{name:'home',provide(){return{colored:this.colored//依賴于data}},components:{MyComp},data(){return{colored必須為對(duì)象value:false},msgs:[{//...datacolored，該變量必須為?個(gè)對(duì)象，才是響應(yīng)式的。?必須為?個(gè)對(duì)象methods:methods:{handleChangeColor(){this.colored.value=!this.colored.value}}exportdefault{exportdefault{name:'MyComp',inject:['colored'],//injectcoloredcomputed:{color(){returnthis.colored.value?'red':'black'//domore...}},//...后代組件通過inject獲取到祖先組件提供的對(duì)象，根據(jù)對(duì)象做進(jìn)?步動(dòng)作。$root直接訪問根組件$rootVueVue////src/main.jsdata(){return{//在這?！！colored:false}},router,store,render:h=>h(App)}).$mount('#app')然后我們?cè)谄渌鱾€(gè)組件中都能夠使?：exportdefault{exportdefault{name:'MyComp',//...(){console.log(this.$root)//直接訪問到根組件},//...}vue封裝通?組件？Vue包含?組觀察數(shù)組的變異?法，所以它們也將會(huì)觸發(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ā)式的?法，所以??個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是?常?效的操作。注意事項(xiàng)：由于JavaScript的限制，Vue不能檢測(cè)以下變動(dòng)的數(shù)組：當(dāng)你利?索引直接設(shè)置?個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem]=newValue當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length=newLength舉個(gè)例?：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，注?。新建了?個(gè)?錄store，……export。場(chǎng)景有：?jiǎn)雾搼?yīng)?中，組件之間的狀態(tài)、?樂播放、登錄狀態(tài)、加?購(gòu)物車statemutationsmutations定義的?法動(dòng)態(tài)修改Vuex的store中的狀態(tài)或數(shù)據(jù)。getters類似vue的計(jì)算屬性，主要?來過濾?些數(shù)據(jù)。actionstore.dispath來分發(fā)action。vuex有?種屬性？StateGetter、Mutation、Action、Modulestate=>基本數(shù)據(jù)(數(shù)據(jù)源存放地)getters=>從基本數(shù)據(jù)派?出來的數(shù)據(jù)mutations=>提交更改數(shù)據(jù)的?法，同步！actions像?個(gè)裝飾器，包裹mutations，使之可以異步。modules模塊化Vuex可維護(hù)性會(huì)下降，想修改數(shù)據(jù)要維護(hù)三個(gè)地?；可維護(hù)性會(huì)下降，想修改數(shù)據(jù)要維護(hù)三個(gè)地?；可讀性會(huì)下降，因?yàn)?個(gè)組件?的數(shù)據(jù)，根本就看不出來是從哪來的；增加耦合，?量的上傳派發(fā)，會(huì)讓耦合性??增加，本來Vue?Component就是為了減少耦合，現(xiàn)在這么?，和組件化的初衷相背。vue.js中ajax請(qǐng)求代碼應(yīng)該寫在組件的methods還是vuex的actions中？?種是：“請(qǐng)求后端接?”這個(gè)ajax代碼應(yīng)該是寫在按鈕的點(diǎn)擊事件處理函數(shù)中，然后在這個(gè)處理函數(shù)??提交mutations分發(fā)actions的按鈕vuex中如何異步修改狀態(tài)？第?步在你建?vuex的store.js中聲明actions?法importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststate={//狀態(tài)對(duì)象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)證我們?cè)谖覀兊膕tore.js中的jiaAction加?jiaAction?法setTimeout(()=>{mit('jian')},3000)console.log('我先被執(zhí)?');你再觀察結(jié)果，你會(huì)發(fā)現(xiàn)jian這個(gè)?法在3s之后執(zhí)?，你點(diǎn)jia依然可以在3s之內(nèi)先執(zhí)?，這就是異步修改狀態(tài)與同步的區(qū)別。整體代碼如下:a.vue部分<template><div><d