1 接口请求一般放在哪个生命周期里

接口请求一般放在mounted声明周期里，但是需要注意的是 当ssr服务器端渲染的时候，不支持mounted，需要挡在created声明周期里。

2 computed 和watch 有什么区别

computed 相当于一个有缓存的watcher 依赖的属性一旦发生变化就会更新视图，适用于耗性能的计算场景

watch 不具备缓存属性 更多是监测作用，监听数据的回调，需要深度监听的时候 只需要deep：true打开就可以

3 v-if 和 v-show 有什么区别

v-if不渲染dom v-show 操作的是display

4 关联3的问题 visibility和display的区别

1、占用域的空间不同。

visibility要占用域的空间，而display则不占用。

2、回应正常文档流的不同。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden 。

如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none 。

当你决定用display：none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

5 关联上述问题 重绘和重排

1）重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。（说白了就是页面布局发生了变化）

2）重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。（说白了就是某元素的样式发生了变化）

注意：重绘不一定需要重排，重排必然会导致重绘

造成重排的原因有哪些：

1）添加、删除可见的dom

2）元素的位置改变

3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

4）页面渲染初始化

5）浏览器窗口尺寸改变

造成重绘的原因有哪些：
改变字体大小 颜色 伪类操作 等等

6 keep-alive

用来实现组件缓存的，当切换组件的时候不会对当前的组件进行卸载

常用的属性有include exclude 允许组件有条件的缓存

activated deactivated 两个生命周期 判断组件是否处于活跃状态

keep-alive 利用了LRU算法

7 了解LRU算法吗？

可以看这篇文章 https://blog.csdn.net/qq_26440803/article/details/83795122

8 vue 2.x 组件之间的通信方式有哪些

image.png

想要获取一个组件的实例 还可以给组件设置ref = ‘name’ 通过this.$refs.name调用

provide inject（ 没用过，官方不推荐使用）

兄弟组件通信 Vue.prototype.$bus = new Vue

vuex 状态管理器 （实现跨组件通信）

listerners

9 紧接着8的问题 什么是vuex 用过吗？怎么用的？

官网地址 https://vuex.vuejs.org/zh/

image.png

安装

image.png

使用

image.png image.png

state 类似 vue data 存放数据的 一般在vue的computed 里面读取state里某个状态

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

image.png
image.png image.png
image.png

10 v-model的原理是什么

其本质是一个语法糖 可以理解为value+input 方法，可通过model 属性的prop、event 属性来进行自定义

11 vue 的事件绑定原理是什么

其自定义的$on实现，此处应该类比一下原生，原生是通过addEventListener绑定给真是元素实现的

12 vue 的模板编译原理是什么？

说白了就是template 转成render函数的过程，该过程如下：

1）解析模板，生成ast语法树（一种用js对象的形式来描述的整个模板），使用大量的正则表达式对模板进行解析。

遇到标签和文本，会执行对应的钩子进行处理

2）由于vue是响应式的数据，但实际上模板中的数据不是全部都是响应式的，所以需要优化，去深度遍历AST树，根据条件对树节点进行标记，这些被标记过的就可以跳过对它们的比对。

最后就是将优化后的AST转换为可执行的代码。

总结来说就是 生成AST 优化 编译

13 template渲染 和 render渲染有什么区别，哪一个更好，为什么？

这个问题首先要弄清楚这俩是啥东西吧。

说白了就是一个是模板渲染 一个是函数渲染 当然 render 函数 跟 template 一样都是创建 html 模板

区别：

Template适合逻辑简单，render适合复杂逻辑。

使用者template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。

render的性能较高，template性能较低。这一点我们可以看一下，下图中vue组件渲染的流程图可知。

基于上一点，我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误

Render 函数的优先级要比template的级别要高，但是要注意的是Mustache(双花括号)语法就不能再次使用

最好的列子就是两个ui框架 element-ui 和 iview，当你需要实现表单的时候，element-ui重写表格列使用的template 而 iview 使用的render函数

14 如何创建render函数

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数

第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的

15 vue 的性能优化

v-if v-for 不连用
防抖节流
key保证唯一性
使用路由懒加载、异步加载组件
第三方模块加入
业务插件化
图片懒加载、数据懒加载
seo引擎优化
打包优化
压缩代码
压缩图片
......
有机会再补充.....