1厨内、ES6的新特性及其作用
(1)渺贤、let和const
a志鞍、let
與var類似，但只在let命令所在的代碼塊內有效
b固棚、const
const聲明的只是一個只讀的常量，一旦聲明厂汗，常量的值就不能改變呜师，常量名大寫
(2)、數(shù)值的擴展
a衷畦、Nummber.isFinite()：用來檢查一個數(shù)值是否屬實有限的
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite('hello'); // false
Number.isFinite(true); // false
b知牌、Number.isNaN()：用來檢查一個值是否為NaN
c、Number.parseInt()
d菩混、Number.parseFloat()
e扁藕、Number.isInteger()：判斷一個數(shù)值是否是整數(shù)
(3)、數(shù)組的擴展
a帖烘、Array.from()：將一個類似數(shù)組的最想轉為真正的數(shù)組
b橄杨、Array.of()：將一組值轉化為數(shù)組
c照卦、find()
2乡摹、MVVM的基本概念
MVVM(Model-View-ViewModel)是一個軟件架構設計模式，是一種簡化用戶界面的事件驅動編程方式瞬痘。
View：視圖層板熊，也就是用戶界面，前端主要由HTML和CSS來搭建
Model：數(shù)據(jù)模型津辩，泛指后端進行的各種業(yè)務邏輯處理和數(shù)據(jù)操控容劳，對于前端來說就是后端提供的api接口
ViewModel：由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。
3蚜印、Vue的單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中留量，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)寝凌，從而導致你的應用的數(shù)據(jù)流向難以理解孝赫。
4、Vue的常用指令和用法
v-if(判斷是否隱藏)
v-for(把數(shù)據(jù)遍歷出來)
v-bind(綁定屬性)
v-model(實現(xiàn)雙向綁定)
5伐债、Vue的生命周期
總共分為 8 個階段創(chuàng)建前/后致开，載入前/后，更新前/后虹蒋，銷毀前/后。
創(chuàng)建前/后： 在 beforeCreate 階段魄衅，vue 實例的掛載元素 el 還沒有晃虫。
載入前/后：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了哲银，但還是掛載之前為虛擬的 dom 節(jié)點荆责，data.message 還未替換。在 mounted 階段草巡，vue 實例掛載完成型酥，data.message 成功渲染。
更新前/后：當 data 變化時弥喉，會觸發(fā) beforeUpdate 和 updated 方法由境。
銷毀前/后：在執(zhí)行 destroy 方法后，對 data 的改變不會再觸發(fā)周期函數(shù)虏杰，說明此時 vue 實例已經解除了事件監(jiān)聽以及和 dom 的綁定纺阔，但是 dom 結構依然存在
6、Vue組件間通信的幾種方式
//父組件通過標簽上面定義傳值
<template>
<Main :obj="data"></Main>
</template>
<script>
//引入子組件
import Main form "./main"
exprot default{
name:"parent",
data(){
return {
data:"我要向子組件傳遞數(shù)據(jù)"
}
},
//初始化組件
components:{
Main
}
}
</script>
//子組件通過props方法接受數(shù)據(jù)
<template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父組件傳值
props:["obj"]
}
</script>
//子組件通過$emit方法傳遞參數(shù)
<template>
<div @event="events"></div>
</template>
<script>
//引入子組件
import Main form "./main"
exprot default{
methods:{
events:function(params){
console.log(params)
}
}
}
</script>
<template>
<div v-on:click="emitEvent">{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父組件傳值
props:["data"],
methods: {
emitEvent() {
this.$emit('event', params) // 派發(fā)函數(shù)质况，并傳遞值玻靡，params是你自己想傳的值
}
}
}
</script>
7、組件中的data為什么是一個函數(shù)
因為組件是用來復用的臼朗，且 JS 里對象是引用關系，如果組件中 data 是一個對象老厌，那么這樣作用域沒有隔離黎炉，子組件中的 data 屬性值會相互影響，如果組件中 data 選項是一個函數(shù)淀弹，那么每個實例可以維護一份被返回對象的獨立的拷貝庆械，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例沐序，是不會被復用的堕绩，因此不存在引用對象的問題。
8特姐、Vue如何實現(xiàn)數(shù)據(jù)雙向綁定的
vue.js 是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式黍氮，通過Object.defineProperty()來劫持各個屬性的 setter，getter捷枯，在數(shù)據(jù)變動時發(fā)布消息給訂閱者专执，觸發(fā)相應的監(jiān)聽回調。
9争剿、Vue-router路由模式
vue-router 有 3 種路由模式：hash痊末、history、abstract
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
10涩笤、Vuex的基本概念、如何使用舱禽、使用場景
基本概念：vue 框架中狀態(tài)管理恩沽。
如何使用：在 main.js 引入 store，注入里伯。新建了一個目錄 store渤闷，….. export 。
使用場景：單頁應用中狼电，組件之間的狀態(tài)弦蹂。音樂播放、登錄狀態(tài)腾务、加入購物車
11削饵、什么是服務器渲染（SSR）?為什么要使用SSR?
基本概念：vue在客戶端將標簽渲染成的整個 html 片段的工作在服務端完成未巫，服務端形成的html 片段直接返回給客戶端這個過程就叫做服務端渲染。
使用原因：
a劈伴、更好的 SEO：
因為 SPA 頁面的內容是通過 Ajax 獲取握爷，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內容追城；而 SSR 是直接由服務端返回已經渲染好的頁面（數(shù)據(jù)已經包含在頁面中）燥撞，所以搜索引擎爬取工具可以抓取渲染好的頁面；
b色洞、更快的內容到達時間（首屏加載更快）：
SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進行頁面的渲染锦针，文件下載等需要一定的時間等置蜀，所以首屏渲染需要一定的時間；SSR 直接由服務端渲染好頁面直接返回顯示媚污，無需等待下載 js 文件及再去渲染等廷雅，所以 SSR 有更快的內容到達時間；
12商架、computed和watch的區(qū)別以及使用場景
區(qū)別：
computed： 是計算屬性芥玉，依賴其它屬性值，并且 computed 的值有緩存赶袄，只有它依賴的屬性值發(fā)生改變抠藕，下一次獲取 computed 的值時才會重新計算 computed 的值；
watch： 更多的是「觀察」的作用敬辣，類似于某些數(shù)據(jù)的監(jiān)聽回調 零院，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調進行后續(xù)操作；
使用場景：
computed：當我們需要進行數(shù)值計算撰茎，并且依賴于其它數(shù)據(jù)時
watch：當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時
13玄妈、Vue遍歷數(shù)組及功能
foreach：for循環(huán)
filter：根據(jù)條件過濾
findIndex：查詢元素的下標
some：判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件就會返回true绎签，剩余的元素不會再執(zhí)行檢
14诡必、為什么要使用路由懶加載？如何實現(xiàn)爸舒？
原因：給客戶更好的客戶體驗扭勉，首屏組件加載速度更快一些，解決白屏問題涂炎。
實現(xiàn)方式：
//不進行頁面按需加載引入方式：
import home from '../../common/home.vue'
//進行頁面按需加載的引入方式：
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
15唱捣、FormData和Payload兩種傳輸數(shù)據(jù)的格式的區(qū)別，以及適用的場景
區(qū)別：FormData和Payload是瀏覽器傳輸給接口的兩種格式赂毯，這兩種方式瀏覽器是通過Content-Type來進行區(qū)分的
formdata：application/x-www-form-urlencoded
payload：application/json或multipart/form-data
適用場景：
formdata：Form表單提交
payload：axios方式提交
16拣宰、ES6的數(shù)組的使用方法
**map：循環(huán)遍歷每一項然后可以對每一項進行修改
arr.map(item=>item+'a')
reduce：對數(shù)組中的每個元素執(zhí)行一個由您提供的reducer函數(shù)(升序執(zhí)行)，將其結果匯總為單個返回值遣鼓。
const reducer = (accumulator, currentValue) => accumulator + currentValue;
arr.reduce(reducer);
forEach：對數(shù)組進行遍歷循環(huán)重贺，對數(shù)組的每一項運行給定函數(shù)
arr.forEach(function(value,index){})
filter：過濾掉不符合條件的,剩下符合條件的
arr.filter(args=>{})
push：將一個或多個元素添加到數(shù)組的末尾气笙，并返回該數(shù)組的新長度怯晕。
arr.push('a')
splice：刪除下標為index的1個元素
arr.splice(index,1)
17、Vue指令的使用
v-bind：
v-model：
v-for：
v-if：
事件監(jiān)聽及事件處理方法：
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發(fā)的事件先在此處理谭期，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
18隧出、Vue組件和路由的設計
組件的概念及創(chuàng)建方法
概念：組件就是可以擴展HTML元素，封裝可重用的HTML代碼针余，可以將組件看作自定義的HTML元素凄诞。
創(chuàng)建方法：
<template>
<button
:style="{ backgroundColor: color, fontSize: fontSize + 'px' }"
:class="'my-btn ' + size"
:disabled="disabled"
@click="handleClick"
>
<slot></slot>
</button>
</template>
<script>
function oneOf(value, validList) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i]) {
return true;
}
}
console.log("size參數(shù)錯誤");
return false;
}
export default {
name: "MyButton",
props: {
size: {r(value) {
return oneOf(value, ["small", "middle", "large", "default"]);
},
validato
default: "default",
},
disabled: {
type: Boolean,
default: false,
},
color: {
type: String,
// 默認為背景色為藍色
default: "#1E90FF",
},
fontSize: {
type: String,
// 字體大小默認為14px
default: "14",
},
},
methods: {
handleClick(event) {
this.$emit("on-click", event);
},
},
};
</script>
<style type="scss" scoped>
[class^="my-btn"] {
border: none;
outline: none;
cursor: pointer;
border-radius: 5px;
}
.small {
width: 80px;
height: 30px;
}
.middle {
width: 100px;
height: 40px;
}
.defaule {
width: 120px;
height: 40px;
}
.large {
width: 280px;
height: 60px;
}
</style>
路由
import Vue from "vue";
import VueRouter from "vue-router";
import Index from "../views/Index.vue";
import Covid from "../views/Covid.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Index",
component: Index,
children: [
{
path: "/covid",
name: "Covid",
component: Covid
},
]
},
const router = new VueRouter({
routes
});
export default router;
