[Vue] vue的一些面试题3

1. vue 组件里的定时器要怎么销毁？

当生命周期销毁后，并没有将组件中的计时器销毁，虽然页面上看不出来，但是如果在控制台打印的话，会发现计时器还在运行，所以要销毁计时器，避免代码一直执行

const timer = setInterval(() =>{

    // 某些定时器操作

}, 500);

// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。

this.$once('hook:beforeDestroy', () => {

    clearInterval(timer);

})

2.你有使用过 JSX 吗？说说你对 JSX 的理解

jsx 不是一门新的语言，是一种新的语法糖。让我们在 js 中可以编写像 html 一样的代码。

允许 XML 语法直接加入到 JavaScript 代码中，让你能够高效的通过代码而不是模板来定义界面

3.`<template></template>`有什么用？

当做一个不可见的包裹元素，减少不必要的 DOM 元素，整个结构会更加清晰。

4.vue 的 is 这个特性你有用过吗？主要用在哪些方面？

动态组件，当你多个组件需要通过 v-if 切换时，可以使用 is 来简化代码

5.你了解什么是函数式组件吗？

需要提供一个 render 方法，接受一个参数（createElement 函数），方法内根据业务逻辑，通过 createElement 创建 vnodes，最后 return vnodes

createElement 函数，三个参数，第一个参数是 html 标签或自定义组件，第二个参数一个 obj（包含 props， on...等等），第三个参数 children(通过 createElement 构建，或者字符串)

6.组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的

7.说说你对 slot 的理解有多少？slot 使用场景有哪些？

slot, 插槽, 在使用组件的时候, 在组建内部插入东西.组件封装的时候最常使用到

8.你了解 vue 的 diff 算法吗？

vue 中会对整个 list 进行遍历, 判断使用到的某些属性是否发生变更, 从而更新发生变更的 item

所以 key 属性才会显得很重要, 它会告诉你, 我那个 item 发生变更, 而不是去检测整个 list

9.vue 如何优化首页的加载速度？

异步路由
异步加载
分屏加载
按需加载
延时加载图片
cdn
域名拆分

10.ajax、fetch、axios 这三都有什么区别？

ajax 是概念异步交换数据的概念
fetch 是浏览器提供的 webAPI 原理是基于 xmlHttpRequest 的封装
axios 是第三方库基于 xmlHttpRequest 的封装使用更便捷

11.说说你对单向数据流和双向数据流的理解

单向数据流：所有状态的改变可记录、可跟踪，源头易追溯；所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)；如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。

双向数据流：无论数据改变，或是用户操作，都能带来互相的变动，自动更新。