Vue 2.x脱坑记-查漏补缺
Q: 组件的通讯有哪几种啊!
基本最常用的是这三种;
- 父传子:
props - 子传父:
emit - 兄弟通讯:
event bus: 就是找一个中间组件来作为信息传递中介vuex: 信息树
传送门:
Q: 为什么我的 npm 或者 yarn 安装依赖会生成 lock文件,有什么用!
lock 文件的作用是统一版本号,这对团队协作有很大的作用;
若是没有 lock 锁定,根据package.json里面的^,~这些,
不同人,不同时间安装出来的版本号不一定一致;
有些包甚至有一些breaking change(破坏性的更新),造成开发很难顺利进行!
Q: 组件可以缓存么?
可以,用keep-alive;
不过是有代价的,占有内存会多了,所以无脑的缓存所有组件!别说性能好了,切换几次, 有些硬件 hold不住的,浏览器直接崩溃或者卡死,
所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换,
给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!
Q:Vue ,React, Angular学习哪个好?哪个工作比较好找!
Vue属于渐进式开发,传统开发过渡 MVVM 模式的小伙伴,Vue 比较好上手,学习成本比较低 基础比较好的,有折腾精神的,可以选择NG5或者React 16;
NG5需要学习typescript和rxjs,还用到比较多的新东西,比如装饰器,后端的注入概念.ng有自己的一整套 MVVM 流程;
而Vue和React核心只是view,可以搭配自己喜欢的
React的写法偏向函数式写法,还有 jsx,官方自己有 flow,当然也能搭配ts,我也没怎么接触,所以也有一定的学习成本;
至于哪个比较好找工作!告诉你,若是只会一个框架,那不是一个合格的前端;
人家要的是动手能力,解决能力!!技术和待遇是成正比的!!
颜值和背景,学历,口才可以加分,但是这些条件你必须要有的基础下才能考虑这些!
Q: 我有个复杂组件需要有新增和编辑的功能同时存在,但是字段要保持不变性怎么破
字段保持不变性怎么理解呢? 就是说比如新增和编辑同时共享一份 data;
有一种就是路由变了,组件渲染同一个(不引起组件的重新渲染和销毁!),但是功能却不同(新增和编译),
比如从编辑切到新增,data必须为空白没有赋值的,等待我们去赋值;
这时候有个东西就特别适合了,那就是immutable-js;
这个东西可以模拟数据的唯一性!或者叫做不变性!
Q:"首屏加载比较慢!!怎么破!打包文件文件比较大"
依次排除和确认:
- 减少第三方库的使用,比如
jquey这些都可以不要了,很少操作 dom,而且原生基本满足开发 - 若是引入
moment这些,webpack 排除国际化语言包 - webpack 常规压缩js,css, 愿意折腾的还可以引入 dll 这些
- 路由组件采用懒加载
- 加入路由过渡和加载等待效果,虽然不能解决根本,但起码让人等的舒心一点不是么!
整体下来,打包之后一般不会太大;
但是倘若想要更快?那就只能采用服务端渲染(SSR)了,可以避免浏览器去解析模板和指令这些; 直接返回一个 html ,.还能 SEO,
Vue你们如何做spa的模块懒加载呢
// 推荐这种写法 // 一来可以聚合webpackChunkName名字一样的为一个模块，也是当前版本推荐的加载姿势 const Home = () => import(/* webpackChunkName: "HomePage" */ "@/views/home/index.vue");
Q: Vue SPA 没法做优化(SEO)!有解决方案么
可以的,ssr(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html
现在 vue 的服务端开发框架有这么个比较流行,如下
传送门:Nuxt.js
也有官方的方案,ssr 完全指南
作者：CRPER
链接：https://juejin.im/post/59fa9257f265da43062a1b0e
