1.vue優(yōu)點(diǎn)
1. 輕量化
使用 Vue.js 來(lái)開發(fā)生產(chǎn)應(yīng)用或個(gè)人項(xiàng)目的一個(gè)顯著優(yōu)勢(shì)是它是一個(gè)相對(duì)輕量化的框架/庫(kù)扼脐。讓我們看看不同前端框架/庫(kù)的下載空間
2. 低復(fù)雜性
在使用 React 構(gòu)建許多應(yīng)用之后案训，一旦在混合代碼庫(kù)中添加狀態(tài)管理，隨著應(yīng)用程序變大专筷，代碼庫(kù)通常會(huì)變得非常復(fù)雜于未。我注意到 React 應(yīng)用變得復(fù)雜的原因之一是 JSX 模板撕攒、 lifecycle（生命周期）方法和其他方法都存在于同一個(gè)對(duì)象中。這常常使理解邏輯流程變得非常困難烘浦，而Vue呢 :
3. Virtual DOM（虛擬 DOM）
就像 React 一樣抖坪，Vue.js 實(shí)現(xiàn)了使用虛擬 DOM 來(lái)操作/渲染視圖。通過(guò)使用虛擬 DOM闷叉，用戶界面將通過(guò)在每次需要更改時(shí)不渲染真實(shí)的 DOM擦俐，而只是呈現(xiàn)虛擬 DOM 和真實(shí) DOM 之間的部分差異，進(jìn)而獲得更好的性能握侧。
4. 低學(xué)習(xí)曲線（對(duì)初學(xué)者友好）
從事 Web 開發(fā)的人都會(huì)學(xué)習(xí)以下三種基礎(chǔ)技術(shù)：HTML蚯瞧、CSS 和 JavaScript嘿期。想象一下一個(gè)初學(xué)者必須學(xué)習(xí)一個(gè)叫做 JSX 的新東西，而不是 HTML埋合。雖然 JSX 看起來(lái)類似于 HTML备徐，但確實(shí)有很多不同之處將 JSX 與 HTML 區(qū)分開來(lái)，而這種學(xué)習(xí)就不是 Vue.js 所必需的饥悴。
如上面所示坦喘，Vue.js 使用與 HTML 相同的標(biāo)記名，這使得將知識(shí)從 HTML 傳輸?shù)?Vue.js 更加容易西设。此外，代碼的模塊化結(jié)構(gòu)有助于理解 Vue.js 組件的不同動(dòng)作部分答朋。
對(duì)于那些熟悉 React 的人來(lái)說(shuō)贷揽，學(xué)習(xí) Vue.js 是小菜一碟，因?yàn)閮烧咧g有很多相似之處梦碗。
2.vue父組件向子組件傳遞數(shù)據(jù)禽绪？
方式一
父?jìng)髯又饕ㄟ^(guò)在父組件v-model綁定數(shù)據(jù)，在子組件進(jìn)行用props進(jìn)行數(shù)據(jù)的接收
<Child :msg="data"></Child>
方式二
父組件觸發(fā)子組件的方法洪规，主要通過(guò)$refs來(lái)觸發(fā)印屁，同時(shí)傳參
//觸發(fā)子組件方法，并傳參this.$refs.mychild.init("chrchr","120");
3.子組件像父組件傳遞事件
通過(guò)$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ā)按鈕時(shí)斩例，msg獲取值為 哈哈啊哈哈
? ? }
? }
}
</script>
4.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)
1.共同點(diǎn)：都能控制元素的顯示和隱藏雄人。
2.不同點(diǎn)：實(shí)現(xiàn)本質(zhì)?法不同，v-show本質(zhì)就是通過(guò)控制css中的display設(shè)置為none念赶，控制隱藏础钠，只會(huì)編譯?次；v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素叉谜，若初始值為false旗吁，就不會(huì)編譯了。?且v-if不停的銷毀和創(chuàng)建?較消耗性能停局。
3.總結(jié)：如果要頻繁切換某節(jié)點(diǎn)很钓，使?v-show(切換開銷?較?，初始開銷較?)董栽。如果不需要頻繁切換某節(jié)點(diǎn)使?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.說(shuō)出幾種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指令:隊(duì)列表數(shù)據(jù)的渲染很常用
v-show指令:行所在標(biāo)簽的顯示與隱藏
9.vue-loader是什么？使用它的用途有哪些工禾？
10.為什么使用key
使用 v-for?更新已渲染的元素列表時(shí)运提，默認(rèn)用 就地復(fù)用?策略蝗柔。列表數(shù)據(jù)修改的時(shí)候，vue?會(huì)根據(jù) key?去判斷某個(gè)值是否修改 —— 如果修改民泵，則重新渲染這一項(xiàng)癣丧，否則復(fù)用之前的元素。在 v-for?中使用 key?是一個(gè)最佳實(shí)踐栈妆，但是我們需要注意使用的是什么 key?胁编。
如果是使用 index?作為 key?：
在末尾插入 F 的話沒(méi)有問(wèn)題，因?yàn)檫@個(gè)時(shí)候不影響前面元素的 index鳞尔，每個(gè)元素的 index 不變嬉橙，而?vue?可以依據(jù)這些 index 對(duì)元素進(jìn)行復(fù)用；但是現(xiàn)在是在中間插入 F寥假，一旦插入成功市框，那么 CDE 的 index 都會(huì)改變，這時(shí)候 CDE 都需要重新渲染一次糕韧。而 AB 的 index 是不變的枫振，所以 AB 可以得到復(fù)用。
如果是使用 id?作為 key?：
這里就要注意了萤彩，這個(gè) id?是唯一的粪滤，也是固定不變的（也可以采用元素本身的值作為這個(gè)唯一的 id），不管插入還是刪除雀扶，元素該是哪個(gè) id?還是哪個(gè) id?杖小，這意味著以這樣的 id?作為key?時(shí)，所有舊元素都可以得到復(fù)用怕吴。所以這種情況下窍侧，我們只需要渲染新插入的 F 元素即可。
總結(jié)：vue中列表循環(huán)需加:key="唯一標(biāo)識(shí)" 唯一標(biāo)識(shí)可以是item里面id index等转绷，因?yàn)関ue組件高度復(fù)用增加Key可以標(biāo)識(shí)組件的唯一性伟件，為了更好地區(qū)別各個(gè)組件 key的作用主要是為了高效的更新虛擬DOM
11.axios及安裝
axios的基本概念及安裝配置方法
ajax:異步請(qǐng)求，是一種無(wú)需再重新加載整個(gè)網(wǎng)頁(yè)的情況下议经，能夠更新部分網(wǎng)頁(yè)的技術(shù)
axios:用于瀏覽器和node.js的基于promise的HTTP客戶端
1.從瀏覽器制作XMLHttpRequests
2.讓HTTP從node.js的請(qǐng)求
3.支持promise api
4.攔截請(qǐng)求和響應(yīng)
5.轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
6.取消請(qǐng)求
7.自動(dòng)轉(zhuǎn)換成json數(shù)據(jù)
8.客戶端支持防止xsrf
axios的安裝：
cmd命令行進(jìn)入到vue項(xiàng)目下斧账，執(zhí)行npm install axios 然后執(zhí)行提示npm install --save axios vue-axios
配置方法：
打開vue的編輯器，找到當(dāng)前項(xiàng)目的main.js文件煞肾，輸入：
import axios from 'axios'
Vue.prototype.axios = axios
12.axios解決跨域
在config下的index.js里輸入：
? proxyTable: {
????? '/api': {? //使用"/api"來(lái)代替"http://f.apiplus.c"?
? ????target: 'http://127.0.0.1:5000/', //源地址?
? ????changeOrigin: true, //改變?cè)?,允許跨域
? ????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- 輸入首尾空格過(guò)濾
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時(shí)候在所在的style樣式標(biāo)簽上添加lang=”scss”即可應(yīng)用對(duì)應(yīng)的語(yǔ)法，否則報(bào)錯(cuò)
15.請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
vue-cli 項(xiàng)目中src目錄每個(gè)文件夾和文件的用法
assets 文件夾是放靜態(tài)資源
components 是放組件
router 是定義路由相關(guān)的配置
view 視圖
app.vue 是一個(gè)應(yīng)用主組件
main.js 是入口文件
webpack目錄：
├─build // 保存一些webpack的初始化配置,項(xiàng)目構(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文件夾保存一些項(xiàng)目初始化的配置│
├─dev.env.js? ? ? ? ? // 開發(fā)環(huán)境的配置│
├─index.js? ? ? ? ? ? // 項(xiàng)目一些配置變量│
├─prod.env.js? ? ? ? // 生產(chǎn)環(huán)境的配置│
├─dist? ? ? ? ? ? ? ? ? // 打包后的項(xiàng)目
├─node_modules? ? ? ? ? // 依賴包│
├─src? ? ? ? ? ? ? ? ? // 源碼目錄│
├─assets? ? ? ? ? ? ? // 靜態(tài)文件目錄│
├─components? ? ? ? ? // 組件文件│
├─router? ? ? ? ? ? ? // 路由│
├─App.vue? ? ? ? ? ? // 是項(xiàng)目入口文件│
├─main.js? ? ? ? ? ? // 是項(xiàng)目的核心文件，入口
├─static? ? ? ? ? ? ? ? // 靜態(tài)資源目錄
├─.babelrc? ? ? ? ? ? ? // Babel的配置文件
├─.editorconfig? ? ? ? // 代碼規(guī)范配置文件
├─.gitignore? ? ? ? ? ? // git忽略配置文件
├─.postcssrc.js? ? ? ? // postcss插件配置文件
├─index.html? ? ? ? ? ? // 頁(yè)面入口文件
├─package-lock.json? ? // 項(xiàng)目包管控文件
├─package.json? ? ? ? ? // 項(xiàng)目配置
└─README.md? ? ? ? ? ? // 項(xiàng)目說(shuō)明書
16.分別簡(jiǎn)述computed和watch的使用場(chǎng)景
特點(diǎn)和區(qū)別：
vue的computed選項(xiàng)主要用于同步對(duì)數(shù)據(jù)的處理,而watch選項(xiàng)主要用于事件的派發(fā),可異步.
這兩者都能達(dá)到同樣的效果,但是基于它們各自的特點(diǎn),使用場(chǎng)景會(huì)有一些區(qū)分.
computed擁有緩存屬性,只有當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí),關(guān)聯(lián)的數(shù)據(jù)才會(huì)變化,適用于計(jì)算或者格式化數(shù)據(jù)的場(chǎng)景.
watch監(jiān)聽數(shù)據(jù),有關(guān)聯(lián)但是沒(méi)有依賴,只要某個(gè)數(shù)據(jù)發(fā)生變化,就可以處理一些數(shù)據(jù)或者派發(fā)事件并同步/異步執(zhí)行.
計(jì)算屬性
抽象的概念不容易理解,用多了高頻的場(chǎng)景自然就熟悉了,計(jì)算屬性表現(xiàn)為同步處理數(shù)據(jù).
金融領(lǐng)域的分期付款,P2P年化收益,帶有計(jì)算性質(zhì)的,都可以優(yōu)先考慮computed.
不需要關(guān)注點(diǎn)擊事件或者其他數(shù)據(jù),只要將計(jì)算規(guī)則寫在屬性里,就能實(shí)時(shí)獲取對(duì)應(yīng)的數(shù)據(jù).
電商領(lǐng)域的購(gòu)物車統(tǒng)計(jì),一個(gè)數(shù)據(jù)依賴于一個(gè)或者多個(gè)數(shù)據(jù).
當(dāng)購(gòu)物車數(shù)量和產(chǎn)品變化時(shí),自動(dòng)計(jì)算出價(jià)格*數(shù)量的總和.
如果有優(yōu)惠券或者折扣,自動(dòng)減去優(yōu)惠和計(jì)算折扣金額即可,同上實(shí)時(shí)計(jì)算.
只要購(gòu)買數(shù)量,購(gòu)買價(jià)格,優(yōu)惠券,折扣券等任意一個(gè)發(fā)生變化,總價(jià)都會(huì)自動(dòng)跟蹤變化.
偵聽器
watch偵聽器能做到的計(jì)算屬性computed也能做到,什么時(shí)候適合用偵聽器呢?
主要適用于與事件和交互有關(guān)的場(chǎng)景,數(shù)據(jù)變化為條件,適用于一個(gè)數(shù)據(jù)同時(shí)觸發(fā)多個(gè)事物.
如當(dāng)借款額度大于可借額度時(shí),彈出toast提示,并將當(dāng)前借款額度調(diào)整到最大額度.
可以看到,數(shù)據(jù)的變化為觸發(fā)彈框提示,有且僅在一定金額條件下才觸發(fā),而不是實(shí)時(shí)觸發(fā).
總結(jié)：彈框提示等事件交互的,適用于watch,數(shù)據(jù)計(jì)算和字符處理的適用于computed
17.v-on可以監(jiān)聽多個(gè)方法嗎
<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 自動(dòng)綁定到調(diào)用它的實(shí)例上广鳍。
我們更改了某個(gè)dom元素內(nèi)部的文本，而這時(shí)候我們想直接打印出這個(gè)被改變后的文本是需要dom更新之后才會(huì)實(shí)現(xiàn)的吓妆，也就好比我們將打印輸出的代碼放在setTimeout(fn, 0)中赊时；
