了解Vue2.0 以及3.0

1.MVVM的理解

model代表数据模型，数据和业务逻辑都在model层中定义

view代表视图，负责数据展示

viewmodel代表与界面对应的model

MVVM是MVC的变种进阶，在概念上真正将页面与数据逻辑分离的模式，把数据绑定放到一个js中去实现，这个js文件主要功能是完成数据的双向绑定，把model绑定到UI元素上

2.单页面应用和多页面应用的优缺点

单页面应用（SPA），通俗一点说就是指只有一个页面，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，vue是单页面应用。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

优点：

用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。

前后端分离，比如vue项目

完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

**不利于 SEO优化，**单页页面，数据在前端渲染，就意味着没有 SEO。

**页面导航不可用，**如果一定要导航需要自行实现前进、后退

3.v-if和v-for可以一起使用吗？为什么

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

4.keep-alive是什么

keep-alive是Vue提供给我们一个内置组件， 作用：保存我们路由切换时组件的状态 , 比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以 使用keep-alive保存列表页面的滚动位置。

组件使用keep-alive以后会新增****两个生命周期 actived() deactived(),

有两个参数 include - 包裹的组件名会被缓存

exclude 包裹的组件名都不会被缓存

5.解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象或数组中取出,赋值给其他变量。

6.什么是虚拟dom

虚拟dom是利用js描述元素与元素的关系，用js对象来表示真实的DOM树结构，创建一个虚拟DOM对象

7.vue是什么以及vue的优点

vue是渐进式的前端框架

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；

双向数据绑定

组件化开发

视图，数据，结构分离

虚拟DOM

运行速度更快

8.v-modal的语法原理

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。

9.说一下从输入 URL 到页面加载完中间发生了什么?

DNS 解析

TCP 连接

发送 HTTP 请求

服务器处理请求并返回需要的数据

浏览器解析渲染页面

连接结束

10.vue3.0 与 vue2.0 的区别

1.性能的提升 更加的小巧,更快速

2.API变动 模板中99%将保持不变

3.重写虚拟DOM 减少运行时的开销

4.选项api变成了组合api和选项api的组合

11.prop 验证，和默认值

props:会接收不同的数据类型，常用的数据类型的设置默认值的写法
Number, String, Boolean, Array, Function, Object

prop 数据单项传递，父不影响子，子不影响父
不能再组件中直接修改prop传递的值，Vue会发出警告

12.vue中key 的作用

在列表渲染时使用key属性

使用key属性强制替换元素

更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新

13.vue常用修饰符

.stop 阻止事件冒泡
.capture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转
.once 事件只能触发一次

.native 触发js原生的事件
.number 把文本框的内容转换为数字
.trim 去除文本框左右空格

.keyup.enter
.keyup.space

14.vue中methods,computed,watch的区别

methods用于组件的封装,逻辑处理

computedvue中独有的计算属性,computed可以缓存,methods不能缓存

watch是监听data和计算属性中新旧变化的

15.vue双向数据绑定原理

结合发布者-订阅者模式结合es6的proxy的set和get方法实现数据劫持,进一步结合watcher的update

方法实现数据的双向绑定