2020年前端Vue面试题（03-18）

前言

温故而知新，技术是学不完的。但学习的动力却是永无止境的！

1、如何理解vue中MVVM模式？

   MVVM全称是Model-View-ViewModel；vue是以数据为驱动的，一旦创建dom和数据就保持同步，
   每当数据发生变化时，dom也会变化。DOMListeners和DataBindings是实现双向绑定的关键。
   DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；
   DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

   在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

3、vue-router有哪几种导航钩子？

    三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
    第二种：组件内的钩子；
    第三种：单独路由独享组件

4、vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

5、v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的display属性让其显示或者隐藏，
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

6、$ route和$ router的区别？

$router：全局路由对象，又称‘全局路由守卫’。该对象包括了路由的跳转方法，钩子函数等
$route：当前路由对象，包括path，params等路由信息参数

7、vue和react的区别？

相同点：都鼓励组件化，都有’props’的概念，都有自己的构建工具，Reat与Vue只有框架的骨架，
其他的功能如路由、状态管理等是框架分离的组件
不同点：React：数据流单向，语法—JSX，在React中你需要使用setState()方法去更新状态。
Vue：数据双向绑定，语法–HTML，state对象并不是必须的，数据由data属性在Vue对象中进行管理。
适用于小型应用，但对于对于大型应用而言不太适合

8、fetch是什么？你了解吗？

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。
Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。
但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch(url)
.then(res.json())
.then((res)=>{
         console.log(res);
})


优点 ： 1.更加底层，提供的API丰富（request, response）
        2.脱离了XHR，是ES规范里新的实现方式
        3.语法简洁，更加语义化
        
注意：fetch只对网络请求报错，对400，500都当做成功的请求，
服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致
请求不能完成时，fetch 才会被 reject。

9、 组件之间的传值？

父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据

子组件向父组件传递数据
子组件通过$emit方法传递参数

10、vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，
改为const定义的方式进行引入。
不进行页面按需加载引入方式：
import home from '../../common/home.vue'
进行页面按需加载的引入方式：
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

11、生命周期相关知识点

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

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

12、为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，
否则 Vue 为了效率只会替换相同标签内部的内容。