Vue总结
对vue的理解
- vue是一个用于创建用户界面的开源的javascript框架 也是一个创建单页面应用的web应用框架
- vue的核心特性
- vue和react对比
- 相同点
- 都是组件化思想
- 都支持服务端渲染
- 都有虚拟DOM
- 数据驱动试图
- 都支持native方案
- 都有自己的构建工具
- 不同点
- react是单向数据流， vue是双向数据流
- react使用不可变的数据 vue使用可变的数据
- 组件化通信方式不同
- diff算法不同 vue是双向指针 边对比 边更新DOM
v-show和v-if的区别和使用场景
- 区别：v-show: 隐藏的时候为元素添加display:none; DOM元素依然存在。v-if隐藏将DOM元素删除
- 使用场景：需要频繁切换的话用v-show否则用v-if
vue的生命周期
- beforeCreate: 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
- created: 组件初始化完毕，各种数据可以使用， 常用于异步数据的获取
- beforeMount:未执行渲染，更新， dom未创建
- mounted:DOM已创建，可用于访问数据和dom元素
- beforeUpdate:更新前，用于获取更新前的状态
- updated: 更新后， 所有状态已是最新
- beforeDestroy: 销毁前，可用于一些定时器或取消订阅
- destroyed:组件已销毁
首屏加载速度慢如何解决
- 加载慢的原因：
- 网络延迟问题
- 资源文件体积是否过大
- 资源是否重复发请求加载了
- 加载脚本的时候，渲染内容堵塞了
- 解决方案
- 减小入口体积:使用路由懒加载，以函数的形式加载路由
- 静态资源本地缓存：利用localStorage
- UI框架按需加载
- 图片资源压缩：使用在线字体图标或者雪碧图
- 组件重复打包:配置webpack的config中的minChunks设置
- 开启GZip压缩：webpack plugin插件
- 使用SSR：服务端渲染，组件或页面通过服务器生成html字符串，再发送给浏览器
对nextTick的理解
- 定义： 在下次DOM更新循环结束之后执行延迟回调, 在修改数据之后立即使用这个方法，获取更新后的DOM
- Vue在更新DOM时是异步执行，当数据发生变化，vue将开启一个异步更新队列， 视图需要等队列中所有数据变化完成后，再统一进行更新
- 使用场景：如果想在修改数据后立刻得到更新后的DOM结构，可以用Vue.nextTick()
Vue3
- vue3的新特性
- 速度更快
- 体积减少
- 更容易维护
- 更接近原生
- 更易使用
- TypeScript支持
