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

shift()unshift()splice()sort()reverse()使?舉例：example1.items.push({message:‘Baz’})?變異?法?變異?法與變異?法的區(qū)別就是，?變異?法不會改變原始數(shù)組，總是返回?個新數(shù)組，當使??變異?法時，可以?新數(shù)組替換舊數(shù)組，?變異?法?致有：filter(),concat()和slice()Vue.set?法(視圖更新)？33.vue.js的兩?核?？vue.jsvue.js的兩?核?：1.數(shù)據(jù)驅動 --2.組件系統(tǒng)數(shù)據(jù)驅動，也就是數(shù)據(jù)的雙向綁定Vue響應式核?就是，getter的時候會收集依賴，setter的時候會觸發(fā)依賴更新vue將遍歷data中對象的所有property，并使?Object.defineProperty把這些property全部轉為getter/setter。這些getter/setter對?戶來說是不可見的，但是在內(nèi)部它們讓Vue能夠追蹤依賴，在property被訪問和修改時通知變更。每個組件實例都對應?個watcher實例，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)property記錄為依賴。setter的時候會觸發(fā)依賴更新，之后當依賴項的setter觸發(fā)時，會通知watcher，從?使它關聯(lián)的組件重新渲染。模板DOM之間的映射關系。初始數(shù)據(jù)接受的外部參數(shù)(props)：組件之間通過參數(shù)來進?數(shù)據(jù)的傳遞和共享。?法（methods）：對數(shù)據(jù)的改動操作?般都在組件的?法內(nèi)進?。?命周期鉤?函數(shù)（lifecyclehooks）：?個組件會觸發(fā)多個?命周期鉤?函數(shù)，最新2.0版本對于?命周期函數(shù)名稱改動很?。源只有該組件和它的?組件可以調(diào)?和vue對??vuevue適?的場景：復雜數(shù)據(jù)操作的后臺頁?，表單填寫頁?jquery適?的場景：?如說?些html5的動畫頁?，?些需要js來操作頁?樣式的頁?然??者也是可以結合起來?起使?的，vue側重數(shù)據(jù)綁定，jquery側重樣式操作，動畫效果等，則會更加?效率的完成業(yè)務需求vue—組件引?及使?的?種?式？@@符號的使?組件的放置位置vue-cli打包項?后路徑錯誤問題??、問題描述執(zhí)?npmrunbuild命令后，打包?成dist?件夾，訪問的時候報如下錯誤：?、解決辦法在根?錄下，新建vue.config.js?件，內(nèi)容如下，module.exports={publicPath:'./',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(控制器)，主要是基于分層的?的，讓彼此的職責分開。View通過Controller來和Model聯(lián)系，Controller是View和Model的協(xié)調(diào)者，View和Model不直接聯(lián)系，基本聯(lián)系都是單向的。?戶User通過控制器Controller來操作模板Model從?達到視圖View的變化。負責顯?。在MVP中，Presenter完全把View和進?了分離，主要的程序邏輯在Presenter?實現(xiàn)。并且，Presenter和View是沒有直接關聯(lián)的，是通過定義好的接?進?交互，從?使得在變更View的時候可以保持Presenter不變。MVP模式的框架：Riot,js。和MVP?的Presenter改成了。Model+View+ViewModel。View的變化會?動更新到,的變化也會?動同步到View上顯?。這種?動同步是因為ViewModel中的屬性實現(xiàn)了Observer，當屬性變更時都能觸發(fā)對應的操作。Vue.js是什么？其實Vue.js不是?個框架，因為它只聚焦視圖層，是?個構建數(shù)據(jù)驅動的界?的庫。Vue.js通過簡單的API（應?程序編程接?）提供?效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。Vue.js的特性如下：輕量級的框架雙向數(shù)據(jù)綁定指令插件化Vue.js與其他框架的區(qū)別？的區(qū)別相同點：都?持指令：內(nèi)置指令和?定義指令。都?持過濾器：內(nèi)置過濾器和?定義過濾器。都?持雙向數(shù)據(jù)綁定。都不?持低端瀏覽器。不同點：AngularJS的學習成本?，?如增加了Injection特性，?Vue.js本?提供的API都?較簡單、直觀。2.在性能上，AngularJS依賴對數(shù)據(jù)做臟檢查，所以越多越慢。對于龐?的應?來說，這個優(yōu)化差異還是?較明顯的。與相同點：React采?特殊的JSX語法，Vue.js在組件開發(fā)中也推崇編寫.vue特殊?件格式，對?件內(nèi)容都有?些約定，兩者都需要編譯后使?。中?思想相同：?切都是組件，組件實例之間可以嵌套。都提供合理的鉤?函數(shù)，可以讓開發(fā)者定制化地去處理需求。都不內(nèi)置列數(shù)AJAX，Route等功能到核?包，?是以插件的?式加載。在組件開發(fā)中都?持mixins的特性。不同點：React依賴VirtualDOM,?Vue.js使?的是DOM模板。React采?的VirtualDOM會對渲染出來的結果做臟檢查。Vue.js在模板中提供了指令，過濾器等，可以?常?便，快捷地操作DOM。如何實現(xiàn)跨組件v-model（雙向數(shù)據(jù)綁定）？和刪除數(shù)組的區(qū)別?SPA?屏加載慢如何解決?將公共的js庫?script引?，讓瀏覽器并?下載資源配置路由，組件，頁?。使?懶加載，在調(diào)?某個組件時在下載某個js加?個?屏的loading視圖，可以提??戶體驗vue-router與location.href的?法區(qū)別？詳解Vue的slot新?法？43.axios和ajax優(yōu)缺點的理解？Vue封裝組件的過程詳解?vue各種組件通信?法（????兄弟爺孫毫?關系的組件）、??組件通信props和$emit??組件通信?組件有時需要與?組件進?溝通，溝通的?式就是?組件emit事件，?組件通過監(jiān)聽這個事件來做進?步動作。??組件與?組件通信則使?props假設這?有?個?組件并引?了?個?組件my-comp：1<my-compv-for="msginmsgs":key="msg.id":msg="msg"></my-comp>1<my-compv-for="msginmsgs":key="msg.id":msg="msg"></my-comp>?組件有?系列msg數(shù)據(jù)需要通過?組件渲染，將msg作為prop傳遞給?組件即可：importMyCompfrom'@/components/MyComp.vue'importMyCompfrom'@/components/MyComp.vue'exportdefaultname:'home',components:{MyComp},data(){return{msgs:[{id:1,data:'hellojs'},{id:2,data:'cssworld'},{id:3,data:'animatedstyle'}]}}}我們通過點擊?組件每?項觸發(fā)?個事件，?組件監(jiān)聽這個事件去動態(tài)改變?組件的color樣式，這就是?組件監(jiān)聽?組件事件，事件處理函數(shù)可以從?組件傳遞值給?組件：<my-compv-for="msginmsgs":key="msg.id":msg="msg":colored="colored"@handle-change-color="handleChangeColor"></my-comp><my-compv-for="msginmsgs":key="msg.id":msg="msg":colored="colored"@handle-change-color="handleChangeColor"></my-comp>?先增加?個事件handle-change-color當這個事件被觸發(fā)時修改名為color的data，然后將colored通過props傳?到?組件：importMyCompfrom‘@/components/MyComp.vue’exportdefault{name:‘home’,components:{//注冊組件MyComp},data(){return{colored:false,//狀態(tài)msgs:[{id:1,data:‘hellojs’},{id:2,data:‘cssworld’},{id:3,data:‘a(chǎn)nimatedstyle’}]}},methods:{handleChangeColor(){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>?先渲染數(shù)據(jù)，并監(jiān)聽click點擊事件，當點擊觸發(fā)事件處理函數(shù)handleClickexportdefault{name:'MyComp',computed:{exportdefault{name:'MyComp',computed:{color(){//color為樣式returnthis.colored?'red':'black'//根據(jù)?組件傳?的props動態(tài)修改樣式}},props:['msg','colored'],methods:{handleClick(e){this.$emit('handle-change-color')//使?$emit?法觸發(fā)?組件handle-change-color事件//this.$emit('handler','param')//還可以給事件傳遞參數(shù)}}}?組件接收colored?組件傳遞來的prop，返回?個計算后的屬性color，根據(jù)colored返回不同樣式。handleClick處理當?組件元素被點擊時$emit派發(fā)?組件的handle-change-color事件效果如下：?組件$children操作?組件使?$children操作?組件。如上述例?中，colored被定義在?組件中，可以將其移動到?組件中，并在?組件通過$children訪問到?組件：<template><template><div@click="handleClick"class="home"><my-compv-for="msginmsgs":key="msg.id":msg="msg"></my-comp></div></template>handleClick事件被放置在div中importMyCompfrom'@/components/MyComp.vue'importMyCompfrom'@/components/MyComp.vue'exportdefault{//...data(){return{msgs:[{//...}]}},methods:{handleClick(){this.$children.forEach(child=>{child.$data.colored=!child.$data.colored//逐?控制?組件的$data})}}}在?組件中不需要$emit事件，只需維護?個data：exportdefault{name:'MyComp',data(){exportdefault{name:'MyComp',data(){return{colored:false//colored狀態(tài)}},computed:{color(){returnthis.colored?'red':'black'}},props:['msg']}?組件$parent訪問?組件?組件可通過$parent來修改?組件的$data，因此colored定義在?組件中。<template><template><divclass="home"><my-compv-for="msginmsgs":key="msg.id":msg="msg":colored="colored"></my-comp></div></template>通過prop傳遞colored參數(shù)給?組件importMyCompfrom'@/components/MyComp.vue'importMyCompfrom'@/components/MyComp.vue'exportdefaultname:'home',components:{MyComp},data(){return{colored:false,//?組件維護?個colored狀態(tài)msgs:[{//...}]}}}?組件定義colored狀態(tài)<template><template><div><div@click="handleClick":style="{color}">{{msg.id}}-{{msg.data}}</div></div></template>?組件渲染msg并監(jiān)聽click事件exportdefault{exportdefault{//...props:['msg','colored'],methods:{handleClick(e){this.$parent.$data.colored=!this.$parent.$data.colored}}}通過$parent訪問?組件，并修改$data狀態(tài)???組件通信中央事件總線我們可以使?使?中央事件總線來處理???組件間的通信具體步驟是創(chuàng)建?個Vue實例，然后on監(jiān)聽事件，emit來派發(fā)事件//src/eventBus.js//src/eventBus.jsimportVuefrom'vue'exportdefaultnewVue()?先創(chuàng)建并導出?個Vue實例importbusfrom'@/eventbus'importbusfrom'@/eventbus'exportdefault{//...methods:{handleClick(e){bus.$emit('change-color')}}}后代元素$emit觸發(fā)eventBus的事件importbusfrom'@/eventbus'importbusfrom'@/eventbus'exportdefault{//...mounted(){bus.$on('change-color',()=>{this.colored=!this.colored})}}祖先元素$on?法監(jiān)聽eventBus的事件provide/inject適?于祖先和后代關系的組件間的通信，祖先元素通過provide提供?個值，后代元素則通過inject獲取到這個值。這個值默認是?響應的，如果是對象那么則是響應式的：exportdefault{name:'home',provide(){return{exportdefault{name:'home',provide(){return{colored:this.colored//依賴于data}},components:{MyComp},data(){return{colored:{//必須為對象value:false},msgs:[{//...?先通過provide對外提供?個colored，這個屬性依賴于data中的colored，該變量必須為?個對象，才是響應式的。?岡必須為?個對象methods:{handleChangeColor(){methods:{handleChangeColor(){this.colored.value=!this.colored.value}}祖先組件監(jiān)聽事件或其他途徑去修改data改變狀態(tài)。exportdefault{name:'MyComp',exportdefault{name:'MyComp',inject:['colored'],//injectcoloredcomputed:{color(){returnthis.colored.value?'red':'black'//domore...}},//...后代組件通過inject獲取到祖先組件提供的對象，根據(jù)對象做進?步動作。$root直接訪問根組件根據(jù)官?的?檔，我們可以通過$root來直接訪問到Vue實例??說將數(shù)據(jù)存儲在Vue實例中：//src/main.js//src/main.jsnewVue({data(){return{//在這???！colored:false}},router,store,render:h=>h(App)}).$mount('#app')然后我們在其他各個組件中都能夠使?：exportdefault{name:'MyComp',//...mounted(){exportdefault{name:'MyComp',//...mounted(){console.log(this.$root)//直接訪問到根組件},//...}vue封裝通?組件？vue更新數(shù)組時觸發(fā)視圖更新的?法？Vue包含?組觀察數(shù)組的變異?法，所以它們也將會觸發(fā)視圖更新。這些?法如下：push()pop()shift()unshift()splice()sort()reverse()替換數(shù)組：例如：filter(),concat()和slice()。這些不會改變原始數(shù)組，但總是返回?個新數(shù)組。當使?這些?變異?法時，可以?新數(shù)組替換舊數(shù)組：example1.items=example1.items.filter(function(item){example1.items=example1.items.filter(function(item){returnitem.message.match(/Foo/)})你可能認為這將導致Vue丟棄現(xiàn)有DOM并重新渲染整個列表。幸運的是，事實并?如此。Vue為了使得DOM元素得到最?范圍的重??實現(xiàn)了?些智能的、啟發(fā)式的?法，所以??個含有相同元素的數(shù)組去替換原來的數(shù)組是?常?效的操作。注意事項：由于JavaScript的限制，Vue不能檢測以下變動的數(shù)組：當你利?索引直接設置?個項時，例如：vm.items[indexOfItem]=newValue當你修改數(shù)組的長度時，例如：vm.items.length=newLength舉個例?：varvm=newVue({data:{varvm=newVue({data:{items:['a','b','c']}})vm.items[1]='x'//不是響應性的vm.items.length=2//不是響應性的為了解決第?類問題，以下兩種?式都可以實現(xiàn)和vm.items[indexOfItem]=newValue相同的效果，同時也將觸發(fā)狀態(tài)更新：//Vue.set//Vue.setVue.set(vm.items,indexOfItem,newValue)//Atotype.splicevm.items.splice(indexOfItem,1,newValue)你也可以使?vm.$set實例?法，該?法是全局?法Vue.set的?個別名：vm.$set(vm.items,indexOfItem,newValue)vm.$set(vm.items,indexOfItem,newValue)為了解決第?類問題，你可以使?splice：vm.items.splice(newLength)vm.items.splice(newLength)vuex常見?試題vuex是什么？怎么使?？那些功能場景使?他們？只?來讀取的狀態(tài)集中放在store中；改變狀態(tài)的?式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。在main.js引?store，注?。新建了?個?錄store，……export。場景有：單頁應?中，組件之間的狀態(tài)、?樂播放、登錄狀態(tài)、加?購物車stateVuex使?單?狀態(tài)樹,即每個應?將僅僅包含?個store實例，但單?狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改??的數(shù)據(jù)。mutationsmutations定義的?法動態(tài)修改Vuex的store中的狀態(tài)或數(shù)據(jù)。getters類似vue的計算屬性，主要?來過濾?些數(shù)據(jù)。actionactions可以理解為通過將mutations??處?數(shù)據(jù)的?法變成可異步的處理數(shù)據(jù)的?法，簡單的說就是異步操作數(shù)據(jù)。view層通過store.dispath來分發(fā)action。vuex有?種屬性？有五種，分別是有五種，分別是State、Getter、Mutation、Action、Modulestate=>基本數(shù)據(jù)(數(shù)據(jù)源存放地)getters=>從基本數(shù)據(jù)派?出來的數(shù)據(jù)mutations=>提交更改數(shù)據(jù)的?法，同步！actions=>像?個裝飾器，包裹mutations，使之可以異步。modules=>模塊化Vuex不使?vuex會帶來什么問題？可維護性會下降，想修改數(shù)據(jù)要維護三個地?；可維護性會下降，想修改數(shù)據(jù)要維護三個地?；可讀性會下降，因為?個組件?的數(shù)據(jù)，根本就看不出來是從哪來的；增加耦合，?量的上傳派發(fā)，會讓耦合性??增加，本來Vue?Component就是為了減少耦合，現(xiàn)在這么?，和組件化的初衷相背。vue.js中ajax請求代碼應該寫在組件的methods還是vuex的actions中？?種是：“請求后端接?”這個ajax代碼應該是寫在按鈕的點擊事件處理函數(shù)中，然后在這個處理函數(shù)??提交mutations還?種是：直接將“請求后端接?”這個ajax代碼寫在actions中，actions中提交mutations，按鈕的點擊事件處理函數(shù)中只寫?個分發(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)?引?點擊事件代碼如下：<template><div><div>{{count1}}</div><p><button@click="jiaAction">+</button><button@click="jianAction">-</button></p></div></template>整體代碼如下:<template><div><div>{{count1}}</div><p><button@click="jiaAction">+</button><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)在你點擊你的+或-的按鈕，觀察它的值與你把<button@click="jiaAction">+</button><button@click="jianAction">-</button>換成<button@click="jia">+</button><button@click="jian">-</button>有何不同？沒有區(qū)別說明你調(diào)試代碼成功4第四步進?異步驗證我們在我們的store.js中的jiaAction加?