001、v-show與v-if的區別
v-show:操作的是元素的display屬性
v-if:操作的是元素的創建和插入
相比較而言v-show的性能要高
002、methods、computed、watch三者的區別
methods是個方法，執行的時候需要事件進行觸發
computed是一個計算屬性，是實時響應的，只要data中的屬性發生了變化那么就會觸發computed，計算屬 性是基於屬性的依賴進行緩存的，methods調用的時候需要加()，而computed調用的時候是不需要加()
watch屬性監聽，watch用來監聽屬性的變化，當值發生變化的時候來執行特定的函數，watch監聽屬性的時候 會有2個參數newVal和oldVal一個新值一個舊值
003、vue中自定義指令如何使用
Vue.directive():
參數1：指令名稱
參數2：指令實現的函數，在回調函數中第一次參數是指令綁定的元素，參數二是一個對象其中對象中有value 屬性代表的是表達式返回的結果，還有modifiers屬性是指令的修飾符
004、vue中組件創建的方式有哪些？
全局組件和局部組件
全局組件 Vue.component();參數1：組件名稱 參數2：組件的配置項
局部組件 new Vue({ components:{} key值為組件名稱 val值為組件的配置項 })
005、vue中的過濾器如何使用
Vue.filter()
參數1：過濾器名稱
參數2：過濾器實現的方法 該方法中有2個參數 參數1為需要過濾的數據，參數2為過濾器傳遞的參數
006、如何實現父子組件傳值、非父子組件傳值
父組件傳遞子組件： 通過屬性進行傳遞 接受用props屬性進行接受。 props屬性用來接收外部屬性。 在父組件中當子組件當作標簽使用的時候給子組件添加屬性，值為需要傳遞的值。在子組件內部通過props 進行接受。接受的方式有2種，第一種為數組接受，第二種為對象接受，推薦用第二種，對象形式的可以限制數 據的類型
子組件傳父組件 //方案一 在父組件中當子組件當作標簽使用的時候給子組件綁定自定義方法，子組件通過this.$emit()進行觸發。注意 自定義方法是不需要加()的 //方案二 利用solt插槽作用域。
非父子組件傳值 方案一： 創建公共的Vue對象。通過調用Vue中的$on() $emit()進行傳值。需要接受值得一方調用$on,需要傳遞值 得一方調用$emit()
方案二： 利用觀察者模式封裝$on $emit
007、請說出vue中生命周期函數(鈎子函數)
1、beforeCreate():組件實例剛剛被創建 (el和data並未初始化)
2、created():組件創建完成,屬性已綁定,但DOM還未生成,$el屬性還不存在 (完成data數據的初始化)
3、beforeMount():模板編譯/掛載之前 (完成了el和data初始化)
4、Mounted():模板編譯/掛載之后 (完成掛載)
5、beforeUpdate():組件更新之前
6、updated()：組件更新之后
7、beforedestroy():組件銷毀之前
8、destroyed():組件銷毀之后
008、請解釋一下vue的中單向數據流的理解
數據從父級組件傳遞給子組件,只能單向綁定，子組件不能直接修改從父級傳遞過來的數據
數據只能從一個方向來修改狀態,如果父組件給N個子組件進行了數據傳遞。那么某一個子組件中修改了這個數 據，那么就會導致其他組件的數據也會發生改變。因此數據只能從一個方向來修改狀態
009、請說下什么是動態組件，如何使用，以及keep-alive的作用
動態組件： 讓多個組件使用同一個掛載點，並動態進行切換。這就是動態組件
通過保留<component></component> 元素，動態的綁定它的is特性，可以實現動態組件
keep-alive 包裹動態組件(組件)時，會緩存不活動的組件實例，而不是銷毀它們
組件切換調用的時候本身會被銷毀掉的，只要加上keep-alive進行包裹，就不會被銷毀，而是被緩存起來， 下一次使用的時候直接從緩存中調用
010、請說下組件的生命周期有哪些？
activated && deactivated:
activated：當組件為活躍狀態的時候觸發(活躍狀態：進入頁面的時候)
deactivated：緩存狀態的時候觸發
011、vue中solt的使用方式，以及solt作用域插槽的用法
使用方式： 當組件當做標簽進行使用的時候，用slot可以用來接受組件標簽包裹的內容，當給solt標簽添加name屬性的 時候，可以調換響應的位置
插槽作用域： 作用域插槽其實就是帶數據的插槽，父組件接收來自子組件的slot標簽上通過v-bind綁定進而傳遞過來的數 據，父組件通過scope來進行接受子組件傳遞過來的數據
012、為什么在組件內部data是一個函數而不是一個對象？
因為每次調用組件的時候都會重新生成一個對象,如果是一個對象的情況下，data數據會進行復用(因為對象是引 用數據類型),而當data是一個函數的時候每次調用的時候就會返回一個新的對象
013、vue中動畫如何實現
哪個元素需要動畫就給那個元素加transition標簽
進入時class的類型分為以下幾種 <name>-enter <name>-enter-active <name>-enter-to
離開時class的類型分為以下幾種
<name>-leave <name>-leave-active <name>-leave-to
如果需要一組元素發生動畫需要用標簽<transition-group><transition-group>
014、淺談對路由的理解
什么是路由？ 根據不同的url地址展示不同的頁面或者數據。
路由分為前端路由，和后端路由
前端路由： 1、前端路由多用於單頁面開發，也就是SPA。
2、前端路由是不涉及到服務器的，是前端利用hash或者HTM5的historyApi來實現的，一般用於不同的內 容展示和切換
015、路由跳轉的方式有哪幾種？
1、a標簽進行跳轉。例如<a href="#/home">首頁<a>
2、router-link進行跳轉 例如：<router-link to="/home">首頁<router-link>
3、編程式路由 例如：this.$router.push()
016、路由傳值的方式有哪幾種
1、path路徑屬性傳值。例如：path:"/home/:id/name"; 接受的時候通過 this.$route.params
2、query傳值。因為在url中？后面的參數不會被解析，因此我們可以通過query進行傳值。 接受的時候通過 this.$route.query
3、路由解耦。在配置路由的時候添加props屬性為true,在需要接受參數的組件頁面通過props進行接受
4、編程式導航 this.$router.push({path:"/home",query:{}});
017、請說出路由配置項常用的屬性及作用
路由配置參數： path : 跳轉路徑
component : 路徑相對於的組件
name:命名路由
children:子路由的配置參數(路由嵌套)
props:路由解耦
redirect : 重定向路由
018、編程式導航使用的方法以及常用的方法
路由跳轉 ： this.$router.push()
路由替換 : this.$router.replace()
后退： this.$router.back()
前進 ：this.$router.forward()
019、如何重定向路由
通過配置路由項中的redirect進行重定向
020、如何實現路由解耦
在路由的配置項中設置props:true 在需要接受組件的內部通過props進行接受
021、如何檢測路由參數的變化
通過屬性監聽來實現或者beforeRouterUpdate()
watch:{ "$router"(){
} }
beforeRouterUpdate(to,from,next);
022、什么是路由守衛？路由的鈎子函數有哪些？分別說出使用的場景，及用法
1、什么是路由守衛？ 路由跳轉前后做的一些驗證
2、路由常見的鈎子函數 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的場景 beforeRouteEnter:當路由進入之前:登陸驗證、熱力圖的記錄、
beforeRouteUpdate:當路由進行更新的時候。如果當前路由發生了變化，但是不需要組件的創建銷毀的過程的 時候，就需要用到這個鈎子函數
beforeRouterLeave:當路由離開的時候、當用戶沒有進行支付離開的時候、當用戶填寫完信息沒有保存的時 候......
023、什么是全局守衛
beforeEach:全局守衛。驗證用戶是否登陸
router.beforeEach((to,from,next)=>{ //登陸狀態 let status = false; //所以路由組建的name名字 const nextRouter = ["two","three","detail"];
if(nextRouter.indexOf(to.name)>=0){ if(!status){ router.push({name:"login"}) }else{ next(); } }else{ next(); } })
024、axios與jquery的ajax有什么不同
axios的優點： 1、從nodejs中創建http請求
2、支持promiseAPI
3、提供了一些並發請求的接口
4、自動轉換json數據
5、客戶端支持防止CSRF/XSRF
ajax的缺點： 1、jQuery項目龐大，單純的使用ajax卻要引入整個Jquery非常不合理
2、基於原生的XHR開發，但是XHR架構並不清晰
025、簡述vuex的數據傳遞流程
當組件進行數據修改的時候我們需要調用dispatch來觸發actions里面的方法。actions里面的每個方法中都會 有一個commit方法，當方法執行的時候會通過commit來觸發mutations里面的方法進行數據的修改。 mutations里面的每個函數都會有一個state參數，這樣就可以在mutations里面進行state的數據修改 ，當數據修改完畢后，會傳導給頁面。頁面的數據也會發生改變
026、雙向數據綁定的原理
vue實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和 設置屬性值(set)的操作來實現的。
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回 這個對象。
027、使用vue的時候會一下子加載所有的東西使得初始化頁面很卡，該如何解決？ vue-router解決首次加載緩慢的問題。懶加載簡單來說就是按需加載。
像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時， 需要加載的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利於用戶體驗，而運用懶加載 則可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。
用法：在配置路由時使用：component:resolve=>require([“@components/路由的路徑”]，resolve)。 就是用了懶加載后打完包直接運行那個index.html會報錯，報文件引用錯誤其實是打包時候路徑配置有點問 題，找到build下面的webpack.prod.conf.js 添加 publicPath："./",
028、vue中的scoped
1. 在vue組件中，在style標簽上添加scoped屬性，以表示它的樣式作用於當下的模塊，很好的實現了樣式私有 化的目的，這是一個非常好的機制。
2. scoped肯定是解決了樣式私有化的問題，但同時也引入了新的問題---樣式不易（可）修改，而很多時候， 我們是需要對公共組件的樣式做微調的。所以我才說要謹慎使用 。 029、vue路由傳值params和query的區別
1.query傳參和接收參數 傳參: this.$router.push({ path:'/xxx' query:{ id:id } })
接收參數: this.$route.query.id
注意:傳參是this.$router,接收參數是this.$route,這里千萬要看清了！！！
2.params傳參和接收參數 傳參: this.$router.push({ name:'xxx' params:{ id:id } }) 接收參數: this.$route.params.id
二者還有點區別，直白的來說query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而 params相當於post請求，參數不會再地址欄中顯示
030、跨域的方式
1、jsonp
2、正向代理 用http-proxy-middleware模塊 app.use("/api",proxy({
target:"協議+域名", changeOrigin:true }))
3、cors PHP中
031、在Vue中使用插件的步驟 * 采用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
* 使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
032、請列舉出3個Vue中常用的生命周期鈎子函數 * created: 實例已經創建完成之后調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, $el屬性目前還不可見
* mounted: el被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。如果 root 實例掛載了一個 文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
* activated: keep-alive組件激活時調用 033、第一次頁面加載會觸發哪幾個鈎子 第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鈎子
034、簡單描述每個周期具體適合哪些場景
* beforecreate : 可以在這加個loading事件，在加載實例時觸發
* created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
* mounted : 掛載元素，獲取到DOM節點
* updated : 如果對數據統一處理，在這里寫上相應函數
* beforeDestroy : 可以做一個確認停止事件的確認框
* nextTick : 更新數據后立即操作dom
035、Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決？
Vue路由在Android機上有問題，babel問題，安裝babel polypill 插件解決。
036、vuex有哪幾種屬性(modules)
有五種，分別是 State、 Getter、Mutation 、Action、 Module
* vuex的State特性 A、Vuex就是一個倉庫，倉庫里面放了很多對象。其中state就是數據源存放地，對應於一般Vue對象里面的 data
B、state里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個 數據的組件也會發生更新
C、它通過mapState、mapGetters把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
* vuex的Getter特性 A、getters 可以對State進行計算操作，它就是Store的計算屬性
B、 雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間復用
C、 如果一個狀態只在一個組件內使用，是可以不用getters
* vuex的Mutation特性 Action 類似於 mutation，不同在於：Action 提交的是 mutation，而不是直接變更狀態；Action 可以包 含任意異步操作。