vue篇

1.雙向綁定是什么意思抄沮？VUE雙向綁定原理?

答:雙向是指ViewModel中的data部分和View之間的雙向關(guān)系。分為正向綁定辙诞、反向綁定
　　正向：數(shù)據(jù)驅(qū)動(dòng)頁(yè)面
　　反向：頁(yè)面更新數(shù)據(jù)
原理：雙向綁定都是依賴(lài)ES5中一個(gè)重要的API，Object.defineProperty
數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱者的方式；通過(guò)Object.defineProperty來(lái)劫持各個(gè)屬性的getter\setter來(lái)監(jiān)聽(tīng)屬性變化,實(shí)現(xiàn)Observer監(jiān)聽(tīng)塞俱，生成訂閱者列表（dep）,通過(guò)訂閱者（Watcher）依次要更新

2.v-show和v-if的區(qū)別

答:
　　相同點(diǎn):都是控制Dom元素是否顯示
　　不同點(diǎn)：v-show通過(guò)樣式控制；v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元
　　性能：如果要頻繁切換某節(jié)點(diǎn)時(shí)吏垮，使用v-show（無(wú)論true或者false初始都會(huì)進(jìn)行渲染障涯，此后通過(guò)css來(lái)控制顯示隱藏，因此切換開(kāi)銷(xiāo)比較小膳汪，初始開(kāi)銷(xiāo)較大）唯蝶，如果不需要頻繁切換某節(jié)點(diǎn)時(shí)，使用v-if（因?yàn)閼屑虞d遗嗽，初始為false時(shí)粘我，不會(huì)渲染，但是因?yàn)樗峭ㄟ^(guò)添加和刪除dom元素來(lái)控制顯示和隱藏的痹换，因此初始渲染開(kāi)銷(xiāo)較小征字，切換開(kāi)銷(xiāo)比較大）

3.v-if和v-for的優(yōu)先級(jí)

答:v-for 具有比 v-if 更高的優(yōu)先級(jí)，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中娇豫。所以匙姜，不推薦v-if和v-for同時(shí)使用。
如果v-if和v-for一起用的話(huà)锤躁，vue中的的會(huì)自動(dòng)提示v-if應(yīng)該放到外層去搁料。

4.組件傳參的方式

答:
　　父子傳參：props，父頁(yè)面綁定系羞，子頁(yè)面獲取
　　子父?jìng)鲄ⅲ簍his.$emit事件驅(qū)動(dòng)
　　兄弟傳參：but vuex localStorage郭计、sessionStorage

5.動(dòng)態(tài)路由獲取參數(shù)

答:在path中/:id 通過(guò)this.router.query.id獲取

6.vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法

答:push()；pop()椒振；shift()昭伸；unshift()；splice()澎迎； sort()庐杨；reverse()

7.computed和watch的區(qū)別

答:
　　計(jì)算屬性computed :
　　　　1. 支持緩存，只有依賴(lài)數(shù)據(jù)發(fā)生改變夹供，才會(huì)重新進(jìn)行計(jì)算
　　　　2. 不支持異步灵份，當(dāng)computed內(nèi)有異步操作時(shí)無(wú)效，無(wú)法監(jiān)聽(tīng)數(shù)據(jù)的變化
　　　　3.computed 屬性值會(huì)默認(rèn)走緩存哮洽，計(jì)算屬性是基于它們的響應(yīng)式依賴(lài)進(jìn)行緩存的填渠，也就是基于data中聲明過(guò)或者父組件傳遞的props中的數(shù)據(jù)通過(guò)計(jì)算得到的值
　　　　4. 如果一個(gè)屬性是由其他屬性計(jì)算而來(lái)的，這個(gè)屬性依賴(lài)其他屬性，是一個(gè)多對(duì)一或者一對(duì)一氛什，一般用computed
　　　　5.如果computed屬性屬性值是函數(shù)莺葫，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值枪眉；在computed中的捺檬，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)贸铜，調(diào)用set方法堡纬。
　　偵聽(tīng)屬性watch：

1. 不支持緩存，數(shù)據(jù)變蒿秦，直接會(huì)觸發(fā)相應(yīng)的操作隐轩；
　　　　2.watch支持異步；
　　　　3.監(jiān)聽(tīng)的函數(shù)接收兩個(gè)參數(shù)渤早，第一個(gè)參數(shù)是最新的值职车；第二個(gè)參數(shù)是輸入之前的值；
　　　　4. 當(dāng)一個(gè)屬性發(fā)生變化時(shí)鹊杖，需要執(zhí)行對(duì)應(yīng)的操作悴灵；一對(duì)多；
　　　　5. 監(jiān)聽(tīng)數(shù)據(jù)必須是data中聲明過(guò)或者父組件傳遞過(guò)來(lái)的props中的數(shù)據(jù)骂蓖，當(dāng)數(shù)據(jù)變化時(shí)积瞒，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)登下，
　　　　　　immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行茫孔，
　　　　　　deep: 深度監(jiān)聽(tīng)，為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化被芳，復(fù)雜類(lèi)型的數(shù)據(jù)時(shí)使用缰贝，例如數(shù)組中的對(duì)象內(nèi)容的改變，注意監(jiān)聽(tīng)數(shù)組的變動(dòng)不需要這么做畔濒。注意：deep無(wú)法監(jiān)聽(tīng)到數(shù)組的變動(dòng)和對(duì)象的新增剩晴，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(jiān)聽(tīng)到。

8.keep-alive的作用是什么?

答:keep-alive 是 Vue 內(nèi)置的一個(gè)組件侵状，可以使被包含的組件保留狀態(tài)赞弥，或避免重新渲染

9.如何獲取dom?

答:添加ref屬性name 通過(guò)this.$refs.name獲取

10.vue-loader是什么？使用它的用途有哪些趣兄？

答:vue文件的一個(gè)加載器绽左，將template/js/style轉(zhuǎn)換成js模塊。
用途：js可以寫(xiě)es6艇潭、style樣式可以scss或less拼窥、template可以加jade等

11.為什么使用key?

答:需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)承粤，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)。
作用主要是為了高效的更新虛擬DOM闯团。這里不推薦使用循環(huán)索引值，使用唯一屬性仙粱，保持?jǐn)?shù)據(jù)標(biāo)識(shí)唯一性

12.v-modal的使用房交。

答:v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語(yǔ)法糖伐割，這個(gè)背后就做了兩個(gè)操作：
　　v-bind綁定一個(gè)value屬性候味；v-on指令給當(dāng)前元素綁定input事件

13.請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

答:答：assets文件夾是放靜態(tài)資源隔心；components是放組件白群；router是定義路由相關(guān)的配置; app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件

14.v-on可以監(jiān)聽(tīng)多個(gè)方法嗎硬霍？

答:可以帜慢，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

15.生命周期

答:
　　beforeCreate：在new一個(gè)vue實(shí)例后唯卖，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件粱玲，其他的東西都還沒(méi)創(chuàng)建。在beforeCreate生命周期執(zhí)行的時(shí)候拜轨，data和methods中的數(shù)據(jù)都還沒(méi)有初始化抽减。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法
　　create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法橄碾，或者操作 data 中的數(shù)據(jù)卵沉，最早可以在這個(gè)階段中操作
　　beforeMount：執(zhí)行到這個(gè)鉤子的時(shí)候，在內(nèi)存中已經(jīng)編譯好了模板了法牲，但是還沒(méi)有掛載到頁(yè)面中史汗，此時(shí)，頁(yè)面還是舊的
　　mounted：執(zhí)行到這個(gè)鉤子的時(shí)候拒垃，就表示Vue實(shí)例已經(jīng)初始化完成了淹办。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段恶复。 如果我們想要通過(guò)插件操作頁(yè)面上的DOM節(jié)點(diǎn)怜森，最早可以在和這個(gè)階段中進(jìn)行
　　beforeUpdate： 當(dāng)執(zhí)行這個(gè)鉤子時(shí)，頁(yè)面中的顯示的數(shù)據(jù)還是舊的谤牡，data中的數(shù)據(jù)是更新后的副硅， 頁(yè)面還沒(méi)有和最新的數(shù)據(jù)保持同步
　　updated：頁(yè)面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
　　beforeDestory：Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷(xiāo)毀階段翅萤，這個(gè)時(shí)候上所有的 data 和 methods 恐疲， 指令腊满， 過(guò)濾器 ……都是處于可用狀態(tài)。還沒(méi)有真正被銷(xiāo)毀
　　destroyed： 這個(gè)時(shí)候上所有的 data 和 methods 培己， 指令碳蛋， 過(guò)濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷(xiāo)毀了省咨。

16.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子肃弟？

答:beforeCreate， created零蓉， beforeMount笤受， mounted

17.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景

答:

18.vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)

答:一般 created/beforeMount/mounted 皆可

19.Mixin混入原理及使用

答：全局注冊(cè)一個(gè)混入，影響注冊(cè)之后所有創(chuàng)建的每個(gè) Vue 實(shí)例敌蜂。插件作者可以使用混入箩兽，向組件注入自定義的行為。不推薦在應(yīng)用代碼中使用章喉。
使用的話(huà) 在main.js中直接new vue 的時(shí)候直接注入汗贫，然后在單頁(yè)面中直接使用定義好的方法。

vue-router篇

vuex篇

1.vuex是什么秸脱？怎么使用芳绩？哪種功能場(chǎng)景使用它？

答：vue框架中狀態(tài)管理撞反。在main.js引入store妥色，注入。
新建了一個(gè)目錄store.js遏片，….. export 嘹害。
場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)吮便。音樂(lè)播放笔呀、登錄狀態(tài)、加入購(gòu)物車(chē)

怎么獲取和更改state

答：this.$store.state
在mutations里定義大寫(xiě)參數(shù)髓需，是個(gè)箭頭函數(shù)參數(shù)是state操作set賦值许师，然后在actions定義函數(shù)函數(shù)使用commit觸發(fā)

2.vuex有哪幾種屬性？

答：有五種僚匆，分別是 State微渠、 Getter、Mutation 咧擂、Action逞盆、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來(lái)的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法，同步松申！
actions => 像一個(gè)裝飾器云芦，包裹mutations俯逾，使之可以異步。
modules => 模塊化Vuex

3.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫(xiě)在組件的methods中還是vuex的actions中舅逸？

答：如果請(qǐng)求來(lái)的數(shù)據(jù)是不是要被其他組件公用桌肴，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入vuex 的state里琉历。
如果被其他地方復(fù)用坠七，這個(gè)很大幾率上是需要的，如果需要善已，請(qǐng)將請(qǐng)求放入action里，方便復(fù)用离例。

webpack篇

區(qū)別：

loader 是文件加載器换团，能夠加載資源文件，并對(duì)這些文件進(jìn)行一些處理宫蛆，諸如編譯艘包、壓縮等，最終一起打包到指定的文件中
plugin 賦予了 webpack 各種靈活的功能耀盗，例如打包優(yōu)化想虎、資源管理、環(huán)境變量注入等叛拷，目的是解決 loader 無(wú)法實(shí)現(xiàn)的其他事
loader 運(yùn)行在打包文件之前
plugins 在整個(gè)編譯周期都起作用
在 Webpack 運(yùn)行的生命周期中會(huì)廣播出許多事件舌厨，Plugin 可以監(jiān)聽(tīng)這些事件，在合適的時(shí)機(jī)通過(guò) Webpack 提供的 API 改變輸出結(jié)果
對(duì)于 loader忿薇，實(shí)質(zhì)是一個(gè)轉(zhuǎn)換器裙椭，將 A 文件進(jìn)行編譯形成 B 文件，操作的是文件署浩，比如將 A.scss 或 A.less 轉(zhuǎn)變?yōu)?B.css揉燃，單純的文件轉(zhuǎn)換過(guò)程
編寫(xiě)loader：其本質(zhì)為函數(shù)，函數(shù)中的 this 作為上下文會(huì)被 webpack 填充筋栋，因此我們不能將 loader 設(shè)為一個(gè)箭頭函數(shù)
函數(shù)接受一個(gè)參數(shù)炊汤，為 webpack 傳遞給 loader 的文件源內(nèi)容
函數(shù)中 this 是由 webpack 提供的對(duì)象，能夠獲取當(dāng)前 loader 所需要的各種信息函數(shù)中有異步操作或同步操作弊攘，異步操作通過(guò) this.callback 返回抢腐，返回值要求為 string 或者 Buffe

JS篇

CSS篇