1.vue理解
vue是一个渐进式框架，核心库只关注视图层。它是一个声明式框架，更加关注结果，而命令式关注过程。
MVC模式是后端进行处理的，前端进行借用模式MVVM
后端的MVC：请求在控制器进行处理，使用服务层拆分业务层和持久层，调用数据库，再进行页面渲染。
MVVM：数据绑定到视图上，简化controller. 但是vue不是传统的MVVM模式，只是借鉴思想。
所以vue可以跨平台，减少操作真实DOM，组件化。
2.SPA的理解
单页应用，vue和React都只有一个HTML页面，并且提供一个挂载点，最终打包后在页面引入对应资源。通过路由进行切换页面。
缺点：HTML中是没有任何内容的，无法做到SEO优化。而且需要再一次请起js,浏览器进行解析js,渲染真实DOM,造成首屏加载时间长，白屏时间长，但是维护成本低，页面切换快，进行局部刷新，服务端压力小。
MPA多页应用，多个html页面。每个页面重复加载，js,css资源，跳转时整个页面都要刷新，服务端压力大，不好维护。服务端返回完整的HTML，白屏时间小，可以进行SEO优化。
解决方案：
静态页面预渲染SSG，在构建时生成一个完整的HTML页面，打包前页面在浏览器运行，保存HTML。但适合静态页面网站，变化率不高的网站。
SSR+CSR 首屏采用服务端渲染方式，后续交互采用客户端渲染方式。
3.$refs通讯时的弊端
vue组件通信：使用$refs在组件之间进行通信，允许父组件中访问子组件的方法和数据。
弊端：
1.破坏了单向数据流的原则：父组件可以直接修改子组件中的数据，容易导致状态管理的难以维护。
2.加强了耦合关系:父子组件形成了紧密的耦合关系。
3.组件复用问题：父子组件绑定在一起，不能实现真正的组件复用。
4.undefined：获取组件实例是要在组件渲染的情况下，在组件未渲染的时候去通过$ref调用子组件里面的内容，拿到的是undefined。
4.单页应用首屏加载速度慢如何解决
1.路由懒加载，异步组件实现组件拆分,首页加载所需要的组件，同时减少入口文件体积大小（优化骨架屏）。
2.图片资源压缩，使用雪碧图，小图片进行base64减少http请求。
3.静态资源采取CDN提速。
4.静态资源缓存，采用HTTP缓存，localStorage资源缓存。
5.SSR对首屏做服务端渲染。
6.打包开启gzip压缩处理，compression-webpack-plugin插件。
7.抽离公共代码，采用splitChunks进行代码分割。
5.SSR解决了什么问题
SSR为服务端渲染。
由服务端完成页面的HTML结构拼接，发送到浏览器，然后绑定状态与事件，成为完全可交互页面的过程。
1.解决了seo，搜索引擎优的爬取。
2.首屏呈现渲染加载快，白屏时间短。
缺点：
1.提高整个项目的复杂度。
2.库及代码的兼容性。
3.性能问题，消耗大，会污染，内存占用过多。
4.服务器负载变大。
6.常用的修饰符
作用：许多细节方面的处理更加方便，更加专注于逻辑处理。
修饰符分为五种：
1.表单修饰符
2.事件修饰符
3.鼠标修饰符
4.键值修饰符
5.v-bind修饰符
1.表单修饰符
1.trim 自动过滤用户首空格字符，中间的空格并不会过滤
v-modle.trim
2.number 自动将用户输入值转化为数值类型，无法被解析返回原来的值
v-modle.number
3.lazy 光标离开标签时，才会赋值给value,在change事件之后进行信息同步
v-modle.lazy
2.事件修饰符
1.stop阻止了事件冒泡，等价于event.stopPropagation()
@click.stop
2.prevent阻止了事件的默认行为，等价于event.preventDefault()
@click.prevent
3.once绑定事件之后只能触发一次
@click.once
4.native让组件变成像html内置标签那样监听根元素的原生事件
修饰符在Vue 3.0中已经被移除
5.self 只当在event.target是当前元素自身时触发处理函数.将事件绑定在自身身上，相当于阻止事件冒泡
v-on:click.self
6.caption：用于事件捕获,使事件触发从包含这个元素的顶层开始往下触发
3.鼠标按钮修饰符
1.left 左键点击
@click.left
2.right 右键点击
@click.right
3.middle 中键点击
@click.middle
4.键盘修饰符
```
// 只有按键为keyCode的时候才触发,监听特定键盘按下
<input type="text" @keyup.keyCode="shout()">
```
5.v-bind修饰符
1.async 能对props进行一个双向绑定
//父组件
<comp :myData.sync="data"></comp>
//子组件
this.$emit('update:myData',params);
//父亲组件
<comp :myData="data" @update:myData="func"></comp>
func(e){
this.data = e;
}
//子组件js
func2(){
this.$emit('update:myMessage',params);
}
注：
1.使用sync子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
2.带有.sync修饰符的v-bind不能和表达式一起使用
3.将 v-bind.sync用在一个字面量的对象上，如 v-bind.sync=”{ title: data.title }”是无法正常工作的
2.prop设置自定义标签属性，避免暴露数据，防止污染HTML结构
<input value="1" :index.prop="index">
3.camel将命名变为驼峰命名法，如将my-div属性名转换为myDiv
<svg :myDiv="myDiv"></svg>
7.什么是骨架屏
在页面完全渲染完成之前，看到一个样式简单，描绘了当前页面的大致框架的页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现。
8.Vue2和Vue3区别
1.响应式原理的不同。Vue2使用Object.defineProperty进行数据劫持，这种方式对新增属性和数组变动的检测有限制。相比之下，Vue 3采用了ES6可以更有效地监控数据变化，包括对象和数组的内部变动。
2.Vue3允许组件模板有多个根节点，而Vue 2要求只有一个根节点。这种变化简化了对复杂组件结构的处理。
3.Vue3在性能方面有显著提升，包括初次渲染和更新的速度提升，以及内存使用的减少。
4.API类型的不同。Vue 3引入了Composition API这是一种基于函数的API风格，相比Vue 2的Options API，它提供了更灵活和组织性更好的代码结构。
Vue3新特性：
1.速度更快：重写了虚拟Dom实现，编译模板的优化，高效的组件初始化，undate性能提高
2.体积减少
3.更易维护：可与现有的Options API一起使用，可以和其他框架搭配使用，更好的Typescript支持
4.更接近原生：可以自定义渲染 API
5.更易使用：响应式Api暴露出来
9.组件化
组件化高内聚，可重用，可组合。大幅度提高开发效率，复用性等。降低更新范围，只重新渲染变化的组件。
需要注意：数据是响应式的，数据变化后会执行watcher或effect，重新更新。每个组件都有一个渲染函数watcher,effect。如果过分拆分组件会导致watcher,effect产生过多造成性能浪费。
10.响应式数据理解
用户取值和修改值都能知道。
数据变化时，对象通过defineReactive方法，使用object.definProperty将属性进行劫持，且只劫持已经存在属性。数组通过重写方法，多层对象通过递归实现劫持。
使用definProperty进行数据劫持，需要对属性进行重写添加getter及setter，造成性能差。 当新增和删除属性时，无法监控变化，需要通过delete 实现，增加负担。 数组不采用劫持，单独处理。 对ES6新产生的Map数据结构不支持。
就是对所有属性加入get set方法，进行重写，同时进行递归解决多层对象，不停的加入get set 方法，性能会比较差。
vu3 使用proxy 代理属性解决了vue2中的问题，使用时才会进行递归完成多层对象代理。
11.检测数组变化
数组进行重写，数组中包含对象也会进行劫持，通知视图更新。
缺陷无法对索引和长度是无法监控到的。
12.computed 和 watch区别
计算属性computed 内部都维护一个dirty属性。dirty:true 将拿到的值进行缓存起来，dirty：false。 再次取值时dirty：false，从缓存中取值。 当值发生改变，dirty变成true,触发页面更新，重新获取最新的计算属性。
watch监控数据变化，触发回调。
区别:
1.computed 支持缓存，只有依赖数据发生改变，才会重新进行计算.
2.computed 不支持异步，当computed内有异步操作时无效，无法监听数据的变化.
3.当一个数据受多个数据影响时，可以使用computed.计算props的值,计算vuex的state或者getters值的变化,本组件计算
1.watch不支持缓存，数据变会触发相应的操作；
2.watch支持异步；
3.watch监听的函数接收两个参数，第一个参数是最新的值；第二个参数是旧的值；
4.deep: 深度监听，当对象内部属性的值发生变化时，Vue会触发视图的重新渲染。
13.v-if 和 v-for
v-if和v-for不能在一起使用。
vue2
先解析v-for 在解析v-if ，导致先循环后对每一项进行判断，浪费性能。
不论条件是否满足都要循环，在进行判断。
v-for优先级高于v-if
所以v-if放入外层，v-for放入里层。
如果必须在循环中使用判断，使用过滤，在计算属性中使用。 如： computed:{
filterArr(){
return this.arr.filter(item=> item%2)
}
}
<div v-for="l in filterArr"></div>
vue3 v-if 高于v-for
