您现在所在的位置:首页 >关于奇酷 > 行业动态 > 前端工程师凭什么这么值钱?

前端工程师凭什么这么值钱?

来源:奇酷教育 发表于:

前端工程师凭什么这么值钱?

  提到前端,大多数人都会想到薪资高。也正因为如此,很多人想要从事前端开发这个岗位,也由此衍生出来一个问题:为什么前端工程师供不应求,但还是有很多学前端的人找不到工作?
 
  其实行业不是缺前端工程师,是缺优秀的前端工程师。
 
  如果说以前只会HTML、CSS网页制作、简单的JS和jQuery,那找工作确实很容易而且待遇还不错。而现在随着前端的快速发展,各公司的要求不仅限于要快速实现效果和功能,也更追求整个项目的性能、优化及后期维护成本。这也就是为什么大多数人找不到工作的原因。
 
  和优秀的前端工程师差距在哪里
 
  很多人嘴里所说的(ma)前(tu)端(zai)是这样的:
 
  能拍图的拍图,绝不多写一行代码;
 
  网页布局和功能能在网上扒绝不自己写;
 
  只要看着展示效果没毛病,绝不考虑代码是否优雅,性能是否过得去。
 
  而优秀的前端工程师是什么样的?
 
  能用代码和icon实现的绝不拍图;
 
  会积累可复用功能性代码,封装自己的组件库甚至开发属于公司自己的内部专用框架等等;
 
  反复优化项目代码更新迭代提升代码可读性,降低项目维护成本,提升项目性能等等。
 
  学习前端,如果前面的基础没有掌握,后面的学习就会特别的困难。
 
  很多大佬都是从切图仔过来的,只是很多人通过不断的学习成为了大佬,然而有的切图仔还是切图仔,而有的人连图都没得切了。
 
  年薪30W的开发岗要求是什么?
 
  那什么样的开发才能拿到年薪30W的薪资呢?
 
  以薪资高,好入门的前端岗位为例,阿里云对应届生的要求是熟练掌握前端技术,熟悉前端框架,并具有相关项目经验:

 
  字节跳动对前端的要求也同样是技术,再加上前端工程化相关内容:
 
  一句话概括:技术、项目都要过硬才行。
 
  17个Vue知识点全都会
 
  荣耀黄金
 
  1. Vue的优点?Vue的缺点?
 
  优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开
 
  缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长
 
  2. 为什么说Vue是一个渐进式框架?
 
  渐进式:通俗点讲就是,你想用啥你就用啥,咱也不强求你。你想用component就用,不用也行,你想用vuex就用,不用也可以
 
  
 
  image.png
 
  3. Vue跟React的异同点?
 
  相同点:
 
  1.都使用了虚拟dom
 
  2.组件化开发
 
  3.都是单向数据流(父子组件之间,不建议子修改父传下来的数据)
 
  4.都支持服务端渲染
 
  不同点:
 
  1.React的JSX,Vue的template
 
  2.数据变化,React手动(setState),Vue自动(初始化已响应式处理,Object.defineProperty)
 
  3.React单向绑定,Vue双向绑定
 
  4.React的Redux,Vue的Vuex
 
  4. MVVM是什么?和MVC有何区别呢?
 
  MVC
 
  Model(模型):负责从数据库中取数据
 
  View(视图):负责展示数据的地方
 
  Controller(控制器):用户交互的地方,例如点击事件等等
 
  思想:Controller将Model的数据展示在View上

 
  image.png
 
  MVVM
 
  VM:也就是View-Model,做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。
 
  思想:实现了 View 和 Model 的自动同步,也就是当 Model 的属性改变时,我们不用再自己手动操作 Dom 元素,来改变 View 的显示,而是改变属性后该属性对应 View 层显示会自动改变(对应Vue数据驱动的思想)

 
  区别
 
  整体看来,MVVM 比 MVC 精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作 DOM 元素。因为在 MVVM 中,View 不知道 Model 的存在,Model 和 ViewModel 也观察不到 View,这种低耦合模式提高代码的可重用性
 
  Vue是不是MVVM框架?
 
  Vue是MVVM框架,但是不是严格符合MVVM,因为MVVM规定Model和View不能直接通信,而Vue的ref可以做到这点
 
  5. Vue和JQuery的区别在哪?为什么放弃JQuery用Vue?
 
  1.jQuery是直接操作DOM,Vue不直接操作DOM,Vue的数据与视图是分开的,Vue只需要操作数据即可
 
  2.jQuery的操作DOM行为是频繁的,而Vue利用虚拟DOM的技术,大大提高了更新DOM时的性能
 
  3.Vue中不倡导直接操作DOM,开发者只需要把大部分精力放在数据层面上
 
  4.Vue集成的一些库,大大提高开发效率,比如Vuex,Router等
 
  6. Vue的作者是谁?大声说出它的名字!!!
 
  他的名字就是:鱿鱼西
 
  永恒钻石
 
  7. 为什么data是个函数并且返回一个对象呢?
 
  data之所以只一个函数,是因为一个组件可能会多处调用,而每一次调用就会执行data函数并返回新的数据对象,这样,可以避免多处调用之间的数据污染。
 
  8. 使用过哪些Vue的修饰符呢?
 
  可以看我这篇文章「百毒不侵」面试官最喜欢问的13种Vue修饰符[1]

 
  截屏2021-07-11 下午9.56.53.png
 
  9. 使用过哪些Vue的内部指令呢?
  10. 组件之间的传值方式有哪些?
 
  父组件传值给子组件,子组件使用props进行接收
 
  子组件传值给父组件,子组件使用$emit+事件对父组件进行传值
 
  组件中可以使用$parent和$children获取到父组件实例和子组件实例,进而获取数据
 
  使用$attrs和$listeners,在对一些组件进行二次封装时可以方便传值,例如A->B->C
 
  使用$refs获取组件实例,进而获取数据
 
  使用Vuex进行状态管理
 
  使用eventBus进行跨组件触发事件,进而传递数据
 
  使用provide和inject,官方建议我们不要用这个,我在看ElementUI源码时发现大量使用
 
  使用浏览器本地缓存,例如localStorage
 
  11. 路由有哪些模式呢?又有什么不同呢?
 
  hash模式:通过#号后面的内容的更改,触发hashchange事件,实现路由切换
 
  history模式:通过pushState和replaceState切换url,触发popstate事件,实现路由切换,需要后端配合
 
  12. 如何设置动态class,动态style?
 
  动态class对象:
 
 
  动态class数组:
 
 
  动态style对象:
 
 
  动态style数组:
 
 
  13. v-if和v-show有何区别?
 
  1.v-if是通过控制dom元素的删除和生成来实现显隐,每一次显隐都会使组件重新跑一遍生命周期,因为显隐决定了组件的生成和销毁
 
  2.v-show是通过控制dom元素的css样式来实现显隐,不会销毁
 
  3.频繁或者大数量显隐使用v-show,否则使用v-if
 
  14. computed和watch有何区别?
 
  1.computed是依赖已有的变量来计算一个目标变量,大多数情况都是多个变量凑在一起计算出一个变量,并且computed具有缓存机制,依赖值不变的情况下其会直接读取缓存进行复用,computed不能进行异步操作
 
  2.watch是监听某一个变量的变化,并执行相应的回调函数,通常是一个变量的变化决定多个变量的变化,watch可以进行异步操作
 
  3.简单记就是:一般情况下computed是多对一,watch是一对多
 
  15. Vue的生命周期,讲一讲?

 
  16. 为什么v-if和v-for不建议用在同一标签?
 
  在Vue2中,v-for优先级是高于v-if的,咱们来看例子
 
  
 
  上面的写法是v-for和v-if同时存在,会先把7个元素都遍历出来,然后再一个个判断是否为3,并把3给隐藏掉,这样的坏处就是,渲染了无用的3节点,增加无用的dom操作,建议使用computed来解决这个问题:
 
  
 
  17. vuex的有哪些属性?用处是什么?
 
  
 
  image.png
 
  State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
 
  Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
 
  Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
 
  Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
 
  Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。