![js中有["1","2","3","4"]这样一个string，怎么把它变成array](/aiimages/js%E4%B8%AD%E6%9C%89%5B%26quot%3B1%26quot%3B%2C%26quot%3B2%26quot%3B%2C%26quot%3B3%26quot%3B%2C%26quot%3B4%26quot%3B%5D%E8%BF%99%E6%A0%B7%E4%B8%80%E4%B8%AAstring%EF%BC%8C%E6%80%8E%E4%B9%88%E6%8A%8A%E5%AE%83%E5%8F%98%E6%88%90array.png)
很多同学在面试的时候都会被问到vue的虚拟DOM的diff 以及 patch 的过程，如果这vue的源码了解不是很深刻，很难通过面试官的法眼，下面就来用通俗易懂的方式聊一聊Vue的patch过程。
我们都知道Dom操作是一个特别低性能的事儿，因为每一个dom节点中都包含了各种各样的属性及方法，每一次操作dom都是这些属性及方法一遍一遍的初始化，数量一多就特别的慢。
But，
状态的改变必须要对应视图的改变，就必须要操作到Dom
So,
越少的Dom操作就能越多的提升性能
这就是虚拟Dom能够带来的最大的好处。
但是，虚拟Dom是如何做到最少的去做Dom操作呢？
其实很简单，当状态变化时，只要更新对应变化的节点，而其他没有变化的节点，则不进行操作，这样就能最大限度的减少Dom操作。
而在Vue1.0的时候，是通过细粒度绑定来进行这项优化的，因为Vue在一定程度上是知道具体哪些状态发生了变化，也知道哪些节点使用了这个节点，这样就可以通过细粒度绑定直接更新视图。
但是这样也有副作用，粒度太细的话，会有更多的内存及依赖追踪的开销，这也是特别消耗性能的事儿。
那么，改为中粒度，当状态发生变化，通知到组件界别，而用一个对象（Vnode）去描述即将渲染的节点，一一对应，这样每次更新组件节点前，先对比新旧的两个（newVnode, oldVnode），找出需要改变的节点位置，然后单独更新这些节点，就能实现上述的功能。
这个对象就是Vnode。
Vnode其实就是一个普通的js对象，里面包含了描述节点内容的属性
在Vnode中有多种不同的节点类型：
不同的节点类型只是包含的属性值不一样而已，如一个 注释类型 的节点，对应的Vnode可能就是以下：
一个 文本节点 ，可能是以下：
我们明白了Vnode是真实Dom的描述对象，那么就能通过一个算法来计算出新旧Vnode之间的差异。
这个算法，我们就称之为patching算法。
我们冷静分析，对Dom进行操作，主要是需要做以下3件事儿：
4.1 新增节点
通常在组件初次渲染时，会发生新增节点，当oldVnode不存在，而newVnode存在时，这时只需要按照Vnode的描述去渲染视图即可。
具体的渲染过程可参考下图：
4.2 删除节点
当一个节点只在oldVnode中存在，而在newVnode中不存在时，这时我们要将改节点删除。这样就完成了变更视图的工作。
在删除节点中用到了一个nodeOps的对象，里面有一个removeVnodes的函数，主要用于对节点进行删除操作。
4.3 更新节点
前面两种情况都是比较简单，也很好理解
但是最常见是是 更新节点的 情况
具体流程如下图：
其中更新子节点也是 一个递归的过程。
我们下次再讲更新子节点。
在我们日常开发项目时，基本上会采用官方脚手架进行开发。然后使用官方脚手架开发也有缺点：不能很好的自定义一些功能。下面我将总结出来我是如何从零开始搭建前端工程的，希望对大家有所帮助。
基于tsc 编译
基于babel 编译
babel 的配置文件
建议： webpack 在业务中开发推荐使用babel 编译。 编辑js库使用tsc编译。
基本参数
严格检查
**
额外检查
**
模块解析检查
**
sourcemap检查
**
**
试验选项
**
试验选项
tsconfig.json 的基本配置
ts配置文件梳理完毕。
配置生效方式一：(修改vscode 配置)
方式二：给每个单独的工程增加配置文件
注意： 这里只是简单的列举了下需要的东西，和一个够用的配置。如果要按照具体需求配置的话，需要查看文档。
使用 git cz 命令：可以很方便的操作。
执行脚本：
major：升级主要版本
minor: 升级次要版本
patch：升级补丁版本
你是否在github上见过这样的release文档
操作步骤：
就可以得到上面好看的文档了。
结束！！！！
