Vue全家桶
# Vue全家桶
# 1.Vue基础
1.Vue的特点
2.MVVM
3.SPA
4.v-show和v-if的区别
5.key的作用
6.computed和method的区别
7.双向绑定和v-model的本质
8.data选项
9.data属性的更新,视图是否立刻同步执行重新渲染
10.sass是什么,在vue中如何安装和使用
11.vue配置跨域
12.v-if和v-for
13.keep-alive的了解
14.Vue插槽的作用和实际运用
# 2.Component组件
1.生命周期
2.组件通讯
# 3.Composition API
1.什么是Composition API和Options API
2.Composition API和Options API的区别
3.Vue3中setup函数的作用
4.ref和reactive的区别
ref可以包裹任意数据类型,reactive只能包裹复杂数据类型
ref返回ref对象,需要通过value属性获取值
reactive直接取就行
5.Composition API常见的函数和用法
6.watch和watchEffect的区别
7.Vue3中常见语法糖
# 4.Vue Router路由
1.两种路由模式
hash、history
2.路由跳转时如何传递数据
template中通过$route.params
created中通过this.$route.params
setup中通过vue-router提供的hook,useRoute()
3.什么时路由守卫?作用是什么?
作用:1.检查token判断用户是否登录
2.对用户权限进行判断
3.记录页面的某些信息,比如记录页面的滚动信息等
4.route和router的区别
route是路由信息对象,vue3总通过useRoute获取,包含各种属性
router是路由实例对象,包含各种方法
# 5.Vuex和Pinia状态管理
store
state
getters
actions
mutations
modules
Pinia没有mutations和modules
# 6.Vue其他问题
1.什么是虚拟DOM,什么是diff算法
模拟真实DOM的JS对象,使用JS操作就能实现DOM操作
diff算法通过同层的树节点进行比较的高校算法,深度优先,同层比较。精准定位变化前后的差异节点进行局部更新。
2.vue2和vue3响应性原理
Vue2用的数据劫持和发布订阅者模式
3.nextTick方法的实现原理
使用了Promise
4.Proxy与Object.defineProperty对比
defineProperty只能劫持对象属性,对于新增的属性需要重新进行劫持,否则新属性不具有响应性
Proxy直接代理对象,新属性依旧具有响应性
5.Vue SSR
SSR: 在服务端进行html的渲染并直接返回给客户端
好处:更好的SEO,更快的内容到达时间(首屏加载更快)
坏处:服务器负载更大
6.Vue项目优化
代码层面优化:v-if和v-show区分使用
computed和watch区分使用
v-for必须添加key
长列表性能优化
打包层面优化:webpack对图片进行压缩
减少ES6转为ES5的冗余代码
其它优化:
7.Vue首屏加载优化
把不常改变的库放到index.html中,并使用CDN提速
Vue路由懒加载,Vue组件不要全局引入
使用轻量级工具库
减少首页的资源请求数,减少资源的大小
避免使用大图,图片使用懒加载
8.Vue3中Proxy替代defineProperty的原因
defineProperty劫持的是对象属性,无法对新属性自动的进行响应式。Proxy是劫持整个对象。
# 7.Axios网络请求库
基于Promise的AJAX库