1. 讲一讲mvvm框架

mvvm是 model-view-viewmodel的缩写.也就是把mvc中的Controller演变成了viewmodel.
Model层代表数据模型, View层代表ui组件, viewModel是view和model层的桥梁, 数据绑定到viewmodel层并主动将数据渲染到view上,视图扭转时候会告诉viewmodel层更新数据

2. 介绍下vue响应式零碎

vue会对应用Object.defineProperty对data的getter/setter办法进行拦挡, 联合公布订阅模式,在getter中进行订阅,在setter中进行公布告诉,让所有订阅者实现响应

3. 那你晓得vue3.0响应式数据原理么

vue3 改用proxy代替Object.defineProperty.因为proxy能够间接监听对象和数组的变动.

4. computed与watch的区别

计算属性computed和监听器watch都能够察看属性的变动而做出响应
不同点:
Computed实质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 实用于计算比拟耗费性能的计算场景。当表达式过于简单时，在模板中放入过多逻辑会让模板难以保护，能够将简单的逻辑放入计算属性中解决。
Watch没有缓存性，更多的是察看的作用，能够监听某些数据执行回调。当咱们须要深度监听对象中的属性时，能够关上deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话能够应用字符串模式监听，如果没有写到组件中，不要遗记应用unWatch手动登记哦

5. 介绍下vue的生命周期

beforeCreate
是new Vue()之后触发的一个钩子, 在以后阶段data, methods computed 以及watch上的数据和办法都不能拜访
created
在实例创立实现后产生. 以后阶段曾经实现了数据观你测,也就是能够应用数据,更改数据, 在这里更改数据不会触发updated函数, 能够做一些初始数据获取, 在以后阶段无奈和dom进行交互
beforeMount
产生在挂载之前,在这之前template模板已导入渲染函数编译, 而以后阶段虚构dom曾经创立实现, 行将开始渲染,在此时也能够对数据进行批改
mounted
在挂载实现后产生,在以后阶段,实在的dom挂载实现, 数据实现双向绑定,能够拜访到dom节点
beforeUpdate
产生在更新之前,也就是响应式数据产生更新, 虚构dom从新渲染前被触发
updated
产生在更新实现之后,以后阶段组件dom已实现更新
beforeDestory
产生在实例销毁之前,在以后阶段实例齐全能够被应用, 咱们能够在这里做善后收尾工作, 比方革除定时器
destroyed
产生在数据实例销毁之后,这个时候只剩下dom空壳, 组件已被拆解,数据绑定解除, 监听移除,

6. 组件之间怎么通信

父子组件通信

父组件 > 子组件 prop
子组件 > 父组件 $emit
获取组件实例
应用$parent/$childred $refs.xxx

兄弟组件通信

event bus
vuex

跨组件通信

provide/inject
event bus
vuex

7. Vue事件绑定原理说一下

组件事件绑定: 每一个vue实例都是一个event bus, 当子组件被创立的时候,父组件将事件传递给子组件, 子组件初始化的时候是有$on办法将事件注册到外部, 须要的时候应用$emit触发函数

而对于原生native事件,应用addEventListener绑定到实在的dom上

8. vue模板渲染的原理是什么

vue中的模板template无奈被浏览器解析并渲染,因为这不属于浏览器的规范, 不是正确的html语法, 所以须要将template转化为一个javascript函数, 这样浏览器就能够执行这一个函数并渲染出对应的html元素,就能够让视图跑起来了.这个转化过程,就成为模板编译

模板编译又分为三个阶段,解析parse 优化optimize 生成generate,最终生成可执行函数render
parse阶段: 应用大量的正则表达式对template字符串进行解析,将标签 指令 属性等转化为形象语法树AST
optimise阶段: 遍历AST,找到其中的一些动态节点并进行标记,不便在页面重渲染的时候进行diff比拟时,间接跳过这一些动态节点.
generate阶段: 将最终的AST转化为render函数字符串

9. template预编译是什么

对于vue组件来说,模板编译只会在组件实例化的时候编译一次,生成渲染函数后再也不会进行编译,
而模板编译的目标也不仅仅是将template转化为render function
这个过程,正好能够在我的项目构建的过程中实现,这样能够让理论组件在runtime时间接跳过模板渲染,进而晋升性能,这个在我的项目构建的编译template的过程,就是预编译

10. template和jsx有什么区别

对于runtime来说,只须要保障组件存在render函数即可,而咱们有了预编译之后,咱们只须要保障构建过程中生成render函数就能够
在webpack中,咱们是要vue-loader编译.vue文件, 外部依赖的vue-template-compiler模块, 在webpack构建过程中,将template预编译成render函数
JSX绝对于template而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。

11. 说下什么是virtual dom

virtual dom是dom节在javascript中的一种形象数据结构,之所以须要虚构dom.是因为浏览器中操作dom的代价比拟低廉,频繁的操作dom会产生性能问题,虚构dom的作用是在每一次响应式数据发生变化引起页面重渲染时,vue比照更新前后的虚构dom,匹配找出尽可能少的须要更新的实在dom,从而进步性能的目标

12 介绍下vue中的diff算法

13 key属性的作用

在对节点进行diff的过程中,判断是否为雷同节点的一个很重要的条件是key是否相等, 如果是雷同节点, 则会尽可能的复用原有的dom节点,

14. 说说vue2.0和3.0的区别

  1. 重构响应式零碎 应用proxy替换object.defineProperty,应用proxy劣势:
  • 可间接监听数组类型的数据变动
  • 监听的指标为对象,不须要像object.defineProperty一样遍历每个属性,有肯定的性能晋升
  • 可拦挡apply ownKeys has等13种办法,
  • 间接实现对象属性的新增/删除
  1. 新增composition Api 更好的逻辑复用和代码组织
  2. 重构virtual Dom
  • 模板编译是的优化,将一些动态节点编译成常量
  • slot优化,将slot编译为lazy函数, 将slot的渲染的决定权交给子组件
  1. 代码结构调整,体积更小
  2. 应用typescript 替换flow

15. 为什么要新增composition Api

在vue2.0中,随着性能的减少,组件变得越来越简单,越来越难保护, 而难以保护的根本原因是vue的api设计迫使开发者应用watch computed methods选项组织代码,而不是理论业务逻辑
另外vue2 短少一种较为简洁的低成本的机制来实现逻辑复用,尽管能够minxis实现逻辑复用,然而当mixin变多的时候,会使得难以找到对应的data computed或者method来源于那个mixin,
所以CompositionAPI的呈现,次要也是解决option API带来的问题,
第一个就是代码组织的问题,composition API能够让开发者依据业务逻辑组织本人的代码, 让代码具备更好的可读性和可扩展性
第二个就是实现代码的逻辑提取和复用,

16. 都说compositionApi与react hook很像,说说区别

composition API 是基于vue的响应式零碎实现的,
申明在setup函数内, 一次组件实例化只调用一次setup, 而React Hook每次重渲染都须要调用hook, 使得react性能绝对于vue比较慢
compostion API的调用不须要顾虑调用程序, 也能够在循环 条件 嵌套函数中应用
响应式零碎主动实现了依赖收集,进而组件的局部的性能优化由vue外部本人实现,

17.SSR有理解么? 原理是什么

在客户端申请服务器的时候，服务器到数据库中获取到相干的数据，并且在服务器外部将Vue组件渲染成HTML，并且将数据、HTML一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程，叫做服务端渲染SSR。

而当客户端拿到服务器渲染的HTML和数据之后，因为数据曾经有了，客户端不须要再一次申请数据，而只须要将数据同步到组件或者Vuex外部即可。除了数据意外，HTML也构造曾经有了，客户端在渲染组件的时候，也只须要将HTML的DOM节点映射到Virtual DOM即可，不须要从新创立DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活。
应用SSR的益处：

  • 有利于SEO：其实就是有利于爬虫来爬你的页面，因为局部页面爬虫是不反对执行JavaScript的，这种不反对执行JavaScript的爬虫抓取到的非SSR的页面会是一个空的HTML页面，而有了SSR当前，这些爬虫就能够获取到残缺的HTML构造的数据，进而收录到搜索引擎中。
  • 白屏工夫更短：绝对于客户端渲染，服务端渲染在浏览器申请URL之后曾经失去了一个带有数据的HTML文本，浏览器只须要解析HTML，间接构建DOM树就能够。而客户端渲染，须要先失去一个空的HTML页面，这个时候页面曾经进入白屏，之后还须要通过加载并执行 JavaScript、申请后端服务器获取数据、JavaScript 渲染页面几个过程才能够看到最初的页面。特地是在简单利用中，因为须要加载 JavaScript 脚本，越是简单的利用，须要加载的 JavaScript 脚本就越多、越大，这会导致利用的首屏加载工夫十分长，进而升高了体验感。

借鉴网址
vue20道面试
https://juejin.im/post/684490...
聊聊对vue.js框架的了解
https://github.com/yacan8/blo...
尤大大总结
https://juejin.im/post/684490...