vue是什么
Vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建但也应用的Web应用框架。
Vue核心特性
数据驱动（MVVM）
mvvm表示（Model-View-ViewModel）
Model：模型层，负责将处理业务逻辑以及和服务器端进行交互
View：视图层，负责将数据模型转为UI界面，简单理解为html页面
ViewModel：视图模型层，连接Model和View，是Model和View之间的通信桥梁，把Model中的数据映射到view，监听View的事件，反过来更新Model
组件化
Vue中每一个.vue文件都可以视为一个组件
- 降低系统耦合度，保持接口不变的情况下，替换不同的组件快速完成需求
- 调试方便，可以直接移除组件找问题
- 提高可维护性，组件职责单一可被复用，所以对代码进行优化可获得系统的整体升级
指令系统
指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 条件渲染指令
v-if - 列表渲染指令
v-for - 属性绑定指令
v-bind - 事件绑定指令
v-on - 双向数据绑定指令
v-model
SPA（单页面应用）
SPA是通过动态重写当前页面来与用户交互，避免页面之间的切换打断用户体验。单页面应用中，根据需要动态的装载适当的资源并且添加到页面，页面在任何事件都不会重新加载，也不会将控制转移到其他的页面。
SPA和MPA的区别
MPA是一个多页面应用程序，每个页面都是一个主页面，都是独立的。当我们访问另一个页面的时候，都需要重新加载，html，css，js，公共文件就按需加载
| 单页面应用（SPA） | 多页面应用（MPA） | |
|---|---|---|
| 组成 | 一个主页面和多个页面片段 | 多个主页面 |
| 刷新方式 | 局部刷新 | 整页刷新 |
| url模式 | 哈希模式 | 历史模式 |
| SEO搜索引擎优化 | 难实现，可使用SSR方式改善 | 容易实现 |
| 数据传递 | 容易 | 通过url、cookie、localStorage等传递 |
| 页面切换 | 速度快，用户体验良好 | 切换加载资源，速度慢，用户体验差 |
| 维护成本 | 相对容易 | 相对复杂 |
单页面应用
优点：
- 具有桌面应用的即时性、网站的可移植性和可访问性
- 用户体验好、快，内容的改变不需要重新加载整个页面
- 良好的前后端分离，分工更明确
缺点：
- 不利于搜索引擎的抓取
- 首次渲染速度相对较慢
SEO问题
-
title和h1有什么区别？title 是搜索引擎判断页面主题的核心字段，会直接显示在搜索结果中；
h1 是页面的主标题，更多服务于用户阅读，同时辅助搜索引擎理解内容结构。
-
SPA（Vue/React）怎么做 SEO
SPA 要做 SEO 通常采用 SSR 或预渲染，让搜索引擎在首屏就能拿到完整 HTML 内容。
SSR，服务端直接返回完整 HTML
预渲染，构建时生成静态 HTML
-
alt属性有啥用？alt 属性用于描述图片内容，提升图片搜索和无障碍访问，对 SEO 有辅助作用，但不应关键词堆砌。
-
页面加载速度对 SEO 有影响吗？
搜索引擎是**用户导向,**页面慢 → 跳出率高 → 排名下降
v-show和v-if的区别，使用场景
v-if 是"真正的条件渲染"，v-show 是"样式切换显示"
v-show与v-if的区别
控制手段：v-show隐藏是为该元素添加css样式display: none,dom元素依旧在。v-if显示隐藏是将dom元素整个添加或删除
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁或重建内部的事件监听和子组件，v-show只是简单的基于CSS切换
编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染.
v-show不会触发组件的生命周期。而v-if会触发组建的生命周期钩子
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
v-show与v-if的使用场景
v-if与v-show都能控制dom元素在页面的显示
v-if相比v-show开销更大的（直接操作dom节点增加与删除）
如果需要非常频繁地切换，则使用v-show较好
如果在运行时条件很少改变，则使用v-if较好
Vue实例挂载的过程
Vue实例挂载的过程=初始化→ 编译模板 → 生成 render → 创建虚拟 DOM → 真实 DOM → 挂载完成
第1步：new Vue
Vue内部第一件事是合并options，初始化：data，methods，computed，watch，建立响应式
但此时DOM还没动，页面还没有变化
第2步：beforeCreate 生命周期
data、methods 都还没初始化
第 3 步：created 生命周期
此时data响应式，methods已经挂载，computed/watch已经就绪，但是DOM仍然不存在，不能访问
第 4 步：判断是否需要挂载
第 5 步：模板编译（Template → Render）
Vue 不能直接执行 template， 必须 把 template 变成 render 函数，这个过程是模板编译
第 6 步：beforeMount 生命周期
render准备完成，patch即将执行（patch = 把虚拟 DOM（VNode）变成真实 DOM，或对已有 DOM 做最小修改的过程），虚拟DOM已经创建。
patch只做两件事，
1.第一次渲染，没有旧 DOM，直接创建 DOM
2.数据更新，有旧的，有新的，对比差异后，最少修改 DOM
第 7 步：执行 render → patch → mounted
得到真实的DOM，可以操作 DOM，可以拿到真实尺寸