手写 Vue3 响应式系统：核心就一个数据结构
响应式是 Vue 的特色，如果你简历里写了 Vue 项目，那基本都会问响应式实现原理。
而且不只是 Vue，状态管理库 Mobx 也是基于响应式实现的。
那响应式是具体怎么实现的呢？
与其空谈原理，不如让我们来手写一个简易版吧。
响应式
首先，什么是响应式呢？
响应式就是被观察的数据变化的时候做一系列联动处理。
就像一个 社会 热点事件，当它有消息更新的时候，各方媒体都会跟进做相关报道。
这里 社会 热点事件就是被观察的目标。
那在前端框架里，这个被观察的目标是什么呢？
很明显，是状态。
状态一般是多个，会通过对象的方式来组织。所以，我们观察状态对象的每个 key 的变化，联动做一系列处理就可以了。
我们要维护这样的数据结构：
图片
状态对象的每个 key 都有关联的一系列 effect 副作用函数，也就是变化的时候联动执行的逻辑，通过 Set 来组织。
每个 key 都是这样关联了一系列 effect 函数，那多个 key 就可以放到一个 Map 里维护。
这个 Map 是在对象存在的时候它就存在，对象销毁的时候它也要跟着销毁。（因为对象都没了自然也不需要维护每个 key 关联的 effect 了）
而 WeakMap 正好就有这样的特性，WeakMap 的 key 必须是一个对象，value 可以是任意数据，key 的对象销毁的时候，value 也会销毁。
所以，响应式的 Map 会用 WeakMap 来保存，key 为原对象。
这个数据结构就是响应式的核心数据结构了。
比如这样的状态对象：
const obj = {
a: 1,
b: 2
}
它的响应式数据结构就是这样的：
const depsMap = new Map();
const aDeps = new Set();
depsMap.set('a', aDeps);
const bDeps = new Set();
depsMap.set('b', bDeps);
const reactiveMap = new WeakMap()
reactiveMap.set(obj, depsMap);
创建出的数据结构就是图中的那个：
图片
图片
然后添加 deps 依赖，比如一个函数依赖了 a，那就要添加到 a 的 deps 集合里：
effect(() = {
console.log(obj.a);
});
也就是这样：
const depsMap = reactiveMap.get(obj);
const aDeps = depsMap.get('a');
aDeps.add(该函数);
这样维护 deps 功能上没啥问题，但是难道要让用户手动添加 deps 么？
那不但会侵入业务代码，而且还容易遗漏。
所以肯定不会让用户手动维护 deps，而是要做自动的依赖收集。
那怎么自动收集依赖呢？
读取状态值的时候，就建立了和该状态的依赖关系，所以很容易想到可以代理状态的 get 来实现。
通过 Object.defineProperty 或者 Proxy 都可以：
const data = {
a: 1,
b: 2
}
let activeEffect
function effect(fn) {
activeEffect = fn
fn()
}
const reactiveMap = new WeakMap()
const obj = new Proxy(data, {
get(targetObj, key) {
let depsMap = reactiveMap.get(targetObj)；
if (!depsMap) {
reactiveMap.set(targetObj, (depsMap = new Map()))
}
let deps = depsMap.get(key)
if (!deps) {
depsMap.set(key, (deps = new Set()))
}
deps.add(activeEffect)
return targetObj[key]
}
})
effect 会执行传入的回调函数 fn，当你在 fn 里读取 obj.a 的时候，就会触发 get，会拿到对象的响应式的 Map，从里面取出 a 对应的 deps 集合，往里面添加当前的 effect 函数。
这样就完成了一次依赖收集。
当你修改 obj.a 的时候，要通知所有的 deps，所以还要代理 set：
set(targetObj, key, newVal) {
targetObj[key] = newVal
const depsMap = reactiveMap.get(targetObj)
if (!depsMap) return
const effects = depsMap.get(key)
effects effects.forEach(fn = fn())
}
基本的响应式完成了，我们测试一下：
图片
打印了两次，第一次是 1，第二次是 3。
effect 会先执行一次传入的回调函数，触发 get 来收集依赖，这时候打印的 obj.a 是 1
然后当 obj.a 赋值为 3 后，会触发 set，执行收集的依赖，这时候打印 obj.a 是 3
依赖也正确收集到了：
图片
结果是对的，我们完成了基本的响应式！
当然，响应式不会只有这么点代码的，我们现在的实现还不完善，还有一些问题。
比如，如果代码里有分支切换，上次执行会依赖 obj.b 下次执行又不依赖了，这时候是不是就有了无效的依赖？
这样一段代码：
const obj = {
a: 1,
b: 2
}
effect(() = {
console.log(obj.a ? obj.b : 'nothing');
});
obj.a = undefined;
obj.b = 3;
第一次执行 effect 函数，obj.a 是 1，这时候会走到第一个分支，又依赖了 obj.b。
把 obj.a 修改为 undefined，触发 set，执行所有的依赖函数，这时候走到分支二，不再依赖 obj.b。
把 obj.b 修改为 3，按理说这时候没有依赖 b 的函数了，我们执行试一下：
图片
第一次打印 2 是对的，也就是走到了第一个分支，打印 obj.b
第二次打印 nothing 也是对的，这时候走到第二个分支。
但是第三次打印 nothing 就不对了，因为这时候 obj.b 已经没有依赖函数了，但是还是打印了。
打印看下 deps，会发现 obj.b 的 deps 没有清除
图片
所以解决方案就是每次添加依赖前清空下上次的 deps。
怎么清空某个函数关联的所有 deps 呢？
记录下就好了。
我们改造下现有的 effect 函数：
let activeEffect
function effect(fn) {
activeEffect = fn
fn()
}
记录下这个 effect 函数被放到了哪些 deps 集合里。也就是：
let activeEffect
function effect(fn) {
const effectFn = () = {
activeEffect = effectFn
fn()
}
effectFn.deps = []
effectFn()
}
对之前的 fn 包一层，在函数上添加个 deps 数组来记录被添加到哪些依赖集合里。
get 收集依赖的时候，也记录一份到这里：
图片
这样下次再执行这个 effect 函数的时候，就可以把这个 effect 函数从上次添加到的依赖集合里删掉：
图片
cleanup 实现如下：
function cleanup(effectFn) {
for (let i = 0; i effectFn.deps.length; i++) {
const deps = effectFn.deps[i]
deps.delete(effectFn)
}
effectFn.deps.length = 0
}
effectFn.deps 数组记录了被添加到的 deps 集合，从中删掉自己。
全删完之后就把上次记录的 deps 数组置空。
我们再来测试下：
图片
无限循环打印了，什么鬼？
问题出现在这里：
图片
set 的时候会执行所有的当前 key 的 deps 集合里的 effect 函数。
而我们执行 effect 函数之前会把它从之前的 deps 集合中清掉：
图片
执行的时候又被添加到了 deps 集合。
这样 delete 又 add，delete 又 add，所以就无限循环了。
解决的方式就是创建第二个 Set，只用于遍历：
图片
这样就不会无限循环了。
再测试一次：
图片
现在当 obj.a 赋值为 undefined 之后，再次执行 effect 函数，obj.b 的 deps 集合就被清空了，所以需改 obj.b 也不会打印啥。
看下现在的响应式数据结构：
图片
确实，b 的 deps 集合被清空了。
那现在的响应式实现是完善的了么？
也不是，还有一个问题：
如果 effect 嵌套了，那依赖还能正确的收集么？
首先讲下为什么要支持 effect 嵌套，因为组件是可以嵌套的，而且组件里会写 effect，那也就是 effect 嵌套了，所以必须支持嵌套。
我们嵌套下试试：
effect(() = {
console.log('effect1');
effect(() = {
console.log('effect2');
obj.b;
});
obj.a;
});
obj.a = 3;
按理说会打印一次 effect1、一次 effect2，这是最开始的那次执行。
然后 obj.a 修改为 3 后，会触发一次 effect1 的打印，执行内层 effect，又触发一次 effect2 的打印。
也就是会打印 effect1、effect2、effect1、effect2。
我们测试下：
图片
打印了 effect1、effet2 这是对的，但第三次打印的是 effect2，这说明 obj.a 修改后并没有执行外层函数，而是执行的内层函数。
为什么呢？
看下这段代码：
图片
我们执行 effect 的时候，会把它赋值给一个全局变量 activeEffect，然后后面收集依赖就用的这个。
当嵌套 effect 的时候，内层函数执行后会修改 activeEffect 这样收集到的依赖就不对了。
怎么办呢？
嵌套的话加一个栈来记录 effect 不就行了？
也就是这样：
图片
执行 effect 函数前把当前 effectFn 入栈，执行完以后出栈，修改 activeEffect 为栈顶的 effectFn。
这样就保证了收集到的依赖是正确的。
这种思想的应用还是很多的，需要保存和恢复上下文的时候，都是这样加一个栈。
我们再测试一下：
图片
现在的打印就对了。
至此，我们的响应式系统就算比较完善了。
全部代码如下：
const data = {
a: 1,
b: 2
}
let activeEffect
const effectStack = [];
function effect(fn) {
const effectFn = () = {
cleanup(effectFn)
activeEffect = effectFn
effectStack.push(effectFn);
fn()
effectStack.pop();
activeEffect = effectStack[effectStack.length - 1];
}
effectFn.deps = []
effectFn()
}
function cleanup(effectFn) {
for (let i = 0; i effectFn.deps.length; i++) {
const deps = effectFn.deps[i]
deps.delete(effectFn)
}
effectFn.deps.length = 0
}
const reactiveMap = new WeakMap()
const obj = new Proxy(data, {
get(targetObj, key) {
let depsMap = reactiveMap.get(targetObj)
if (!depsMap) {
reactiveMap.set(targetObj, (depsMap = new Map()))
}
let deps = depsMap.get(key)
if (!deps) {
depsMap.set(key, (deps = new Set()))
}
deps.add(activeEffect)
activeEffect.deps.push(deps);
return targetObj[key]
},
set(targetObj, key, newVal) {
targetObj[key] = newVal
const depsMap = reactiveMap.get(targetObj)
if (!depsMap) return
const effects = depsMap.get(key)
// effects effects.forEach(fn = fn())
const effectsToRun = new Set(effects);
effectsToRun.forEach(effectFn = effectFn());
}
})
总结
响应式就是数据变化的时候做一系列联动的处理。
核心是这样一个数据结构：
图片
最外层是 WeakMap，key 为对象，value 为响应式的 Map。这样当对象销毁时，Map 也会销毁。
Map 里保存了每个 key 的依赖集合，用 Set 组织。
我们通过 Proxy 来完成自动的依赖收集，也就是添加 effect 到对应 key 的 deps 的集合里。set 的时候触发所有的 effect 函数执行。
这就是基本的响应式系统。
但是还不够完善，每次执行 effect 前要从上次添加到的 deps 集合中删掉它，然后重新收集依赖。这样可以避免因为分支切换产生的无效依赖。
并且执行 deps 中的 effect 前要创建一个新的 Set 来执行，避免 add、delete 循环起来。
此外，为了支持嵌套 effect，需要在执行 effect 之前把它推到栈里，然后执行完出栈。
解决了这几个问题之后，就是一个完善的 Vue 响应式系统了。
当然，现在虽然功能是完善的，但是没有实现 computed、watch 等功能，之后再实现。
最后，再来看一下这个数据结构，理解了它就理解了 vue 响应式的核心：
图片
Vue3.0 响应式原理
Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：
1、reactive:
接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理
创建拦截器对象 handler, 设置 get/set/deleteProperty
get
收集依赖（track）
返回当前 key 的值。
如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty
如果当前的 key 的值不是对象，则返回当前 key 的值
set
设置的新值和老值不相等时，更新为新值，并触发更新（trigger）
deleteProperty
当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）
返回 Proxy 对象
2、effect: 接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖
3、track:
接收两个参数：target 和 key
如果没有 activeEffect，则说明没有创建 effect 依赖
如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性，
WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
depsMap 中有 key 属性，则添加这个 activeEffect
4、trigger:
判断 WeakMap 中是否有 target 属性
WeakMap 中没有 target 属性，则没有 target 相应的依赖
WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()
vue渐进式，响应式，组件化，就是优点吗？
是啊，渐进式是说明它可以承担项目的部分开发，也可以承担项目的总体开发，就是使用起来比较灵活。响应式就是不需要引入ui组件，自带了响应式的功能，会更便捷。组件化就是能把功能封装成组件，方便以后的维护。
我是这么理解的，如有不当还望大佬们指正。
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件
很多呀。VB，JAVA，.NET 都是数据库开发的！没数据库的程序都是些小的小程序。玩玩而已！
vue2数据响应式原理
vue2响应式原理由 Observer 类， Dep 类和 Watcher 类互相调用实现， Observer 类是把一个普通的object类变成每一层都能相应的类， Dep 类的作用是添加，移除，通知和收集订阅者， Watcher 类是订阅者，主要功能是把当数据改变的时候，去调用回调函数，修改dom节点
那么是怎么实现响应式的呢，首先是一个函数，要先转换为可响应的，那就需要用到 Observer 类
这个 observe 函数就是对 Observer 类做多了一层封装
而 Observer 类是通过 Object.defineProperty 来监控数据的获取和改变的
关键在于 defineReactive 方法，这个方法是对 Object.defineProperty 做了一层封装，并且对对象的每一层做递归调用，实现了每一层都有响应监控
但是是怎么知道现在要保存哪一个 Watcher 实例到订阅者数组里面的呢？其实就是用了这个 Dep.target ， Dep.target 相当于 window.target ，全局只有一个，全局也能访问
首先得先讲一讲 Watcher 类，我们先回到上面的index.js，对象要让 Watcher 类进行监听，而 Watcher 有3个参数，第一个是监听的对象，第二个是监听的属性，比如 a.b.c.d ，第三个是属性改变后触发的回调函数
先来讲一下 parsePath ，这个在工具类里，作用是访问 a.b.c.d 这种链式属性
首先是触发了 Watcher 的 get() 方法，把当前实例保存在了 Dep.target 里面
然后在调用 parsePath 获取属性值的过程中，会挨个访问响应对象的属性，就会触发相应的 getter ，我们回到 defineReactive.js ，可以发现这时候相应属性的 getter 就会把 Dep.target 也就是相应的 Watcher 的实例保存在了 Dep 类的订阅者数组里面
最后，在改变属性的时候，相应属性的 setter 就会通知之前已经保存的订阅者数组，遍历触发回调
Web前端工程师的入门指南-教你如何成为一名web前端开发工程师
今天小编要跟大家分享的文章是关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师。经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何？
大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。
1、首先确定你的目标或道路
我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：
·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。
·你想以自由开发人员的身份来开始自己的业务或代理。
·你可以成为其他公司的顾问。
·你可以创建自己的应用来赚钱。
·编码是你的业余爱好。
从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。
2、Web开发的基本工具和软件
·
计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。
·文本编辑器/
IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime
Text或Atom。如果我们谈论IDE，那么是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。
·
Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。
·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper这些都是可以使用的选项。
·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe
XD，Photoshop，Sketch或Figma。
3、从HTML和CSS开始
HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。
·HTML5(语义元素，属性，文档类型等)
·CSS基础知识颜色，字体，位置，盒子模型等。
·CSSGrid和Flexbox对齐内容或创建列。
·CSS自定义属性
4、响应式布局
您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。
·了解如何设置视口
·媒体查询不同的屏幕尺寸。
·流体宽度
·雷姆单位
·移动优先
5、自定义可重用CSS组件
与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。
6、CSS框架
学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。
·Tailwind
CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。
·物化
·布尔玛
7、前端必须语言：JavaScript
学习HTML和CSS之后，接下来需要学习的是Vanilla
Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题
·JavaScript基础知识(变量，数据类型，函数，条件等)
·DOM(文档对象模型)
·JSON(JavaScript对象表示法)
·提取API(请求/响应/Ajax)
·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。
8、一些重要工具
Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。
·
Git(版本控制)和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。
·
了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。
·大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual
Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。
·Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。
·
学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库(例如React)，那么这些软件包管理器将使用很多，但是对于其他语言(例如Python或Php)，您将使用不同的软件包管理器。
·
如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。
9、基本部署
此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。
·域注册(Namecheap，Google等)
·托管托管(InMotion，Hostgator，Bluehost等)
·静态主机(Netlify，Github页面)
·SSL证书。
·FTP，SFTP(文件传输协议)非常适合小型应用程序。
·SSH(安全外壳)，用于高级应用程序。
·CLI和Git。
到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。
10、前端框架和状态管理
框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。
·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Redux和
ContextAPI与Hooks一起使用以进行状态管理。
·Vue：
Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。
·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习
TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。
可选学习：
·
如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。
·
了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。
·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)
我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。
11、服务器端语言(选择一种)
您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项...
·NodeJS(不是语言，而是运行时环境)
·Python(非常适合初学者)
·Java(适合大型组织)
·Php(适合自由职业)
·Ruby(2020年少两极)
·C#
·Go
注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。
12、服务器端框架(选择一项)
一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、数据库(选择一项)
大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。
·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·云数据库：Firebase，AzureCouldDB，AWS
·轻量级和缓存：Redis，SQLlite，NeDB
在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL
：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。
14、CMS：内容管理
您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。
·
传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)
·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。
在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。
·SSH(安全外壳)
·Web服务器环境：NGINX，Apache
·应用程序托管：Linode，Heroku，AWS，Azure，Now。
·虚拟化：Docker，Vagrant
·测试：单元，功能，集成等
·负载平衡，监视，安全性。
以上所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。
以上就是小编今天为大家分享的关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师的文章，希望本篇文章能够对正在从事web前端工作的小伙伴和正在学习web前端知识的伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师！
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)