前端框架复习相关

1、ES6的新特性及其作用

(1)、let和const
a、let
与var类似，但只在let命令所在的代码块内有效
b、const
const声明的只是一个只读的常量，一旦声明，常量的值就不能改变，常量名大写
(2)、数值的扩展
a、Nummber.isFinite()：用来检查一个数值是否属实有限的

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()：判断一个数值是否是整数
(3)、数组的扩展
a、Array.from()：将一个类似数组的最想转为真正的数组
b、Array.of()：将一组值转化为数组
c、find()

2、MVVM的基本概念

MVVM(Model-View-ViewModel)是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。
View：视图层，也就是用户界面，前端主要由HTML和CSS来搭建
Model：数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的api接口
ViewModel：由前端开发人员组织生成和维护的视图数据层。

3、Vue的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

4、Vue的常用指令和用法

v-if(判断是否隐藏)
v-for(把数据遍历出来)
v-bind(绑定属性)
v-model(实现双向绑定)

5、Vue的生命周期

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

6、Vue组件间通信的几种方式

//父组件通过标签上面定义传值
<template>
    <Main :obj="data"></Main>
</template>
<script>
    //引入子组件
    import Main form "./main"

    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子组件传递数据"
            }
        },
        //初始化组件
        components:{
            Main
        }
    }
</script>


//子组件通过props方法接受数据
<template>
    <div>{{data}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["obj"]
    }
</script>

//子组件通过$emit方法传递参数
<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) // 派发函数，并传递值，params是你自己想传的值
          }
        }
    }
</script>

7、组件中的data为什么是一个函数

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

8、Vue如何实现数据双向绑定的

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

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 框架中状态管理。
如何使用：在 main.js 引入 store，注入。新建了一个目录 store，….. export 。
使用场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

11、什么是服务器渲染（SSR）?为什么要使用SSR?

基本概念：vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。
使用原因：
a、更好的 SEO：
因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
b、更快的内容到达时间（首屏加载更快）：
SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

12、computed和watch的区别以及使用场景

区别：

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

使用场景：
computed：当我们需要进行数值计算，并且依赖于其它数据时
watch：当我们需要在数据变化时执行异步或开销较大的操作时

13、Vue遍历数组及功能

foreach：for循环
filter：根据条件过滤
findIndex：查询元素的下标
some：判断数组中是否存在满足条件的项，只要有一项满足条件就会返回true，剩余的元素不会再执行检

14、为什么要使用路由懒加载？如何实现？

原因：给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
实现方式：

//不进行页面按需加载引入方式：
import  home   from '../../common/home.vue'
//进行页面按需加载的引入方式：
const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

15、FormData和Payload两种传输数据的格式的区别，以及适用的场景

区别：FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的
formdata：application/x-www-form-urlencoded
payload：application/json或multipart/form-data
适用场景：
formdata：Form表单提交
payload：axios方式提交

16、ES6的数组的使用方法

**map：循环遍历每一项然后可以对每一项进行修改
arr.map(item=>item+'a')
reduce：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
const reducer = (accumulator, currentValue) => accumulator + currentValue;
arr.reduce(reducer);
forEach：对数组进行遍历循环，对数组的每一项运行给定函数
arr.forEach(function(value,index){})
filter：过滤掉不符合条件的,剩下符合条件的
arr.filter(args=>{})
push：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
arr.push('a')
splice：删除下标为index的1个元素
arr.splice(index,1)

17、Vue指令的使用

v-bind：
v-model：
v-for：
v-if：
事件监听及事件处理方法：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

18、Vue组件和路由的设计

组件的概念及创建方法

概念：组件就是可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。
创建方法：

<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参数错误");
  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;