vue的优缺点
优点：
1.轻量级框架：只关注视图层
2.简单易学
3.双向数据绑定
4.组件化
5.视图，数据，结构分离
6.虚拟DOM
缺点：
1.不支持ie8
2.单页面，不利于seo优化
什么是SPA单页面，它的优缺点分别是什么
介绍：
1.仅在Web页面初始化时加载相应的html,css,js
2.加载完成，spa不会因为用户的操作而进行页面的重新加载或跳转
3.页面的变化是利用路由机制实现html内容的变换，避免页面的重新加载
优点
- 用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
- 减少了不必要的跳转和重复渲染，相对减轻了服务器的压力
- 前后端职责分离，前端交互逻辑，后端数据处理
缺点
- 初次加载耗时多
- 不能使用浏览器的前进后退功能，因为单页面在一个页面显示所有的内容
- 不利于搜素引擎检索，因为所有内容都在一个页面中动态替换显示
SPA首屏加载速度慢怎么解决
首屏加载时间： 指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；
原因：
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候，渲染内容堵塞了
优化方式：
- 减小入口文件积（路由懒加载）
- 静态资源本地缓存（前端合理利用localstorage）
- UI框架按需加载
- 图片资源的压缩（字体图标库，精灵图）
- 组件重复打包
- 开启GZip压缩
- 使用SSR
https://blog.csdn.net/weixin_44475093/article/details/110675962MVVM的理解
MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来；ViewModel 是一个同步View 和 Model的对象。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
vue数据双向绑定原理
实现MVVM的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter,getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调 。
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
vue组件的data为什么是一个函数？
简单讲：数据独立，互不影响
我们知道，Vue组件其实就是一个Vue实例。
JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。
Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。
使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身，就不会相互影响了。
而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
vue中data的属性可以和methods 中方法同名吗
可以同名，但会被data属性覆盖，控制台也会出现报错消息，，但不影响执行
原因： 源码定义的initState函数内部执行的顺序：props>methods>data>computed>watch
$nextTick
介绍：修改数据后用这个方法获取更新后的DOM
原因：vue实现响应式并不是数据发生变化后DOM立即变化，而是按一定策略进行DOM的更新
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
所以为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
使用场景：在你更新完数据后，需要及时操作渲染好的 DOM时
vue常用的指令
v-bind
v-model
v-show
v-if
v-for
v-on
vue自定义指令
方式一：全局指令
通过Vue.directive()函数注册一个全局指令
方式二：局部指令
通过组件的directives属性，对该组件添加一个局部的指令
v-show和v-if的异同点
相同点：都能控制元素的显示隐藏
不同点：
v-show：通过设置元素的display值控制元素的显示隐藏
v-if：动态添加或删除DOM元素
频繁切换用v-show更好
为什么避免v-if和v-for一起使用
vue2.x版本中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；
vue3.x版本中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。
官网明确指出：避免 v-if 和 v-for 一起使用，永远不要在一个元素上同时使用 v-if 和 v-for。
可以先对数据在计算数据中进行过滤，然后再进行遍历渲染；
vue的生命周期
| 生命周期 | 说明 |
| beforecreate | 创建前，创建了一个空的vue实例对象，data和methods还没有初始化 |
| created | 创建后，可以操作data数据和methods方法 |
| beforemount | 挂载前，模板编译好了，但还没挂载到浏览器页面上 |
| mounted | 挂载后，整个vue实例初始化完毕 |
| beforeUpdate | 更新前，数据更新了，页面还没有同步 |
| updated | 更新后，数据页面同步更新 |
| beforedestory | 销毁前，vue实例的data，methods等还可以用 |
| destroyed | 销毁后，组件完全销毁，组件的data，methods等不可用 |
页面第一次加载会触发哪些生命周期
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
vue组件通信方式
1、父传子：props
2、子传父：$emit
3、父子，兄弟，跨级：eventBus.js
4、vuex
router和route的区别
router：全局路由对象，里面有很多属性和子对象
route：当前路由信息，可以从里面获取name,path,params,query等
vue-router路由守卫（路由钩子函数）
1.全局路由
全局导航钩子主要有两种钩子：前置守卫(beforeEach)、后置钩子(afterEach)
2. 路由独享的钩子
单个路由独享的导航钩子，它是在路由配置上直接进行定义的
3.组件内的导航钩子
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
