1.vue優(yōu)點
1. 輕量化
使用 Vue.js 來開發(fā)生產(chǎn)應(yīng)用或個人項目的一個顯著優(yōu)勢是它是一個相對輕量化的框架/庫。讓我們看看不同前端框架/庫的下載空間
2. 低復(fù)雜性
在使用 React 構(gòu)建許多應(yīng)用之后，一旦在混合代碼庫中添加狀態(tài)管理，隨著應(yīng)用程序變大，代碼庫通常會變得非常復(fù)雜。我注意到 React 應(yīng)用變得復(fù)雜的原因之一是 JSX 模板、 lifecycle（生命周期）方法和其他方法都存在于同一個對象中。這常常使理解邏輯流程變得非常困難，而Vue呢 :
3. Virtual DOM（虛擬 DOM）
就像 React 一樣，Vue.js 實現(xiàn)了使用虛擬 DOM 來操作/渲染視圖。通過使用虛擬 DOM，用戶界面將通過在每次需要更改時不渲染真實的 DOM，而只是呈現(xiàn)虛擬 DOM 和真實 DOM 之間的部分差異，進而獲得更好的性能。
4. 低學(xué)習(xí)曲線（對初學(xué)者友好）
從事 Web 開發(fā)的人都會學(xué)習(xí)以下三種基礎(chǔ)技術(shù)：HTML、CSS 和 JavaScript。想象一下一個初學(xué)者必須學(xué)習(xí)一個叫做 JSX 的新東西，而不是 HTML。雖然 JSX 看起來類似于 HTML，但確實有很多不同之處將 JSX 與 HTML 區(qū)分開來，而這種學(xué)習(xí)就不是 Vue.js 所必需的。
如上面所示，Vue.js 使用與 HTML 相同的標記名，這使得將知識從 HTML 傳輸?shù)?Vue.js 更加容易。此外，代碼的模塊化結(jié)構(gòu)有助于理解 Vue.js 組件的不同動作部分。
對于那些熟悉 React 的人來說，學(xué)習(xí) Vue.js 是小菜一碟，因為兩者之間有很多相似之處。
2.vue父組件向子組件傳遞數(shù)據(jù)？
方式一
父傳子主要通過在父組件v-model綁定數(shù)據(jù)，在子組件進行用props進行數(shù)據(jù)的接收
<Child :msg="data"></Child>
方式二
父組件觸發(fā)子組件的方法，主要通過$refs來觸發(fā)，同時傳參
//觸發(fā)子組件方法，并傳參this.$refs.mychild.init("chrchr","120");
3.子組件像父組件傳遞事件
通過$emit觸發(fā)事件
在子組件<x-test>中觸發(fā)事件：
<button @click="toSearchProduct()">搜索</button>
export default {
? methods: {
? ? show: function () {
? ? ? console.log(this.name)
? ? },
? ? toSearchProduct: function () {
? ? ? this.$emit('parentEvent','哈哈啊哈哈')
? ? }
? }
}
父組件：
<x-test :name="username" @parentEvent="toClick"></x-test>
export default {
? components: {
? ? XTest
? },
? methods: {
? ? toClick: function (msg){
? ? ? console.log(msg) // 當(dāng)子組件觸發(fā)按鈕時，msg獲取值為 哈哈啊哈哈
? ? }
? }
}
</script>
4.v-show和v-if指令的共同點和不同點
1.共同點：都能控制元素的顯示和隱藏。
2.不同點：實現(xiàn)本質(zhì)?法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏，只會編譯?次；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素，若初始值為false，就不會編譯了。?且v-if不停的銷毀和創(chuàng)建?較消耗性能。
3.總結(jié)：如果要頻繁切換某節(jié)點，使?v-show(切換開銷?較?，初始開銷較?)。如果不需要頻繁切換某節(jié)點使?v-if（初始渲染開銷較?，切換開銷?較?）。
5.如何讓CSS只在當(dāng)前組件中起作用
當(dāng)前組件<style>寫成<style? scoped>
6....
7.如何獲取dom
方法一：
直接給相應(yīng)的元素加id,然后再document.getElementById("id");獲取，然后設(shè)置相應(yīng)屬性或樣式
方法二：
使用ref,給相應(yīng)的元素加ref=“name” 然后再this.$refs.name獲取到該元素
8.說出幾種vue當(dāng)中的指令和它的用法？
v-bind: 綁定數(shù)據(jù)
v-model: 能夠?qū)崿F(xiàn)表單元素值的雙向綁定
v-on: 用于事件的綁定
v-if,v-else-if,v-else: 有條件的渲染某些內(nèi)容
v-for指令:隊列表數(shù)據(jù)的渲染很常用
v-show指令:行所在標簽的顯示與隱藏
9.vue-loader是什么？使用它的用途有哪些？
10.為什么使用key
使用 v-for?更新已渲染的元素列表時，默認用 就地復(fù)用?策略。列表數(shù)據(jù)修改的時候，vue?會根據(jù) key?去判斷某個值是否修改 —— 如果修改，則重新渲染這一項，否則復(fù)用之前的元素。在 v-for?中使用 key?是一個最佳實踐，但是我們需要注意使用的是什么 key?。
如果是使用 index?作為 key?：
在末尾插入 F 的話沒有問題，因為這個時候不影響前面元素的 index，每個元素的 index 不變，而?vue?可以依據(jù)這些 index 對元素進行復(fù)用；但是現(xiàn)在是在中間插入 F，一旦插入成功，那么 CDE 的 index 都會改變，這時候 CDE 都需要重新渲染一次。而 AB 的 index 是不變的，所以 AB 可以得到復(fù)用。
如果是使用 id?作為 key?：
這里就要注意了，這個 id?是唯一的，也是固定不變的（也可以采用元素本身的值作為這個唯一的 id），不管插入還是刪除，元素該是哪個 id?還是哪個 id?，這意味著以這樣的 id?作為key?時，所有舊元素都可以得到復(fù)用。所以這種情況下，我們只需要渲染新插入的 F 元素即可。
總結(jié)：vue中列表循環(huán)需加:key="唯一標識" 唯一標識可以是item里面id index等，因為vue組件高度復(fù)用增加Key可以標識組件的唯一性，為了更好地區(qū)別各個組件 key的作用主要是為了高效的更新虛擬DOM
11.axios及安裝
axios的基本概念及安裝配置方法
ajax:異步請求，是一種無需再重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)
axios:用于瀏覽器和node.js的基于promise的HTTP客戶端
1.從瀏覽器制作XMLHttpRequests
2.讓HTTP從node.js的請求
3.支持promise api
4.攔截請求和響應(yīng)
5.轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
6.取消請求
7.自動轉(zhuǎn)換成json數(shù)據(jù)
8.客戶端支持防止xsrf
axios的安裝：
cmd命令行進入到vue項目下，執(zhí)行npm install axios 然后執(zhí)行提示npm install --save axios vue-axios
配置方法：
打開vue的編輯器，找到當(dāng)前項目的main.js文件，輸入：
import axios from 'axios'
Vue.prototype.axios = axios
12.axios解決跨域
在config下的index.js里輸入：
? proxyTable: {
????? '/api': {? //使用"/api"來代替"http://f.apiplus.c"?
? ????target: 'http://127.0.0.1:5000/', //源地址?
? ????changeOrigin: true, //改變源?,允許跨域
? ????pathRewrite: {?
? ??????'^/api': '' //路徑重寫?
? ??????}?
? ??}
13.v-modal的使用
v-model 主要是用于表單上數(shù)據(jù)的雙向綁定
1:主要用于 input，select，textarea，component
2:修飾符：
.lazy- 取代input監(jiān)聽change事件
.number- 輸入字符串轉(zhuǎn)為數(shù)字
.trim- 輸入首尾空格過濾
14.scss的安裝以及使用
?安裝sass 依賴包 ，在cmd界面輸入：
npm??install sass-loader --save-dev
npm install node-sass --sava-dev
在build文件夾下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']}
使用scss時候在所在的style樣式標簽上添加lang=”scss”即可應(yīng)用對應(yīng)的語法，否則報錯
15.請說出vue.cli項目中src目錄每個文件夾和文件的用法？
vue-cli 項目中src目錄每個文件夾和文件的用法
assets 文件夾是放靜態(tài)資源
components 是放組件
router 是定義路由相關(guān)的配置
view 視圖
app.vue 是一個應(yīng)用主組件
main.js 是入口文件
webpack目錄：
├─build // 保存一些webpack的初始化配置,項目構(gòu)建│
├─build.js? ? ? ? ? ? // 生產(chǎn)環(huán)境構(gòu)建│
├─check-version.js? ? // 檢查npm、node版本│
├─vue-loader.conf.js? // webpack loader配置│
├─webpack.base.conf.js// webpack基礎(chǔ)配置│
├─webpack.dev.conf.js // 開發(fā)環(huán)境配置，構(gòu)建本地開發(fā)服務(wù)器│
├─webpack.prod.conf.js// 生產(chǎn)環(huán)境的配置│
├─config? ? ? ? ? ? ? ? // config文件夾保存一些項目初始化的配置│
├─dev.env.js? ? ? ? ? // 開發(fā)環(huán)境的配置│
├─index.js? ? ? ? ? ? // 項目一些配置變量│
├─prod.env.js? ? ? ? // 生產(chǎn)環(huán)境的配置│
├─dist? ? ? ? ? ? ? ? ? // 打包后的項目
├─node_modules? ? ? ? ? // 依賴包│
├─src? ? ? ? ? ? ? ? ? // 源碼目錄│
├─assets? ? ? ? ? ? ? // 靜態(tài)文件目錄│
├─components? ? ? ? ? // 組件文件│
├─router? ? ? ? ? ? ? // 路由│
├─App.vue? ? ? ? ? ? // 是項目入口文件│
├─main.js? ? ? ? ? ? // 是項目的核心文件，入口
├─static? ? ? ? ? ? ? ? // 靜態(tài)資源目錄
├─.babelrc? ? ? ? ? ? ? // Babel的配置文件
├─.editorconfig? ? ? ? // 代碼規(guī)范配置文件
├─.gitignore? ? ? ? ? ? // git忽略配置文件
├─.postcssrc.js? ? ? ? // postcss插件配置文件
├─index.html? ? ? ? ? ? // 頁面入口文件
├─package-lock.json? ? // 項目包管控文件
├─package.json? ? ? ? ? // 項目配置
└─README.md? ? ? ? ? ? // 項目說明書
16.分別簡述computed和watch的使用場景
特點和區(qū)別：
vue的computed選項主要用于同步對數(shù)據(jù)的處理,而watch選項主要用于事件的派發(fā),可異步.
這兩者都能達到同樣的效果,但是基于它們各自的特點,使用場景會有一些區(qū)分.
computed擁有緩存屬性,只有當(dāng)依賴的數(shù)據(jù)發(fā)生變化時,關(guān)聯(lián)的數(shù)據(jù)才會變化,適用于計算或者格式化數(shù)據(jù)的場景.
watch監(jiān)聽數(shù)據(jù),有關(guān)聯(lián)但是沒有依賴,只要某個數(shù)據(jù)發(fā)生變化,就可以處理一些數(shù)據(jù)或者派發(fā)事件并同步/異步執(zhí)行.
計算屬性
抽象的概念不容易理解,用多了高頻的場景自然就熟悉了,計算屬性表現(xiàn)為同步處理數(shù)據(jù).
金融領(lǐng)域的分期付款,P2P年化收益,帶有計算性質(zhì)的,都可以優(yōu)先考慮computed.
不需要關(guān)注點擊事件或者其他數(shù)據(jù),只要將計算規(guī)則寫在屬性里,就能實時獲取對應(yīng)的數(shù)據(jù).
電商領(lǐng)域的購物車統(tǒng)計,一個數(shù)據(jù)依賴于一個或者多個數(shù)據(jù).
當(dāng)購物車數(shù)量和產(chǎn)品變化時,自動計算出價格*數(shù)量的總和.
如果有優(yōu)惠券或者折扣,自動減去優(yōu)惠和計算折扣金額即可,同上實時計算.
只要購買數(shù)量,購買價格,優(yōu)惠券,折扣券等任意一個發(fā)生變化,總價都會自動跟蹤變化.
偵聽器
watch偵聽器能做到的計算屬性computed也能做到,什么時候適合用偵聽器呢?
主要適用于與事件和交互有關(guān)的場景,數(shù)據(jù)變化為條件,適用于一個數(shù)據(jù)同時觸發(fā)多個事物.
如當(dāng)借款額度大于可借額度時,彈出toast提示,并將當(dāng)前借款額度調(diào)整到最大額度.
可以看到,數(shù)據(jù)的變化為觸發(fā)彈框提示,有且僅在一定金額條件下才觸發(fā),而不是實時觸發(fā).
總結(jié)：彈框提示等事件交互的,適用于watch,數(shù)據(jù)計算和字符處理的適用于computed
17.v-on可以監(jiān)聽多個方法嗎
<input?type="text"? ? v-on="{? ? input:onInput,? ? focus:onFocus,? ? blur:onBlur,? ? }">
18.$nextTick的使用
this.$nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。
我們更改了某個dom元素內(nèi)部的文本，而這時候我們想直接打印出這個被改變后的文本是需要dom更新之后才會實現(xiàn)的，也就好比我們將打印輸出的代碼放在setTimeout(fn, 0)中；
