月薪80K前端大佬笔记学习vue的心得，网友：两个字“完美”！

旧城等待， 2022-03-02 15:48 222阅读 0赞

废话不多说了，我们开始吧！

# **首先介绍下，我是如何学习vue的，我学习vue之前，做过哪些思考？** #

1.vue技术刚出来的时候，我第一眼会问，vue是什么？这个框架要干嘛？

2.没有vue这个框架，我们之前是怎么做的，我们遇到了哪些糟心的问题？

3.怎么学习更有效呢，怎么快速掌握它，然后用它来干活？

![1240][]

当有了如上思考后，我们学习来就有的放矢，效率倍增了，比迷迷糊糊的学习要好至少10倍。大家先跟着我的思路走，最后可以自己总结，归纳，输出。

## 第一个问题：vue是什么？能做什么？ ##

官网介绍vue是一个渐进式框架。怎么理解这个渐进式框架呢，经过自己理解和在网上查阅资料，个人简单理解是，一，你可以把他作为一个js库使用，就和我们引入jquery一样，用里面的一些功能；二 你可以在构建新的项目时全部都是用这个框架提供的功能来构建。用场景说明更好理解

**场景1：**

如果你的技术团队技术选型比较保守，没有新技术的使用场景，比如让你去维护一个管理后台。管理后台，日常就是提交各种表单了，这部分现有的方案，比如form表单提交或者jquery收集信息ajax提交。这时候你可以把vue 当成一个js库来使用，就用来收集form表单，和表单验证。

**场景2：**

在场景1中，你尝到了甜头。心中暗爽，还可以这么玩嘞。独乐乐不如众乐乐和大家分享之后，团队开始接受使用vue，小规模推广起来。打怪升级该遇小boss啦，领导说，小伙后台做的越来越有效率了，来承担些常规业务开发，来正规军编制和其他小伙伴一起做新闻列表和新闻详情页吧。

在这个项目中，你跟大胆一点把 整个页面的dom 用Vue 来管理，你发现jquery 没什么用了，列表用v-for来循环，把评论抽成小组件了。 评论交互比较复杂，但是你的关注点把原来jquery dom操作变成了关注数据的变化，用数据驱动DOM的变化。

**场景3:**

经历了场景1 场景2，越来越受大家信赖，领导又找你了。你看新闻项目你做的不错，移动站也得重构了，你做个移动端m站吧，正好微信和App分享出去用到。这时候，你需要在做移动端webapp了。 于是你由去了解 webpack vue-router，你发现前端 可以控制路由了。webpack，可以用于前端开发的工程构建。

**场景4:**

场景3之后你在技术团队大放异彩，公司越来越器重你。年末领导又来找你了，小伙砸，想不想拿年终奖啊，想的话给我做个新闻直播间吧。需求特别简单：就是滚动播报新闻，用户实时参与评论。有了场景3和之前的经验，发现稍微有点力不从心了，你和后端的接口沟通上越来越频繁，新闻直播间需要大量的数据在组件中共享数据，后来你发现了，vuex 处理数据在组件之间的流动得心应手。

**场景5:**

年终奖，拿到手了，过年回来升职加薪。带了20人的前端团队，你的精力开始在配合公司其他部门做用户数据增长了。发现场景2中你犯了个错误，虽然整个页面用Vue 管理 开发起来很方便，但是页面白屏时间长，而且类似这样的底层页对seo都不好。开始考虑使用 vue2.0的SSR。为了保障团队高质量的输出，你开始研究如何给 vm写单测...

场景1-5 从最初的只因多看你一眼而用了前端js库，一直到最后的大型项目解决方案。

第二个问题：没有vue的时候，我们单页面两种方式 1.使用iframe加载页面片段 2.使用ajax请求页面片段。两者共同问题是 里面的js逻辑不好处理，id名字重复，代码写的不规范。vue 则没有这种问题

第三个问题：1.边理解，边写代码，边看效果，在继续理解，然后写笔记，输出自己的理解。

vue 大多数情况下是用来开发单页面应用程序，并不是说只能开发单页面应用程序。

**如果公司没有seo需求，都是可以使用vue进行系统构建。移动站点，后台管理系统特别适合用vue来开发。**

**[对web前端感兴趣的小伙伴也可以加 小编q 裙：][web_ _q]**

![1240 1][]

[1240]: /images/20220302/9ff00217002e462c83c9c75a67b6fcc9.png
[web_ _q]: https://www.jianshu.com/writer
[1240 1]: /images/20220302/2cb5e99a4ab14ecb994d031ba57cc303.png