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

　　提到前端，大多数人都会想到薪资高。也正因为如此，很多人想要从事前端开发这个岗位，也由此衍生出来一个问题：为什么前端工程师供不应求，但还是有很多学前端的人找不到工作？

　　其实行业不是缺前端工程师，是缺优秀的前端工程师。

　　如果说以前只会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 且同时保存在单一的状态树中。