本文是2022年来前端开发人员自求职过程中最新面试题系列的第三篇，主要包括函数组件和类组件、for in和for of、react与vue、react更新机制、BFC及其优缺点、SPA单页面、盒模型、前端登录流程、Http与Https协议区别、vue中购物车实现原理、常见的git状态。

下面开始挨个过一遍。

51、说一下for…in 和 for…of的区别?

for...of遍历获取的是对象的键值, for...in获取的是对象的键名;
for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;
对于数组的遍历,for...in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for...of只返回数组的下标对应的属性值;
总结：for...in循环主要是为了遍历对象而生,不适用遍历数组; for....of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象
复制代码

52、说一下类组件和函数组件的区别?

1. 语法上的区别：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。

2. 调用方式

函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

3. 状态管理

函数式组件没有状态管理，类组件有状态管理。

4. 使用场景

类组件没有具体的要求。函数式组件一般是用在大型项目中来分割大组件（函数式组件不用创建实例，所有更高效），一般情况下能用函数式组件就不用类组件，提升效率。
复制代码

53、说一下react的更新机制

54、说一下redux 里面有什么

55、说一下react和vue框架的区别

56、说一下proxy  它有什么优点

57、说一下vue3.0你了解多少?

 <!-- 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty -->
 <!-- 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他
    是组件内使用Composition API 的入口 -->
 <!-- 模板语法变化slot具名插槽语法 自定义指令 v-model 升级 -->
 <!-- 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件
     针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。 -->
复制代码

58、说一下bfc bfc有什么优缺点

59、说一下你对盒模型的理解?

CSS3中的盒模型有以下两种:标准盒模型、IE盒模型
盒模型都是由四个部分组成的,分别是margin、border、padding和content
标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同
1、标准盒模型的width和height属性的范围只包含了content
2、IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型；
1、box-sizing：content-box表示标准盒模型（默认值）
2、box-sizing：border-box表示IE盒模型（怪异盒模型）
复制代码

60、说一下SPA单页面有什么优缺点？

优点：

1.体验好，不刷新，减少 请求  数据ajax异步获取 页面流程；

2.前后端分离

3.减轻服务端压力

4.共用一套后端程序代码，适配多端

缺点：

1.首屏加载过慢；

2.SEO 不利于搜索引擎抓取
复制代码

61、说一下前端登录的流程?

初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从Vuex中把token的值存入浏览器Cookies中。把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页，有就跳转到相应的页面，我们应该再每次发送post/get请求的时候应该加入token，常用方法再项目utils/service.js中添加全局拦截器，将token的值放入请求头中 后端判断请求头中有无token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息

62、说一下前端权限管理怎么实现

63、说一下购物车的逻辑?

//vue中购物车逻辑的实现
1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性

2. 在vuex中state中添加一个数据 cartList 用来保存这个数组

3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中

4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象

5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart  this.$store.commit("addToCart", {id:  , count：})

// js中购物车逻辑的实现
1.商品页点击“加入购物车”按钮，触发事件

2.事件调用购物车“增加商品”的Js程序（函数、对象方法）

3.向Js程序传递传递“商品id”、“商品数量”等数据

4.存储“商品id”、“商品数量”到浏览器的localStorage中

**展示购物车中的商品******

1.打开购物车页面

2.从localStorage中取出“商品Id”、“商品数量”等信息。

3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）

4.将获得的商品信息显示在购物车页面。

**完成购物车中商品的购买******

1.用户对购物车中的商品完成购买流程，产生购物订单

2.清除localStorage中存储的已经购买的商品信息

备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。

备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。
复制代码

64、说一下HTTP和HTTPS协议的区别?

1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全
复制代码

65、说一下常见的HTTP状态码?说一下状态码是302和304是什么意思？你在项目中出现过么？你是怎么解决的？

    <!-- 状态码：由3位数字组成，第一个数字定义了响应的类别 -->
    <!-- 1xx：指示消息,表示请求已接收，继续处理 -->
    <!-- 2xx：成功,表示请求已被成功接收，处理 -->
    <!-- 200 OK：客户端请求成功
         204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。
         206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容
 -->
    <!-- 3xx 重定向 -->
    <!-- 301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。
         302 Found：临时重定向，表示请求的资源临时搬到了其他位置
         303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问
         307 Temporary Redirect：临时重定向，和302有着相同含义。POST不会变成GET
         304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。返回304时，不包含任何响应主体。虽然304被划分在3XX，但和重定向一毛钱关系都没有
 -->
    <!-- 4xx：客户端错误 -->
    <!-- 400 Bad Request：客户端请求有语法错误，服务器无法理解。
         401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
         403 Forbidden：服务器收到请求，但是拒绝提供服务
         404 Not Found：请求资源不存在。比如，输入了错误的url
         415 Unsupported media type：不支持的媒体类型
 -->
    <!-- 5xx：服务器端错误，服务器未能实现合法的请求。 -->
    <!-- 500 Internal Server Error：服务器发生不可预期的错误。
         503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，
 -->
复制代码

66、说一下常见的git操作

git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看远程所有分支
git commit -am "init" 提交并且加注释 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示远程库origin里的资源 
git push origin master:develop
git push origin master:hb-dev 将本地库与服务器上的库进行关联 
git checkout --track origin/dev 切换到远程dev分支
git branch -D master develop 删除本地库develop
git checkout -b dev 建立一个新的本地分支dev
git merge origin/dev 将分支dev与当前分支进行合并
git checkout dev 切换到本地dev分支
git remote show 查看远程库
git add .
git rm 文件名(包括路径) 从git中删除指定文件
git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来
git config --list 看所有用户
git ls-files 看已经被提交的
git rm [file name] 删除一个文件
git commit -a 提交当前repos的所有的改变
git add [file name] 添加一个文件到git index
git commit -v 当你用－v参数的时候可以看commit的差异
git commit -m "This is the message describing the commit" 添加commit信息
git commit -a -a是代表add，把所有的change加到git index里然后再commit
git commit -a -v 一般提交命令
git log 看你commit的日志
git diff 查看尚未暂存的更新
git rm a.a 移除文件(从暂存区和工作区中删除)
git rm --cached a.a 移除文件(只从暂存区中删除)
git commit -m "remove" 移除文件(从Git中删除)
git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)
git diff --cached 或 $ git diff --staged 查看尚未提交的更新
git stash push 将文件给push到一个临时空间中
git stash pop 将文件从临时空间pop下来

//  我是cv的自取吧

限于篇幅，有些前端面试题没有提供答案，如果有答案的可以评论区贴出来共勉。

本篇标志本系列完结，这些都是2022年开年以来前端工程师在实际找工作面试或者笔试遇到的技术问题，也是用人单位最看重的你必须过硬的吃饭的家伙，大家务必牢牢掌握，争取早日拿到offer。

如有新的题目也欢迎留言分享，让更多的人看见。

第一篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（一）

第二篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（二）

致敬作者：villay
链接：juejin.cn/post/7073869980411887652
来源：稀土掘金

求职找工作的金三银四已经过去了快一半，收疫情和整个大房间的影响，目前工作的竞争压力非常大。尤其对于人数众多的初级工程师来说，竞争尤为激烈，这里总结了2022年以来来自一线的各位求职者遇到的实际的前端面试和笔试题目，而且附带案例和代码，希望有助于大家查缺补漏，明确方向，提高自身竞争力，让自己脱颖而出，顺利拿到offer。

因为内容比较多，而且会不定期更新追加，所以暂时会分为三篇，本文是第一篇，主要包含，vue中的双向数据绑定原理、语法糖、哈希、浅拷贝和深拷贝、以及常问常新的原型和原型链、闭包、Promise、New、Set\Map、localStorage，sessionStorage，cookies区别、Vuex等，废话不多说，直接上题目和答案。

1、什么是原型什么是原型链?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Person () {

    }
    var person  = new Person();
    person.name = 'Kevin';
    console.log(person.name) // Kevin

    // prototype
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person1 = new Person();
    var person2 = new Person();
    console.log(person1.name)// Kevin
    console.log(person2.name)// Kevin

    // __proto__
    function Person () {

    }
    var person = new Person();
    console.log(person.__proto__ === Person.prototype) // true

    //constructor
    function Person() {

    }
    console.log(Person === Person.prototype.constructor) // true

    //综上所述
    function Person () {

    }
    var person = new Person()
    console.log(person.__proto__ == Person.prototype) // true
    console.log(Person.prototype.constructor == Person) // true
    //顺便学习一下ES5得方法,可以获得对象得原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) // true

    //实例与原型
    function Person () {

    }
    Person.prototype.name = 'Kevin';
    var person = new Person();
    person.name = 'Daisy';
    console.log(person.name) // Daisy
    delete person.name;
    console.log(person.name) // Kevin

    //原型得原型
    var obj = new Object();
    obj.name = 'Kevin',
    console.log(obj.name) //Kevin

     //原型链
     console.log(Object.prototype.__proto__ === null) //true
     // null 表示"没用对象" 即该处不应该有值

     // 补充
     function Person() {

     }
     var person = new Person()
     console.log(person.constructor === Person) // true
     //当获取person.constructor时，其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型
     //也就是Person.prototype中读取时,正好原型中有该属性,所以
     person.constructor === Person.prototype.constructor

     //__proto__
     //其次是__proto__，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它
     // 是来自与Object.prototype,与其说是一个属性，不如说是一个getter/setter,当使用obj.__proto__时，可以理解成返回了
     // Object.getPrototypeOf(obj)
     总结：
     
     1、当一个对象查找属性和方法时会从自身查找,如果查找不到则会通过__proto__指向被实例化的构造函数的prototype

     2、隐式原型也是一个对象,是指向我们构造函数的原型

     3、除了最顶层的Object对象没有__proto_，其他所有的对象都有__proto__,这是隐式原型

     4、隐式原型__proto__的作用是让对象通过它来一直往上查找属性或方法，直到找到最顶层的Object的__proto__属性，它的值是null,这个查找的过程就是原型链



</script>
</html>
复制代码

2、箭头函数和普通函数有什么区别?

（1）箭头函数比普通函数更加简洁
    如果没有参数，就直接写一个空括号即可
    如果只有一个参数，可以省去参数括号
    如果有多个参数，用逗号分割
    如果函数体的返回值只有一句，可以省略大括号
    如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常用的就是调用一个函数：
    let fn = () => void doesNotReturn()
    
 (2) 箭头函数没有自己的this
 箭头函数不会创建自己的this,所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中的this的指向在它在定义时一家确定了，之后不会改变。
 
（3）箭头函数继承来的this指向永远不会改变

 (4) call()、apply()、bind()等方法不能改变箭头函数中的this指向 
 
 (5) 箭头函数不能作为构造函数使用
 
 (6) 箭头函数没有自己的arguments
 
 (7) 箭头函数没有prototype
 
 (8) 箭头函数不能用作Generator函数,不能使用yeild关键字
复制代码

3、New操作符做了什么事情?

1、首先创建了一个新对象
2、设置原型，将对象的原型设置为函数的prototype对象
3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）
4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象

4、vue实现双向数据绑定原理是什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <!-- 引入vue文件 -->
    <div id="box">
      <new-input v-bind:name.sync="name"></new-input>
      {{name}}
      <!-- 小胡子语法 -->
      <input type="text" v-model="name" />
    </div>
    <script>
      Vue.component("new-input", {
        props: ["name"],
        data: function () {
          return {
            newName: this.name,
          };
        },
        template: `<label><input type="text" @keyup="changgeName"
        v-model="newName" /> 你的名字：</label>`,
        // 模板字符串
        methods: {
          changgeName: function () {
            this.$emit("update:name", this.newName);
          },
        },
        watch: {
          name: function (v) {
            this.newName = v;
          },
        },
        //    监听
      });

      new Vue({
        el: "#box",
        //挂载实例
        data: {
          name: "nick",
        },
        //赋初始值
      });
    </script>
  </body>
</html>

复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" v-mode="msg" />
    <p v-mode="msg"></p>
    <script>
      const data = {
        msg: "你好",
      };
      const input = document.querySelector("input");
      const p = document.querySelector("p");
      input.value = data.msg;
      p.innerHTML = data.msg;
      //视图变数据跟着变
      input.addEventListener("input", function () {
        data.msg = input.value;
      });
      //数据变视图变
      let temp = data.msg;
      Object.defineProperty(data, "msg", {
        get() {
          return temp;
        },
        set(value) {
          temp = value;
          //视图修改
          input.value = temp;
          p.innerHTML = temp;
        },
      });
      data.msg = "小李";
    </script>
  </body>
</html>

5、v-model语法糖是怎么实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- v-model 只是语法糖而已 -->
    <!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 -->
    <!-- text和textarea 元素使用value property 和 input事件 -->
    <!-- checkbox 和radio使用checked  property 和 change事件-->
    <!-- select 字段将value 作为prop 并将change 作为事件 -->
    <!-- 注意：对于需要使用输入法(如中文、日文、韩文等)的语言，你将会发现v-model不会再输入法
    组合文字过程中得到更新 -->
    <!-- 再普通标签上 -->
    <input v-model="sth" />  //这一行等于下一行
    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />
    <!-- 再组件上 -->
    <currency-input v-model="price"></currentcy-input>
        <!--上行代码是下行的语法糖
         <currency-input :value="price" @input="price = arguments[0]"></currency-input>
        --> 
        <!-- 子组件定义 -->
        Vue.component('currency-input', {
         template: `
          <span>
           <input
            ref="input"
            :value="value"
            @input="$emit('input', $event.target.value)"
           >
          </span>
         `,
         props: ['value'],
        })   
</body>
</html>

6、什么是闭包，闭包的作用是什么

当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。
闭包作用：
局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
复制代码

7、Promise是什么?

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保存初始化状态
  var self = this;

  // 初始化状态
  this.state = PENDING;

  // 用于保存 resolve 或者 rejected 传入的值
  this.value = null;

  // 用于保存 resolve 的回调函数
  this.resolvedCallbacks = [];

  // 用于保存 reject 的回调函数
  this.rejectedCallbacks = [];

  // 状态转变为 resolved 方法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变
    if (value instanceof MyPromise) {
      return value.then(resolve, reject);
    }

    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变，
      if (self.state === PENDING) {
        // 修改状态
        self.state = RESOLVED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.resolvedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 状态转变为 rejected 方法
  function reject(value) {
    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变
      if (self.state === PENDING) {
        // 修改状态
        self.state = REJECTED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.rejectedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 将两个方法传入函数执行
  try {
    fn(resolve, reject);
  } catch (e) {
    // 遇到错误时，捕获错误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function"
      ? onResolved
      : function(value) {
          return value;
        };

  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function(error) {
          throw error;
        };

  // 如果是等待状态，则将函数加入对应列表中
  if (this.state === PENDING) {
    this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

  // 如果状态已经凝固，则直接执行对应状态的函数

  if (this.state === RESOLVED) {
    onResolved(this.value);
  }

  if (this.state === REJECTED) {
    onRejected(this.value);
  }
};
复制代码

8、Set 和 Map有什么区别？

1、Map是键值对，Set是值得集合，当然键和值可以是任何得值
2、Map可以通过get方法获取值，而set不能因为它只有值
3、都能通过迭代器进行for...of 遍历
4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储
复制代码

9、map和foreach有什么区别

foreach()方法会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型
map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值：
复制代码

10、localStorage  sessionStorage  cookies 有什么区别?

localStorage:以键值对的方式存储 储存时间没有限制 永不生效 除非自己删除记录
sessionStorage：当页面关闭后被清理与其他相比不能同源窗口共享 是会话级别的存储方式
cookies 数据不能超过4k 同时因为每次http请求都会携带cookie 所有cookie只适合保存很小的数据 如会话标识
复制代码

11、Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?

有五种，分别是 State、 Getter、Mutation 、Action、 Module
1、state => 基本数据(数据源存放地)
2、getters => 从基本数据派生出来的数据
3、mutations => 提交更改数据的方法，同步
4、actions => 像一个装饰器，包裹mutations，使之可以异步。
5、modules => 模块化Vuex

1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。
2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
复制代码

12、Loader和Plugin 有什么区别

Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到`loader`。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

其他的下篇更新，收藏网址鸭。

第二篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（二）

第三篇：2022年最新前端面试题，来自这几个月找工作面试和笔试前线，附问题和答案代码，初级前端工程师求职必备（三）

程序开发语言基本都是国外发明的，但是我们在互联网应用上比国外要热闹一点。作为一个新兴的领域，程序员在国内外都是一个很普遍的职业，那我们和国外，尤其是中美程序员对比，有什么区别呢？

下面来自一位横跨太平洋工作的资深程序员的亲身经历分享，作为大家茶余饭后的谈资乐呵乐呵一下。

1.发量和年龄 

我国公司：

• 我国就很明显了，程序员几乎成为了青春饭。员工平均年龄在30岁以下。35岁焦虑弥漫整个职场，虽然目前收到重视，但情况仍未好转。那么年纪大程序员的都去哪里了呢？有人转岗、有人转行、有人继续在开发岗位，极少数在管理层。希望社会对35的中年人宽容点吧

美国公司：

• 同事里20多到70多岁的都有，众数是三四十的中年人，大部分工作目标都是为了早日退休，攒够钱就随时办退休party。也有些纯粹因为热爱工作、热爱写代码选择不退休的。
• 我们组的核心成员之一，是位72岁的老头，他每天4点多起床到公司写一会儿代码，等天全亮就戴上头盔去骑山地车锻炼，9点多回公司继续工作。对这老头印象深刻，是因为他逻辑清晰、思路锐利，他是code review小组的成员，经常在邮件里破口大骂其他人写的代码写得有多烂，被投诉，只好在邮件里道歉，过几天继续骂，在我工作的两年里一直循环。
• 我的另一位资深同事，是位68岁的架构师，热爱工作，每天都乐呵呵的，对我这种新毕业生也很友好，有人问他什么时候退休，他回答说他死的那天。

还有一个被大家津津乐道的话题就是程序员的发量，据说技术行不行，就看头发多还是少？哈哈

 2. 加班

美国公司：

• 从没加过班，晚上发版除外（会默认第二天调休）。
• 经常正开着会，时间到了5点半，产品打断领导说到点了他要回去喂狗（他是一个50岁的不婚族，养了一院子狗），然后就散会下班了。
• 加班需要申请，有次我申请工作日晚上加班，没批准只好回家了。因为加班费会比较高，需要从项目预算走，领导控制预算不给批。
• 偶尔周末去办公室取东西，几层停车场只有两三辆车。

我国公司：

• 996是常事了，据说还是福宝。
• 印象比较深的是我司之前有个清华本科+美国硕士的小伙子，每天7点半准时下班，结果试用期被辞退了，原因是工作态度不积极，据说后来还和公司打了官司，不知输赢。

3. 代码质量谁的高 

我国公司：

• 国内互联网节奏会要快得多，讲究小步快跑，就几天的开发时间，不管三七二十一先上线再说，刚开始我都惊呆了。讲究先有再好，只要能上就先上。

美国公司：

• 项目在前期花的时间是最多的，比如说需求分析、架构讨论、技术讨论。
• 写代码会考虑得比较长远，比较有时间去考虑开发原则、维护成本，领导也会乐意去安排版本来解决技术债务。

 4.工作环境和公司文化

美国公司：

• 老美的公司确实比较尊重员工，在员工关怀上做得比较好。我可以感受到，和领导职位不同，但是我们人格是平等的，彼此尊重。
• 记得有一次发版前几天，组里程序员说他压力太大，领导给他假期让他放松调整，版本被延迟上线。
• 美国有family first的文化。有个老印同事，家里老人身体不好，公司同意他回印度工作照顾家人，远程跨国工作。经常有同事因为要看孩子比赛请假。领导自己也会偶尔周五请假，因为要去和女儿一起参加学校的公益活动。
• 对差异性接受度也比较高。同事有变性人、残疾人，大家相处得都很好。

我国公司：

• 领导高高在上，官威很大。请个假，和求他借钱似的，组长还提醒我让我请假原因不要写“旅游”不然可能会不给批假。
• 记得有个需求，大家都认为不合理没必要，我去找领导沟通，刚提了一句还没展开，领导直接甩脸色“你是领导还是我是领导”。
• 有个同事因为耿直，和领导不和，被各种排挤冷暴力，逼他自己辞职拒给赔偿金。
• 开个线上事故复盘会，做root cause分析，就像要把人钉在耻辱柱一样，我不理解这对解决问题有什么帮助。

其实硬件环境上中美已经差别不大，我们甚至还略胜，但是软件和文化等方面我们还有进步的空间。

 4.工资

美国：

如果汇率不换算的话，国外的软件工程师薪资在10万美元~30万美元不等，与国内的薪资在数字上相差不大（考虑消费水平）。

AI工程师，月薪60k~140k。

软件工程师，月薪69k~183k。

数据科学家，月薪43k~131k。

前端工程师，月薪82k~122k。

我国公司：

国内的薪资水平对应的大公司薪资又是如何的呢？根据拉勾网的岗位薪资数据（截至2020年9月11日），字节、滴滴、大疆以及商汤的薪酬（月薪）大致如下：

字节跳动：

基础架构工程师：30k~60k；

软件工程师（iOS、android）：30k~60k；

数据科学家：30k~60k；

前端工程师：15~50k；

滴滴：

AI工程师（自动驾驶）：30k~60k，15薪；

软件开发工程师：30k~60k；

数据科学家：20k~100k；

前端工程师：30k~70k；

大疆：

机器学习算法工程师（智能驾驶方向）：25k~50k；

前端工程师：12k~40k，部分岗位15薪；

后台开发工程师：15k~25k；

信息安全专家：40k~70k，15薪；

商汤：

前端架构师：35k~60k，15薪；

高级系统开发工程师：30k~70k；

前端开发工程师：15k~35k，15薪；

后端开发工程师：20k~40k，15薪；

事实上，如果汇率不换算的话，国外的软件工程师薪资在10万美元~30万美元不等，与国内的薪资在数字上相差不大（考虑消费水平）。

而国外机器学习工程师相关的年薪，则在11万~21万美元之间，数字上甚至会比国内的普遍更低。所以整体上工资体验相差不大，但分具体的工种。

以上的对比，仅仅是一个大牛个人经历的对比，基本上符合大家认知中的国内外区别，但我们也在不断改变，希望短板可以尽快补齐，终有一天我们会和外国程序员面对面坐着喝咖啡或者喝茶。

当前对每个人最重要的是开心工作、保持健康，保住头发、护住绿码。

一年之计在于春，正所谓金三银四，过完年是求职高峰期，也是企业招人高峰期。前端开发工程师看过来，2021年阿里巴巴集团淘宝网最新前端开发面试题来了，想去淘宝的赶紧收藏行动起来。

第一部分：淘宝网 HTML & CSS 面试题 
1 .Doctype 严格模式与混杂模式，如何可触发这两种模式，区分它们有何意义？ 
2 ．行内元素有哪些？块级元素有哪些？ CSS 的盒模型？ 
3 . CSS 引入的方式有哪些 link 和@import 有什么区别？
4 . CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联样式和imortant哪个优先级高？ 
5 ．前端页面有哪三层构成，分别是什么？作用剥十么？ 
6 . CSS的基本语句构成是？ 
7 ．你做的页面在哪些浏览器测试过？
     这些浏览器的内核分别是什么？
     经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？ 
8 ．如何居中一个浮动元素？ 
9 ．有没有关注 HTML5 和 CSS3？如有请简单说－些您对它们的了解情况！ 
10 ．你怎么来实现下面这个设计图，主要讲述思路（效果图省络） 
11 ．如果让你来制作－个访问量很高的大型网站，你会如何来管理所有 CSS 文件、 JS 与图片？ 
12 ．你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

第二部分： 淘宝网Javascript 面试题 
1 . js 到十么，js和 html的开发如何结合？ 
2 ．怎样添加、移除、移动、复制、创建和查找节点？

以上是淘宝网的前端面试题的汇总，技术性面试中，一定要把自己的技术实力体现出来，表达出来，会的要好好讲，不会的就大胆的说不会，不要不懂装懂，班门弄斧，同时要体现自己愿意学习的态度和能力。

希望大家新年找工作顺利！

随着年关将近，2020十大人口净流入城市名单出炉，从排行版上看，前十分别是对42个重点城市的人口净流入情况中人口净流入最多的前10个城市分别是：上海、深圳、北京、东莞、广州、天津、佛山、苏州、宁波和杭州。

按经济圈统计，其中粤港澳大湾区（珠三角）4个，长三角4个，京津冀2个，按南北地理来分，南方城市8个，北方城市2个，南方完胜北方。

而此前一度热议的中国经济前十的榜单中，南方9城几乎霸榜，北方城市仅剩北京一席进入前十，天津创纪录的跌落前十。

同时，最近南方省份浙江，江西和湖南频频爆出限电使用，南方部分地区用电吃紧的情况，国家发改委也做出回应，工业生产高速增长和低温寒流叠加导致电力需求超预期高速增长。目前为止电力供应保持平稳有序，居民生活用电未受影响。国家发改委已会同相关部门企业，采取措施切实保障电力需求，确保电力供应总体平稳有序。

以上接连几个热搜，似乎关联不大，但细细琢磨，其实经济情况依然分晓，用电情况，不管是居民居家用电还是工业生产用电，这都是以人存在为前提，只有人口较为密集的地方才有较大的可能出现这种情况，所以南方用电吃紧也从侧面进一步验证了经济的活跃性南方显然是大于北方。

作为2020年各大城市的重头戏，抢人大戏也到年末晒成绩的时候了。先有深圳真金白银给补贴开始抢人，后有杭州、西安，武汉、成都等城市陆续跟进，最后上海也下海抢人，放松了之前高高在上的落户门槛，名校以及特殊技能人才可直接申请上海户口，广州也升级抢人大战，宣布除了主城四个区，其他区的落户条件进一步降低，购房资格也进一步降低，28岁以下的中专毕业人口一年社保即可落户，目的很明显，抢的就是年轻人。

而这一些列的操作成效也很明显，在人口流入方面，这些城市表现不俗。

相关数据统计显示珠三角人口密度最高

珠三角的东莞和广州分列四、五位，两市的人口净流入都超过了570万人。目前，净流入人口超过500万的也就四个一线城市和东莞。

值得注意的是，在人口净流入前五名的城市中，有3个来自珠三角地区，分别是深圳、东莞和广州。此外，珠江西岸的佛山净流入人口也超过了350万人，位居全国第七，可见珠三角对外来人口的吸引力。

根据国家卫健委此前发布的《中国流动人口发展报告2018》，2016年珠三角城市群常住人口达到了5998.5万，常住人口密度为1033人/平方公里，是全国平均人口密度的7倍多，也是全国人口密度最高的地区。2016年，珠三角净流入人口为2647.97万人，占常住人口的44.14%。

广东省统计局发布的2019年广东人口发展状况分析指出，2019年，广东省常住人口数量继续居全国首位，占全国人口总量的8.23%，比上年提高0.1个百分点，人口密度为全国的4.40倍。“全面两孩”政策实施持续发挥作用，人口流动进一步大城市化和都市圈化，数量庞大的外来人口以及相对较高的自然增长率减缓了老龄化进程。

长三角也有4个城市净流入数量位居前十，分别是榜首的上海，以及分列八到十位的苏州、宁波和杭州。后三个城市的人口净流入规模要小一些，合计为737万人，还不及一个深圳的规模。

从净流入人口占常住人口的比重即净流入比来看，有9个城市超过了30%，分别是东莞、深圳、中山、佛山、上海、厦门、广州、北京和苏州，主要来自三大经济区以及闽南三角洲。其中，珠三角地区就占了五席，且前四名均来自珠三角。东莞和深圳两市的净流入比更是超过了50%，分别为70.34%和59.02%，外来人口明显超过了户籍人口，呈现出典型的倒挂现象。

对东莞、深圳等地来说，加快推进外来人口市民化是这些城市发展的一大要务。在这一过程中，除了降低落户门槛外，加快医疗、教育等公共服务补短板是重中之重。比如从每万人拥有卫生机构的床位数来看，东莞仅为37.1张，深圳这一数字也仅为38.1张，跟武汉、成都、重庆、杭州、郑州、长沙等城市相比均有非常大的差距。

彭澎认为，过去很长一段时间，一个城市医院的床位数、执业医师数量都是按照户籍人口的数量来定编的。尽管这几年沿海城市也逐渐在按常住人口来配备医疗资源，但总体来看，一些外来常住人口很多的城市，配备的医疗资源还是不够，仍需要加快补短板。

厦门大学经济学系副教授丁长发对第一财经记者分析，长三角和珠三角等发达地区都有大量的外来人口，当前这些地方常住人口城镇化率都已经很高了，接下来最重要的是要提高城镇化的质量。尤其是这些地方有相当多外来常住人口没有户籍，没有享受基本公共服务产品的供给。但教育、医疗、养老、住房等公共配套投入都是需要钱的，因此需要财权、事权对称。

人口是第一大资源，代表的是现在，更是未来。

前端入门容易难，薪资低，如果要涨薪水，还得有过硬的技术积累和充分的笔试面试准备才能过关斩将，废话不多说，直接上干货

基础篇

基础篇

1、css只在当前组件起作用

2、v-if 和 v-show 区别

3、$route和$router的区别

4、vue.js的两个核心是什么？

5、vue几种常用的指令

6、vue常用的修饰符？

7、v-on 可以绑定多个方法吗？

8、vue中 key 值的作用？

9、什么是vue的计算属性？

10、vue等单页面应用及其优缺点

11、怎么定义 vue-router 的动态路由? 怎么获取传过来的值

12、watch和computed差异

13、组件中data为什么是函数

扩展篇

14、对于MVVM的理解？

15、VUE生命周期的几个阶段

16、什么是vue生命周期？

17、vue生命周期的作用是什么？

18、第一次页面加载会触发哪几个钩子？

19、DOM 渲染在 哪个周期中就已经完成？

20、VUE实现数据双向绑定的原理

21、VUE组件间的参数传递

22、VUE的路由实现：hash模式和history模式

23、VUEX是什么？怎么使用？哪种功能场景使用它？

24、对keep-alive的理解

25、虚拟DOM的优缺点？

26、vue的watch的深度使用

27、vue与react的选择

28、vuex中mutation和action的详细区别

29、vue-router中导航守卫有哪些

30、简述vue中diff算法原理

有了基础还不够，本次针对Vue专门

Vue专题

1. 谈谈对Vue的认识

vue的语法很简单,很容易上手,可以说就是对着模板来填充内容.想要动态绑定的数据,那么就在data中填充内容.想要具体的method,那么就在methods属性中填充内容.想要显示变量就用双花括号.可以说是很简单了.

vue使用的是MVVM模式,并且使用简单的命令加数据来进行DOM操作,让我避开了进行繁杂的获取,创建和删除DOM元素的操作.

借助vue的vue-router插件,可以很方便的实现单页面应用的搭建.并且可以实现浏览器中的回退效果.

vue的组件化开发可以说很方便的就实现了组件的复用.之前想要写复用组件的时候,一方面要写重复的html,另一方面把对应的CSS文件和JS文件独立开来,需要的时候进行引入.但是vue把三者放在同一个文件中,可以说非常的贴心,修改也很方便.

2. Vue组件中，在生命周期的哪个阶段，可以开始访问操作DOM?

什么阶段才能调用DOM

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

什么阶段能发起请求

• 可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
• 但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
  • 能更快获取到服务端数据，减少页面loading 时间；
  • ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

3.父组件与子组件在销毁过程中怎么执行生命周期钩子函数？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父组件更新过程

父 beforeUpdate -> 父 updated

• 子组件销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

• 父组件销毁过程

父 beforeDestroy -> 父 destroyed

4.计算属性(computed)与观察钩子函数(watch)之间的区别

1. 计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。
2. 侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

5.v-show与v-if有什么区别

两个都是让元素不可见。但是两个选项有区别

1. v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
2. v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

6.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单点说，方便父子组件及组件之间的数据传递。
有 5 种，分别是 state、getter、mutation、action、module

vuex 的 store 是什么？
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性。

vuex 的 getter 是什么？
getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。

vuex 的 mutation 是什么？
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说，前面两个都是状态值本身，mutations才是改变状态的执行者。
注意：mutations只能是同步地更改状态。

vuex 的 action 是什么？
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中。

vuex 的 module 是什么？
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

7.r o u t e r 和 router和router和route的区别

this.r o u t e r 是 V u e R o u t e r 的 实 例 方 法 ， 当 导 航 到 不 同 u r l ， 可 以 使 用 t h i s . router是VueRouter的实例方法，当导航到不同url，可以使用this.router是VueRouter的实例方法，当导航到不同url，可以使用this.router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。

r o u t e 是 route是route是router跳转到的当前一个对象，里面包含该对象的path、query、name 、params

this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。

8.Vue和React的区别

区别

监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
• React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而React更强调数据的不可变。所以应该说没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒。

Vue中默认是支持双向绑定的。在Vue1.0中我们可以实现两种双向绑定：

• 父子组件之间，props 可以双向绑定
• 组件与DOM之间可以通过 v-model 双向绑定

在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
所以现在我们只有 组件 <–> DOM 之间的双向绑定这一种。

然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。

不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。

HoC (高阶组件) 和 mixins

在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）。

React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC，关于mixin究竟哪里不好，可以参考React官方的这篇文章 Mixins Considered Harmful

而 Vue 一直是使用 mixin 来实现的。

为什么 Vue 不采用 HoC 的方式来实现呢？

高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

但是Vue就不行了，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个高阶组件，那么这个被包装的组件就无法正常工作了。

组件通信的区别

在Vue 中有三种方式可以实现组件通信：

• 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信
• 子组件通过 事件 向父组件发送消息
• 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。

另外有一些比如访问 parent/parent/parent/children等比较dirty的方式这里就不讲了。

在 React 中，也有对应的三种方式：

• 父组件通过 props 可以向子组件传递数据或者回调
• 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

可以看到，React 本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

模板渲染方式的不同

在表层上， 模板的语法不同

• React 是通过JSX渲染模板
• 而Vue是通过一种拓展的HTML语法进行渲染

但其实这只是表面现象，毕竟React并不必须依赖JSX。
在深层上，模板的原理不同，这才是他们的本质区别：

• React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
• Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

对这一点，我个人比较喜欢React的做法，因为他更加纯粹更加原生，而Vue的做法显得有些独特，会把HTML弄得很乱。举个例子，说明React的好处：

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。但是在Vue中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

Vuex 和 Redux 的区别

从表面上来说，store 注入和使用方式有一些区别。

在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：

• 使用 dispatch 和 commit 提交更新
• 通过 mapState 或者直接通过 this.$store 来读取数据

在 Redux 中，我们每一个组件都需要显示的用 connect 把需要的 props 和 dispatch 连接起来。

另外 Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

• Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
• Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）

而这两点的区别，其实也是因为 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用 Vue 的感觉。

各自优点

React

1. React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减少DOM交互。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减少了重复代码，这也是它为什么比传统数据绑定更简单。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

vue

1. 性能高效
2. 双向数据绑定
3. 学习难度低，上手简单。

React 的缺陷

1. React 只是一个视图库，而不是一个完整的框架。
2. 对于 Web 开发初学者来说，有一个学习曲线。
3. 将 React 集成到传统的 MVC 框架中需要一些额外的配置。
4. 代码复杂性随着内联模板和 JSX 的增加而增加。
5. 如果有太多的小组件可能增加项目的庞大和复杂。

9.Vue3了解吗？

在Vue 3中，你的API的使用将不是简单的通过导入Vue实例来使用这个API，每个全局API将会以exports的形式单独导出

基于Proxy的响应：在Vue 3中已经不再采用这种定义的方式，改用ES6中提供的Proxy这个API实现数据响应的功能。

新的组件渲染模式：在Vue 3中重新定义了渲染的模式，在重新渲染时不会重新渲染没有发生改变的组件，只会重新渲染发生改变的组件

在Vue 3.0中摈弃了2x中使用options创建组件的方式，改用Composition Api

10. vue的生命周期

4个阶段，8个生命周期函数

组件创建时（creating):beforeCreate created

模板渲染时（mounting）:beforeMount mounted

数据更新时（updating）:beforeUpdate updated

组件卸载时（destorying）:beforeDestory destoryed

– 创建期间的生命周期函数：
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
– 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
– 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

11. 导航钩子有哪些,他们有哪些参数？（导航守卫相关）

关于路由的生命周期函数（Vue-router)

主要分为两种：全局式 局部式

全局钩子函数：

beforeEach:所有路由切换时开始调用，最先执行

afterEach:每次路由切换离开时调用

局部钩子函数：

beforeEnter

局部单个组件：

beforeRouterEnter

beforeRouterUpdate

beforeRouterLeave

完整的导航解析流程：

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的 beforeEach 守卫
4. 在重用的组件里调用 beforeRouteUpdate 守卫
5. 在路由配置里调用 beforEnter
6. 解析异步路由组件
7. 在被激活的组件里调用 beforeRouteEnter
8. 调用全局的 beforeResolve 守卫
9. 导航被确认
10. 调用全局的 afterEach 钩子
11. 触发 DOM 更新
12. 在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

12.Vue双向数据绑定原理

采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

<div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
  </div>
  <script>
    var obj = {};
    Object.defineProperty(obj, 'txt', {
      get: function () {
        return obj;
      },
      set: function (newValue) {
        document.getElementById('txt').value = newValue;
        document.getElementById('show').innerHTML = newValue;
      }
    })
    document.addEventListener('keyup', function (e) {
      obj.txt = e.target.value;
    })
  </script>

13.路由懒加载的原理？

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

_webpack_require_.e方法是实现懒加载的核心，在这个方法里面处理了三件事情。
使用JSONP模式加载路由对应的js文件，也可以称为chunk。
设置chunk加载的三种状态并缓存在installedChunks中，防止chunk重复加载。
处理chunk加载超时和加载出错的场景。

14.Vue-router的模式和原理

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

history模式

因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

除此之外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)

切换历史状态

包括back,forward,go三个方法，对应浏览器的前进forward，后退back，跳转go操作。 有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

1. history.go(-2);//后退两次
2. history.go(2);//前进两次
3. history.back(); //后退
4. hsitory.forward(); //前进

区别：

• 前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
• history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

history模式怕啥
不怕前进，不怕后退，就怕刷新，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在history模式下，你可以自由的修改path。history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

15.keep-alive和对应的生命周期函数

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

keep-alive 提供了include和exclude两个属性，允许组件有条件的缓存

实现原理是在created的时候，将需要缓存的vnode节点放到cache中，在render是，根据name再进行取出

16.vue组件中怎么批量获取使用vuex的getters的多个值？？

mapGetters?

17.终止请求和请求超时的方法

当前端请求发送并且响应未完成时，终止请求，不再返回数据

1、Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。

当前端请求发送并且响应未完成时，用时太长，终止请求，不再返回数据

2、请求超时的设置。示例：

 axios.get('http://xxx.com/index/index', {
  		timeout: 300000  //这里来设置请求超时的时间
    })
  }).then(res => {})
  .catch(err => {
	console.log('数据请求超时')
  })

18.Vue传值方式

六种传值方式为:

• 属性传值 父传子
• 发布订阅 EventBus 子改父 o n / on/on/emit
• Provider/inject
• slot
• $refs
• p a r e n t / parent/parent/child
• 本地存储 vuex localStorage
• 路由传值

属性传值

1.可传值类型

• 固定值
• 绑定属性
• 方法
• 本类对象

2.操作步骤

①.父组件调用子组件的时候，绑定动态属性

②. 在子组件里边通过props,接收父组件传过来的值

3.适用场景

仅适用于 父组件给子组件传值

$refs传值

父组件通过$refs获取子组件的数据和方法

1.可获取类型

• 子组件属性
• 子组件方法

2.操作步骤

1.调用子组件的时候调用一个ref

2.在父组件中通过
this.r e f s . h e a d e r . 属 性 t h i s . refs.header.属性 this.refs.header.属性this.refs.header.方法

3.适用场景

子组件给父组件传值

$parent

子组件通过$parent获取父组件的数据和方法，这种传值方式实际上类似于上边的属性传值中父组件给子组件的传递了子类对象this,只不过Vue官方给封装好了。

1.可获取类型

• 父组件属性
• 父组件方法

2.操作步骤

直接在子组件中使用this.$parent.XX，不需要做任何多余操作。

3.适用场景

父组件给子组件传值

通知广播

1.可传值类型

Vue官网只写了[...args]，故通知/广播传值我们定为只传基本数据类型，不能传方法。

2.操作步骤

1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例

2、在要广播的地方引入刚才定义的实例

3、通过 VueEmit.$emit(‘名称’,‘数据’)传播数据

4、在接收收数据的地方通过 o n 接 收 广 播 的 数 据 V u e E m i t . on接收广播的数据 VueEmit.on接收广播的数据VueEmit.on(‘名称’,function(){})

3.适用场景

适用于父子组件、兄弟组件间进行传值。

本地传值

本地传值方式对于Vue而言有两种，一种是JS的localStorage，另一种Vuex。

路由传值

1.父组件push使用this.r o u t e r . p u s h 2. 在 子 组 件 中 获 取 参 数 的 时 候 是 t h i s . router.push 2.在子组件中获取参数的时候是this.router.push2.在子组件中获取参数的时候是this.route.params

19.computed和watch的区别

计算属性computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别

20.axios实现拦截的原理

1. 关于拦截，这里只说原理，前端的请求，最终还是离不开 ajax，像vue 的 vue-resource 、axios，都只是对ajax进行了统一的封装，它暴露出来的拦截器，其实就是写了一个方法，把ajax写在这个方法里面，（我们先说请求拦截器哈）在执行这个方法的时候，先将请求时要添加给请求头的那些数据（token、后端要的加密码…具体要看实际情况）先执行一遍，都赋值给一个变量，然后再统一传给ajax，接下来就是执行ajax，这就是所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；
2. 响应拦截器：响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；

21.微信小程序生命周期

分为应用生命周期和页面生命周期

应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化。
onShow	function		否	监听小程序启动或切前台。
onHide	function		否	监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。

页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发

22 Vue插件

什么是vue插件

官方解释

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者属性。如: vue-custom-element
2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
3. 通过全局混入来添加一些组件选项。如 vue-router
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

为防止 多次注册同一个插件： 我们可以传递一个可选的对象

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

还用过哪些插件？

qs库 ElementUI

vue-datepicker – 日历和日期选择组件

vue-region-picker – 选择中国的省份市和地区

vue-baidu-map– 基于 Vue 2的百度地图组件库

lazy-vue – 懒加载图片

axios Vuex

等等等等

23.项目中如何封装一个组件

1.首先对这个组件的要实现的功能需求进行分析

2.然后定义一个.vue结尾的文件

3.在文件中添加

4.完成需求的相关功能，留好插槽

24.Vue路由懒加载的实现方式

1.vue异步组件

/*每个组件生成一个js文件，实现组件的懒加载*/

{
    path: '/path',
    name: 'componentName',
    component: resolve => require(['@/componentPath'], resolve),
  }

2.import按需加载（官方写法）

能够被webpack自动代码分割

允许将不同的组件打包到一个异步块中，使用命名chunk(特殊注释语法)。

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const comA = () => import('url')
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

3.webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{  
    path: '/home',   name: 'home',   
    component: r =>require.ensure([], () => r(require('@/components/home')), 'demo')
 }

25.项目中遇到过什么问题？

1.在vue项目中关于定时器的使用（很恶心）

假如，我们在A组建中声明了一个定时器进行倒计时此时 我们在定时器中一直打印时间戳，此时我们通过路由跳转到下一个组件页面，按照正常理论来说，A组件在跳转后整个组件就会被销毁，到达B组件时A组件已经没有了。

但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页面销毁时候将当前页面的定时器clear掉。

更多：Vue专题之难点突破

http://eyee21.php22.host357.com/js/478

沉鱼——阿里10年前端，Node Web 框架 Chair 的核心开发、Basement Baas 服务的技术负责人、九色鹿的技术负责人以及现在云凤蝶的技术负责人，现蚂蚁集团的体验技术部做企业级应用设计研发平台 —— 云凤蝶的技术负责人。本文摘自她的分享，回顾和总结在阿里十年前端的经验和对前端的发展展望。

开篇——入职阿里前端

1、2009 年

先看一下 2009 年，国内成立了第一个前端团队。大家刚刚如果有留意到主持人的介绍的话，会发现其实我是 2008 年入职淘宝的。那么那个时候我的主管是怎么发现我的呢？我当时在一家公司里面工作，工作之余还写博客，还会画一些跟程序员相关的有趣的小漫画。我估计大概是因为漫画吸引了非常多的人的目标，然后就这样进了淘宝。

大家可以看一下左边这张图，是 2008 年中秋节时淘宝网的首页截图。在这张图上，我基本上是达到了人生的巅峰。大家不要误会哈，这不是我作为一个前端的巅峰，而是我作为设计师的一个巅峰。

当时才刚刚流行做节日 Logo 没有多长时间，那段时间正好我们的设计师没空，这个时候我们的部门老板就说了，沉鱼你会画漫画对吧？那你要不要给我们画个中秋节 Logo 呀？我想来想去，那就画吧！画了之后这个 Logo 就真的上线了，被非常多的人看到。这个绝对是我在前端这个行业里面，做为设计师的一个高光时刻了。

大家可能也觉得奇怪，你一个前端，你干嘛画画？实际上 2008 年我入职淘宝网的时候，淘宝是没有一个专业的前端团队的，所有的前端同学都在体验技术部，Title 应该是叫交互设计师，我们跟设计师是在一个大团队的。

实际上那个时候很多的页面布局还使用 table 这样古老的技术，使得我们的设计师中也有不少人能够自主做一些网页。那个时候前端的同学更多的是专注在像淘宝首页这样一些比较重要的页面上，而一些活动页面之类的，就会由设计师同学从头至尾地完成。

直到 2009 年年初的时候，我们公司才正式划拨出了一个前端团队，据我所知也是国内第一个前端团队。于是 2009 年我们才正式有前端这个行业。

大家看一下右边的这张图，是我刚刚截的淘宝网现在的首页。如果我们仔细地看一下这两张页面，会发现除了页面变得更宽了、能适应更大的屏幕了、设计也更符合当下的审美了，似乎并没有发生什么太大的变化。

如果单从这两个页面来看的话，确实是这样，虽然我们使用了各种各样的新技术让页面浏览起来更加顺畅。但实际上前端的发展远不止于此。

2、2008 年 ~ 2012 年

其实任何一个行业在最初时期的发展都是非常慢的，所以在 2008 年到 2012 年这 4 年期间，前端的整体工作都非常的简单，我们可以简单地归结成为“浏览器大战”和“前端框架”这两个关键词。

“浏览器大战”可能对于一些比较新的同学来说，都已经不是很有体感了，因为现在 Chrome 一统天下，包括 2018 年微软也宣布了使用 Chromium 作为他们的浏览器的内核，所以 PC 时代的浏览器的兼容性问题已经彻底解决了。

但是在当时，大家对浏览器的兼容性问题是非常头疼的。

大家看一下左边这个图，有 10 来种浏览器，这还不是一个完全枚举。所以对于那个时候的前端同学来说，最头疼的事就是要处理前端兼容性的问题。而要命的是，当时 IE 仍然是市场上的主流，而且它作为一个主流，却又特别的不标准，性能也很差。

所以 Diss IE 也成为当时程序员的一个日常活动。中间这幅图当时是比较流行的一幅程序员漫画，大家可以看一下 IE 大概慢到了什么样的程度。因为当时的条件特别的恶劣，所以程序员在不断地跟这些我们现在看来有些可笑的问题做着斗争。

那个时候也是非常拓荒的时期，我们还缺乏一些基本的基础设施，前端框架就是非常重要的基础设施。那个时候，国内各大厂商都在开发自己的前端框架，在淘宝我就参与了 Kissy 的开发工作；实际上百度、360 以及新浪都有自己的前端框架。

当时这些大厂之间的前端交流是非常频繁的，所以在有一次交流之后，我回来就画了右边这幅漫画，调侃了一下当时各大厂的前端框架，没想到当时这幅漫画就成为了一个爆款，特别多的程序员看了这个漫画。

我们也觉得这种状态好像不是很正常，但是当时的前端并不像现在这样，有这么开阔的行业视野，所以大家在这个局里面困了挺久的。大家也看到，2008 年到 2012 年是整整 4 年时间，这 4 年不能说毫无发展，但是发展得真的非常慢。

3、2013 年

转机出现在 2013 年之后，我觉得整个前端行业走上了一个快车道。大家可以看一下左边的这张截图，一看就非常土，2009 年的一个手机淘宝页面，当然我当时有参与它的开发。

这么土的一个页面 —— 我们刚刚说 PC 时代结束了兼容性的问题，而移动时代其实才刚刚开始 —— 哪怕是 2009 年这么土的一个页面，它也有非常多的兼容性问题要考虑，可能都是大家意想不到的。

比如说，那个时候所谓的智能手机，其屏幕宽度差异是非常大的，我们为了确保每一行的文案都不折行，实际上需要采集当时市面上所有主流手机的屏幕尺寸，然后去做文案字数的适配。实际上在 2020 年，手机淘宝已经发展得非常好了，它跟 PC 没有什么太多的区别。

但我们的发展过程也不是一帆风顺的，特别是在早期的很长一段时间里，手机淘宝的地位可能都类似于一个附属品，或者说一个补充的存在。

直到 2013 年，整个公司都觉得这样下去不行了，我们必须要加速移动业务的发展。所以当时出了一个非常有名的事件，叫做阿里的“无线 All In”事件。当时公司调派了非常多的人员、资源去做无线手机淘宝。那一仗算是打胜了，胜得比较惊险。

但是要说业务真正地涨起来、形成 Mobile First 这样的用户心智，可能也要到 2015 年左右了。

当时有一件印象特别深的事情，因为我们的内网里有非常多的人，好几万人，所以大家也经常会在上面做一些自己的产品营销，几万人也是不能忽视的对吧~ 是在 2012 年还是 2013 年的双 11 大促的时候，无线手机淘宝的 PD 就在内网发言说今年双 11 大家都来用无线淘宝吧。

因为那个时候，不知道大家还有没有印象，秒杀特别火，就是一块钱秒一个特别贵的东西。我们无线淘宝的 PD 说来用无线淘宝的页面吧，咱们服务器水位低，秒杀一定不会卡。所以大家可想而知，在那个时候，哪怕是我们做成了“无线 All In”的那个时候，用户量也还没有大到一定的程度，但是趋势已经非常明显了。

而现在，大家基本上已经全部都是人手一个手机这样的情况了。在这个事情里面，我们很容易就能看到，哪怕我们在今天看来是一些巨变的事件的发生，也不是一朝一夕的事情。

就像我们在 2009 年的时候，就已经开始做手机淘宝了，到 2013 年无线 All In，再到市场完完全全以无线为主，这中间有足够多的时间去做出反应。所以很多的时候，我们只要踏准了时代发展的脉搏，就有足够的时间去做相应的对策。

那么为什么说在无线端，浏览器兼容性的问题才刚刚开始呢？是因为一开始的时候，我们做的是 Native App，这个时候 iOS 跟 Android 的程序员是非常稀缺的。很多前端在这段时间里就转做了 iOS 跟 Android 开发。但是这两个领域吧，它们的人员培养成本非常高，而且研发成本也不低。

在现在这样飞速发展的时代，如果所有的东西都用这两个技术去开发的话，成本是非常高昂的。所以慢慢地 H5 又重新走上了历史的舞台。因为 Web 技术的成本特别低，所以我们尝试在无线的 App 里面加入 H5 的页面，来处理一些非核心页面的研发。

慢慢地，小程序又出现了，这个时候大家就已经知道了，今天的无线，真正重要的无线流量的入口没几个，而小程序就是非常重要的一个入口。

于是 Web 研发技术又重新回到了历史的舞台。当然最核心的那些 App 以及最核心的那些页面还是会用原生的 iOS 跟 Android 来开发。

大家可以看到，这个页面下面还放了一个 PWA，不知道有多少同学见过它，或者对它有体感。它是一个希望能用 Web 技术做 Native 应用的解决方案，是 Google 家的产品。到目前为止还没有看到 PWA 特别大规模流行的趋势，但它其实已经出来蛮多年了，大家可以关注一下。这几个技术的此消彼长，其实是蛮有意思的事情。

4、2015 年

时间飞快地来到了 2015 年，由于之前“无线 All In”的事情，从很多团队调派了人手，集中人力去做了这么一件大事，所以作为团队留守的一些成员来说是比较伤的，因为业务被裁撤，人员也减少了。

但是我们团队有一部分同学留下来了，我是其中之一，我们仍然在摸索 PC 端的一些可能性。这个时候其实新一代的研发框架已经逐步地生长起来了，最早的是 2010 年的 Angular 以及 2013 年 React.js 和 Vue.js。在这几个框架当中，我们并没有犹豫太久。

在 2015 年的时候我们团队就决定要使用 React。原因比较简单，因为 React 可能比 Angular 好用，比 Vue 灵活。但是这个不牵涉语言之争，仅仅是我们团队的一个选择哈。

在那个时候，我们并没有太长的时间去喘息或者迷茫，很快我们又忙起来了，为什么呢？因为 2015 年被称为 toB 元年，那一年发生了很多的事情，我们就发现其实 toB 的业务也非常地繁茂、非常地有前景。

所以这个时候我们也发布了我们第一个 toB 的 UI 组件库 —— Ant Design，简称 AntD。它从最初的一个非常单一的 toB 组件库发展到今天，已经集合了可视化解决方案、业务场景化模板以及 Mobile 组件库，变成了一个非常大的家族。

在去年的时候，我们的 GitHub 仓库的 Star 数也已经超过了 Google 的 Material Design，成为了 GitHub 上同类开源项目当中 Star 数最高的项目。Ant Design 对我们来说其实还是做得挺艰难的，从 2015 年开始一直到现在，我们还是在大力维护它。

这个项目的 Owner 就在我们隔壁组，叫偏右。我有的时候也会调侃他说，你说你们的 Ant Design 这么多人用，它的竞争力到底是什么？他就非常干脆地甩给我两个字：好看。

没错，很多时候我们常常强调要有大局观、要有全局的视野，但是细节也不能忽视，这个东西它真的好用，能契合到我们工作当中的一些场景，就非常地有生命力。

除了刚才提到的 toB 的前端框架，那段时间大数据也开始崭露头角了，所以相关的可视化的图形库也非常多，包括百度的 Echarts，蚂蚁的 DataV。最早的时候大家可能会用这些图表来做一些可视化的用户行为分析，包括 CNZZ 还有 Google Analytics 这样的东西。但是慢慢地行业就逐渐向深水区发展了。

在 Keynote 的右上角是我们的一个业务分析场景，这个场景特别复杂，可能会有数十万个节点要去操作，这样复杂的场景，又给技术带来了新的挑战，比如说：数十万的节点的计算如何保证性能，如何呈现能保证向用户有效地传递信息等等，这些新的问题都有待我们去解决。实际上我们的业务越来越复杂的话，就会推动技术进一步的发展。

而 Keynote 的右下角是一张非常漂亮的大图，是可视化发展的另一个分支，这个分支比较高端，叫大屏。大屏上的东西特别漂亮，一般来说大家会在企业的接待处或者政府机关看到这种大屏，它其实是有几面墙那么大的。它对视觉的要求是非常高的，大家可以看到它非常精细。

最近也在流行一个形容这一类大屏的词，叫做数字孪生，就是用数字化去打造一个跟我们生活当中一模一样的城市，通常都会用于做交通管控或者金融管控，这种时候大屏就会非常有用。这类大屏之所以足够特殊，就是因为普通的电脑根本就跑不起来，它是需要有特殊的机器来承载的。

刚刚说的这两件事，其实我是一行代码都没参与，都是我们隔壁组的同学做的事。

那这段时间我干嘛去了呢？我去做了这件事。因为随着 2009 年 Node.js 的发布，前端逐渐有了一些想象力，就是能够去做一些后端的事。倒不是说没有 Node.js 就做不了，你可以用 PHP，也可以用 Java，但是对于前端来说 Node.js 有天然的亲和力，因为用 Node.js 的话，你的前后端语言是一样的，有很多问题你自己就可以解决。

虽然 Node.js 一直都被作为一个玩具般的存在，但实际上它已经发展了很长的一段时间，包括 2010 年的时候 Express 框架发布、socket.io 发布，2011 年的时候 LinkedIn、Uber 上船，2013 年的时候 Ebay上船。2013 年还发生了一件比较特殊的事情，那就是激进派的 Web 框架 Koa 诞生了，它的诞生给大家带来了一些新的思路和启发。所以我们团队在 2014 年的时候就开始计划要去做一个 Node.js 企业级的 Web 框架。

大家看中间的这一张图，这是我们当时的代码提交的记录图，可以看到至今还是非常活跃的。这个框架叫做 Chair，我在这个框架里面主要是参与打通跟现有技术体系的连通的这一部分。下面的叫做 egg，是 Chair 的一个开源版本，也就是说对于其他公司的同学来说，如果他想用这个东西的话，他可以基于 egg 来做自己的企业级 Web 框架。那么在这个框架上，我们的第一仗是什么呢？在当时流量最 Top 的支付宝收银台页面上，我们把它用上去了。

实际上这个过程是非常坎坷的，首先有非常多的技术问题要去解决，比如性能、安全性。比如说你说性能不好对吧？实际上 Node.js 非常擅长的就是 IO 密集型的处理，所以我们可以去做 Benchmark，看看到底是 Java 的性能好，还是 Node.js 的性能好，这些问题都是相对容易解决的。

比较难的是，当时我们是没有一个配套的研发流程的；我们也需要融入现有的研发体系，因为现有的研发体系完全是寄生在 Java 之下。其实很长一段时间里，前端都没有自己的发布流程，前端同学写完了一个模板语言之后，他需要把脚本提交到仓库里面，由 Java 的同学去做最后的发布。

另外还有一个更深远的问题，那就是要考虑相关研发人员的培养。因为大家都知道，在大学里面大家都是受过相关技能教育的，所以对于学 C、学 Java 的同学，他可能从学校一毕业出来就带着这样的技能；但是到现在为止 Node.js 也不是一门大学里的常驻课程。所以这个非常难。

当时这件事难点非常多，但是其他的就不细讲了，就讲讲当时我参与的那部分工作。当时我主要是做了两类工作。

一类是跟现有的 Java 服务打通的工作，跟 Java 服务打通是非常麻烦的事情，你经常需要去解析它的 RPC 请求，你需要知道它的协议是什么…… 所以在这段时间里，我写了很多的协议解析代码，包括一些像 Java IO 这样的协议解析，让它能够真正地跟 Node.js 端连通起来，让我们能够真正地连上生产端的各种各样的服务。

另外一个当时非常现实的困难就是，我们除了现在在 Keynote 上看到的这个支付宝收银台页面，实际上还有大量的业务，如果我们希望这个东西能够大量使用的话，我们不能把这个业务里面的代码全部推倒，都重新手写一遍，我们不能这样折腾这个业务。

当时我们在 Java 体系里面使用的是一个叫 Velocity 的模板，这个模板它坏就坏在它太灵活、太高级了，它跟现在的 Vue 这样的模板语言是完全不一样的东西。它可以说是非常接近编程语言的一个模板语言。那怎么办呢？

当时我们就写了一个转换解析器，把 Velocity 的模板语言转换成了 nunjunks 的模板，实际上 Velocity 模板语言的能力是 nunjunks 的超集，我们在转换过程中，还做了非常多的功能检查，在转换完成后，还会提示开发者在这个过程中发现了多少问题是需要人工转换的。

通过这样一系列的努力，我们能够真正地在既有体系里面跑起来了。所以如果大家做一个新东西时希望证明自己的话，最好的方式就是去做一个标杆项目。当时我们拿流量最高的支付宝收银台页面去做，还好最后做成了。2014 年的种子在后面就开花结果了，到了 2015 年的时候，这个框架基本上受到了比较广泛的认可。

其实 2015 年还发生了很多的事情，大家可能也不是很记得。其实 2015 年也是钉钉发布的第一年，在这一年里，有一个关键词叫做 Electron，Electron 是一个能让 Web 开发的同学用 Web 开发相关的技术做 Native 应用的一种技术，它最早其实是 GitHub 的 Atom 编辑器的副产品 —— 它一开始确实是个副产品，而后面就变得独立起来了。

在这方面有两个我觉得比较好的应用：一个是支付宝的小程序 IDE，它最早也是用 Electron 来开发的；一个就是我们的钉钉。大家都知道其实很多开发钉钉的同学，早期都是做“来往”的，所以里面有非常多前端的同学。后来大家转向钉钉之后，要做 Native 的App，大家是没有那么多的经验的，人又特别缺乏，我们又希望能够尽快做一版出来校验一下，看看是不是能得到市场的认可。

所以那个时候一帮前端同学就用 Electron 技术把钉钉的第一版给做出来了。虽然最终钉钉的版本还是换成了 Native 的版本，但是实际上 Electron 的版本也运行了很长一段时间，直到最后被大家反馈有比较多的性能问题。

但是实际上这也是见仁见智的，很多时候大家在说了一大串性能有问题的时候，我们经常会举一个例子：你去看看 VS Code，VS Code 慢吗？VS Code不慢，VS Code 可是用 Electron 来做的。所以很多时候我们也要看这个技术到底被用得怎么样，这也是很重要的。

2015 年还发生了这件事，如果不提那就肯定是漏掉了。Alpha Go 掀起了一场全民人工智能的浪潮，这波浪潮直到今天还在继续。其实早在 2015 年的时候，我们就有一些团队在跟进这个领域了，但是这里我要说的是，人工智能研究和人工智能应用完全是两件事。

如果想要做人工智能研究的话，基本上除了重新回去读个书可能还有点机会之外，剩下的应该就没机会了。因为这个行业的竞争其实非常激烈，绝对得是人中龙凤 —— 这个词用得一点都不夸张，一定是人中龙凤才能来做这件事。

但人工智能应用会越来越广泛，它的门槛也会越来越低。我们在这方面做了一些应用上的尝试，包括 2015 年阿里的智能设计平台，以及 2018 年的智能设计稿转代码平台。这两个平台都是贴着营销大促这个场景在跑，因为当时在双十一或者 6.18 大促期间的 Banner，或者这种推荐产品的图，它们的量级已经达到了上亿级别，这已经根本不可能靠人工去做了，所以我们只能向技术要产能。

所以大家想到了这样一些办法。还有一个就是我们团队现在在做的，蚂蚁企业级应用设计研发平台。可能大家会说，这看起来不就是一个 IDE 吗？它是怎么个人工智能法呢？这里我们先按下不表，待会再说。

5、2018 年

2015 年真的是技术发展非常蓬勃的一年，当然虽说很多技术可能在更早的时间 —— 比如说 2008年、2009 年 —— 就已经出现了，但是对于我而言，我觉得特别重要的那些技术，可能都是在 2015 年、2016 年那两年感知到的，那个时候技术真的是出现了一个大爆发，而且出现了非常多的能很好地落地到业务里的应用。这些技术现在仍然还在发展，但是近几年非常繁荣的可能是我们的 Web IDE 和 Web Editor。

这是我截的一个我们公司内部的一些相关产品的图，非常多，至少有 10 个，肯定还有很多我不知道的，就像前一个分享讲师讲的他们的 IDE，那个我就不知道。

大家可以从左到右看一下，最早的是大屏可视化数据分析类的产品，这个是跟着大数据的浪潮来发展起来的；然后到中间人工智能的这一波浪潮，Data Works 大数据开发以及 Pai 人工智能可视化开发；到第三列的支付宝小程序 IDE 和我们的 H5 & 小程序建站 IDE，最年轻的两个 IDE 是我们的 Cloud IDE 也就是云 IDE，以及云凤蝶企业级应用设计研发平台。

除了这些程序向的 IDE 之外，还有一些其他的复杂 Editor 的出现，即下面以语雀为例的富文本编辑器以及电子表格等。所以如果我们今天回头来看整个前端的发展，会发现实际上是非常迅猛的。很多工作年限比较短的同学，甚至都无法想象在 2008 年我们前端面临的是那样的一个场景。

所以业界不是有句名言嘛，说凡是能用 JavaScript 做的东西，最终都会用 JavaScript 做一遍，包括现在的 IDE 都是用 JavaScript 在写了，所以还挺神奇的。

6、2020 年

大家可能会说，你们前端这么牛，你们怎么不上天？其实确实上天了，大家可以看一下，2017 年 NASA 就已经上船 Node.js 了；在刚刚过去的 Space X 的发射中，大家也发现他们使用了前端的相关技术来做触控大屏。当然这条推文仅供大家娱乐一下，因为这条推文其实并不是 Space X 的工作人员发的，而是 Google 的一个程序员发的。

这里引发了大家比较多的讨论，我觉得有些回复比较有趣：有人说 node_modules 有没有让飞船超重啊？大家可以看一下截图的回复中间，有一个老爷爷，他其实是 JavaScript 的创始人，他仍然很活跃，经常做的事情之一就是反驳别人说 “JavaScript 就是个玩具语言”。这一页给大家娱乐一下。

发展到现在，其实我们会发现，首先前端的领域性越来越广了，在最初的前端行业里面，大家所要知道的东西就是 CSS、JavaScript、HTML，以及一些周边的东西，但是并没有像现在这样有那么多重要的东西能够去玩；另外一个是，它的难度确实是越来越高了，大家会发现整个前端的工作是一路向上延续的，从写页面到写编辑器，到移动端的浏览器内核，一路在向上，在向上的过程中对事情有更多的把控力。这两个趋势非常明显。

那么对于我们而言，我们要想的是，我们作为今天的前端，是不是可以满足于做的那些页面？答案肯定不是，我们要去看前端的后续发展中下一个浪潮在哪里，我们要踏对浪潮的脉搏，可能才会有更好的下一轮发展。

这个大概是我对前端过去这 12 年的简单总结。这个总结其实是非常个人的，有一些关键技术也没有出现在今天的分享当中，比如说 IoT，比如说 Web Assembly 等一些技术，相关的同学也可以去关注一下。

前端工作生涯的思考和感悟，希望有助于大家的工作、学习和职业发展

3、思考一：像做 PPT 一样做应用

首先大家都知道，可视化建站或者说可视化拖拽这个概念其实并不新鲜了，在八几年、九几年的时候，就已经开始有第一代产品在尝试了，但是无论怎样，几十年过去了，还有很多产品前赴后继地来做这件事，这说明了什么？

说明两个问题：一个是这个问题没有被彻底解决，否则就不会有那么多后来者；另外一个就是这个领域可能真的是有需求的，不然也不会有那么多人去做。

那么我们希望它到底“Low”到什么程度，它的门槛要低到什么样的程度才能让设计师和 PD 这样的角色能参与进来呢？我们首先定下来的原则就是，我们要像做 PPT 一样去做应用。什么叫像做 PPT 一样去做应用呢？

大家可以看一下左边这个小图，这个是市面上常见的一些同类产品的拖拽方式，这个拖拽方式是基于 Flex 布局的技术，所以当你拖出来一个东西到画布里面去的时候，通常只能上下位添加或者左右位添加。当你想要对这里面的东西做一些排版的时候，实际上是要经过一系列非常复杂的操作，才能够把它摆到想要的位置，这是现有的一些产品。

那么在云凤蝶上怎么做这件事呢？大家看一下，这个真的是像做 PPT 一样做应用，就是想摆哪就摆哪，没有什么布局的概念。

实际上这个技术并不算是云凤蝶的首创，因为在一些手机端的可视化建站产品当中，已经使用了这个技术，但是在手机端做这个事难度就低很多了。为什么说它难度很低？首先它不需要去考虑弹性布局的问题，因为手机端虽然说屏幕尺寸有一些差异，但只要做一个全屏幕的等比缩放这事就解决了，根本不存在布局问题。

而没有布局问题的话，我们也不需要去识别这些元素之间的父子关系。但是这两个问题在 PC 端都是非常大的问题，经常会有人开玩笑说，把一个专业的开发挡在前端门外的往往都是 CSS。这虽然是一句玩笑话，但也足以说明布局问题的复杂性。所以我们在布局的时候，需要考虑的问题非常多。

最终我们决定用这种非常简单的方式来让大家使用。比较眼尖的或者说经验比较丰富的同学可能会看出来，这个像做 PPT 一样的体验，效率是没有左边这张小图的高的，但是实际上是有解法的，而且我们正在解。

这就是我们整个产品的底座，它奠定了整个产品的基调。那么结果如何呢？结果就是大家确实买单了，不仅有前端的同学来用，还有后端的同学，更神奇的是，我们还发现有人拿我们这个做线上 PPT，很神奇，我们看了一下，做的还蛮好的。所以说，当你的产品力达到一定程度的时候，大家对这个产品的想象力可能会超乎大家最初对它的期望。

4、思考二：开放的组件体系

另外一个点就是丰富的精品 UI 资产。大家都知道我们在做应用研发的时候，最重要的两个东西是什么？一个是 UI 组件，另外一个是数据连接。

UI 资产其实就是 UI 组件这方面，通常来说同类产品做这个选择都会非常艰难，要么就是一个封闭的资产体系，也就是说我有 100个 组件，你就只能用这 100 个组件，而好处是这 100 个组件我会把体验打磨得非常好，而一旦组件不满足要求，那完蛋，只能退到 Pro Code。还有另外一种尝试叫做开放的组建体系，云凤蝶是走了这条路。

说到开放的组件体系，什么叫开放？意思是说凡是在 Pro Code 的世界里开发的组件，都可以通过简单的导入操作在云凤蝶里面使用。这个听起来非常的好，对不对？我们没有必要重复造轮子，所有在 Pro Code 世界里非常好的东西，我们都能拿过来用。

但实际上要让用户能够用得这么简单，难度是非常大的，因为一个小小的 npm 组件的导入，就有非常多的工作要做。比如说组件规范是什么？如何解析这个 npm 组件？解析后要不要做构建？构建！因为我们不可能像 Pro Code 里一样，在用户发布的时候说，等一等我跑个 10 分钟构建。

一般来说我们希望它是秒级发布的，所以我们需要提前把构建的工作做好。再比如一个 npm 组件的属性编辑怎么做？这些其实还都只解决了我们手工操作的问题。我们最终希望，一个 Pro Code 的同学，他每天写这些组件、发布这些组件，我们能不能让他发的时候就直接发到我们这个平台上来，这样的话无论是用 Pro Code 写代码，还是用云凤蝶做搭建，它都可以用，这是一个非常好的想法，所以我们最近也在做研发链路的打通。

在组件的世界里面，其实有一个最让大家头疼的事情就叫做版本升级，很多产品的版本碎片化非常严重，包括我们自己的 Pro Code 的很多组件库也是这样。

在云凤蝶中我们就定了一个原则，那就没有版本碎片，我们是强制用户升级的，我们用了一个 Codemod 技术，把所有的组件无缝升级了，用户看到提示的时候，只需要无脑点升级就可以。这其实是非常好的尝试，我们在这些尝试的过程当中，也跟 Pro Code 的同学有一些交流、沟通，甚至有一些反哺。

比如说后续 Pro Code 的同学可能也会尝试做版本的 Codemod，我们也能反推 Pro Code 的一些组件规范的提升。这个时候开放的组件体系就真正地把 Pro Code 跟 Low Code 融合在一起了，我们能够共享其中的产出。

5、思考三：数据驱动的智能研发

OK，说到了第三点，就是基于数据连接的智能研发，因为脏活累活、重复工作没有人想做第二遍，但现状是 —— 我不知道小厂怎么样 —— 反正我们大厂这类问题蛮多的，大家可能每天都在跟表单、表格做斗争，我指的是中后台业务线的同学们。

往往我们面临的业务还蛮复杂，有时候要做一个表单的话，往往是以星期为单位去计算开发工作量的。但实际上摸着良心问一问，做这个东西能有多大成就感？可能大家也觉得没有那么多成就感，对不对？毕竟还有那么多好玩的事。

所以我们就希望让机器去承担这一类重复劳动，包括设计。大家可以看一下我们现在在做的一个能力：这是一个表单，选择了一个 API 之后，你可以选择要填写的字段，然后它会根据 API 的元信息以及它的 API结 构自动生成这个表单。当然这是一个非常简单的演示，大家可以看到，该有的校验、排版之类的全部都是机器一键自动生成的。

所以这能给我们的整个研发带来非常多的便利、节约非常多的时间。但是它做起来也是非常坎坷的，因为大家都知道，一旦说到智能化，大家的想法是非常多的，有些人觉得是个银弹，也有人觉得不那么靠谱。

所以我们最初在决策到底用哪种智能化的方式的时候，也是经历过非常多的挣扎的。我们到底是从 API 直接到产物，还是去解析设计稿到产物？

最终我们决定从 API 到产物。为什么？因为中后台应用研发的设计是有一定的规范性的，我们并不会每天看到很多花里胡哨的中后台研发，而且在表单、表格这样的主流场景当中，涉及的规范性就更加明显了，没有那么多的设计创新。

另外，在 API 上有元数据的话，就有非常多的业务信息，这些是通过图片生成代码无可比拟的优势。而且还能省略设计师的设计工作。所以我们最后决定，直接就从数据接口生成产物。而在使用哪种 AI 技术上面，当时大家也是有过一些争议的，最后我们还是使用了专家系统这样的比较简单的方式，这个方式的效果是比较好的。

大家可以看一下，这张图是我们去年下半年的时候做的第一版技术原型，左边的是人工设计的版本，右边是云凤蝶设计研发的版本，大家会有比较明显的体感，会发现云凤蝶的版本更加精致一些。确实是这样，不是说人工设计的质量不好，而是 toB 的业务更多是理性的设计，要去做这个东西的话，往往可能有三、四百条设计规则在那等着你，作为一个人，是不擅长去记这些东西的，而这些恰恰是机器擅长做的。

比较搞笑的是，我们从去年年初的时候开始孵化，上半年产出的结果非常矬，后来下半年的时候，觉得这样下去不行了，得改进。然后就跟设计师一起想，我们才能怎么做到最好，把这事给做好。

当时在会议室里，我们就说这事要定个目标对吧？总得定个目标。没人发言，那我就说我们要不就定这样一个目标，我们把目标定成，产出结果比一般的人工设计师质量要高。这个时候大家都不说话了，都觉得这可是设计啊，这玩意怎么可能比人工设计要高，顶多接近它。

没办法，后来我们就说，那我们先接近人工设计的标准吧，后来过了一段时间，我们把技术原型做出来，也就是大家在 Keynote 上看到的这张图，顿时整个项目组的人都非常受到鼓舞。于是我们觉得，比人工设计的水准要高绝对是 OK 的。后来事实证明确实是这样，我们在业务当中确实很快就得到了业务的认可。

所以很多时候，大家想一些东西时，还是需要更大胆地去想。即便是设计这样非常有难度的东西，这些在我们看来最不可程序化的东西，也许也是有迹可循的。

6、思考四：混合模式

第四点讲一讲 Pro Code 跟 Low Code 的混合研发。很多时候像云凤蝶这样的 Low Code 产品，虽然我们想了非常多的创新点，想了非常多的解决用户痛点的点，但无论怎样，“你就是个拼多多，我就爱用天猫，我就不用你拼多多”。怎么办？这就不是技术问题了，这是一个用户信心建立的过程。

我们就做了一套方案，基于微前端的架构，把 Pro Code 和 Low Code 的应用给联合起来，作为一个开发者，他只需要随心地去选择合适他自己的研发方式就可以了。

我们看到下面这个是云凤蝶自己的一个产品页面，左边是我们的 IDE，是用 Pro Code 研发的，右边代表了所有一系列除 IDE 的其他页面全部都是用云凤蝶自举的。这个时候确实也不适合用某种单一的研发方式来完成我们的研发工作，而两者混合可能确实是最好的解决方案。这个解决方案实际上也解决了用户信心的问题。

比较有趣的地方是，一开始用户对我们信心不足，然后我们做了这个混合研发的架构，一段时间之后我们发现云凤蝶的智能表单、表格太受欢迎了，Pro Code 的同学也不想自己写了，他们说云凤蝶能不能做组件级的混合呀，在云凤蝶上的某个组件，能够嵌到 Pro Code 的代码里面去，Pro Code 的 npm 包也能嵌到云凤蝶里面来？

OK，这个事可以做，这个事做完之后就变成了什么？对你来说你无需考虑要选择哪种研发方式，而是考虑哪种研发方式对你的业务确确实实是最合适的。那些常规的工作，可能确实用云凤蝶就非常地快，能又快又好地做完。

虽然最初是因为用户信心不足，我们来做的这个事，但其实我们发现，当用户真正接受我们之后，100% 地使用云凤蝶来研发的项目是非常多的。除了像云凤蝶这样本身有那么一两个很特殊的 IDE 类的复杂度很高的页面，其他的页面都非常适合用云凤蝶这样的产品来研发。

7、对未来的思考

今天我在这里讲讲可能觉得还挺顺理成章的，但实际上过程是比较坎坷的，还不断地被拷问、被质疑，走到现在可能才刚刚好一些。而对于企业级应用研发 —— 我们内部经常会说中后台应用，这一类其实大家都知道，就像水面下的冰山，往往一个对外的页面对应的是好多个内部的系统，所以内部系统的量级是非常高的。而如果它有比较高的质量，其实对员工的工作效率有很大的帮助。

左边这张图就说明了适用云凤蝶的范围，我们把一个公司里面的应用分位两个维度来看，一个是它面向的用户规模，从小到大是团队级、部门级、企业级到 toC；另外一个维度是它的交互特殊性。黄色区域都是非常适合用云凤蝶这种研发方式来做的。云凤蝶其实在上面还有一部分是混合研发的，就是刚刚和大家讲过的。

那么对于未来的企业研发模式，我们认为它是怎么样的呢？就是右边这张图，上面是现状，有大量的 Pro Design、Pro Code。云凤蝶去年下半年发了第一个版本之后，去年大概有差一点不到 20% 的业务是由云凤蝶来承载的。

这对云凤蝶来说非常不容易，我刚刚讲了，我们上面有 OB 这样的业务在，所以要承载很多复杂应用的研发是很大的一个挑战。在去年数据里，有 40% 的产物是通过机器来做设计研发的，大概 60% 是人工。

我们希望未来大概是下面这张图的样子，首先 Pro Code 跟 Low Code 是能够进一步融合的，它们之间能产生实实在在的关联。

比如说能把 Pro Code 产出的组件放到云凤蝶里使用，同时云凤蝶也有非常多的天然优势，它能够非常精准地收集用户的需求以及用户的使用数据，能够给 Pro Code 的同学非常多的反馈，能促成一个良性循环。

慢慢地 Pro Design 和 Pro Code 的这些同学会去处理越来越复杂的场景，对于常规的研发工作来说，我们会慢慢收口到像云凤蝶这样的平台上面，并且未来在云凤蝶上可能有 70% 的工作是由机器去完成的，剩下的 30%，一部分是设计师来参与，一部分是工程师来参与。我们希望云凤蝶能够为中后台应用研发提效，让大家有更多的时间和机会去参与更加有挑战的事情。

好，这就是我近期的一些工作和有趣的事情。

四、一些感悟

接下来跟大家讲讲做前端的一些感悟吧，比较少哈。

1、认识自己

第一个是知道自己有什么、要什么、可以舍弃什么。在大家的提问里面，很多的同学都会关注自己要不要走管理，要不要学这个、学那个。实际上问题很简单，那就是你要什么、可以舍弃什么。

在我看来，管理是一件九死一生事情 —— 九死一生这词不严重。为什么我说它九死一生呢？因为至少 10 个人以上的团队才需要一个兼职的管理者，30 个人以上的团队可能才需要一个全职的管理者。当你进到管理行列的时候，完全是在另外一个赛道，可能跟你做技术的时候是两码事。

比如说要考虑到大家怎么开心地工作、团队怎么建立、末位怎么汰换、怎么给团队立下发展方向、怎么向上沟通汇报。这个时候很多同学可能会说，我们团队发展得比较快，没有人带团队，那我就得带；或者说我不带团队的话我技术不行，我怎么办呢？

大家自己想清楚自己要什么就好了，如果仅仅是因为觉得不带团队了可能就没有前途了之类的，其实并没有这个必要。我们团队就有非常多的高 P 的独立研发者在公司里面工作，工作得非常好、非常开心，他们也没有带团队，这其实是看个人的发展的。而且如果带团队让你感觉很痛苦的话，可能确实不带团队会比较好一些，这是第一点。

2、发现和定义问题

第二点就是学会发现问题、定义问题，至于怎么解决可以慢慢学。作为程序员，我们很多时候都是解决问题的角色，我们学的都是解决问题的方式方法。但是很多同学 —— 特别是有了一些工作年限的同学，他们在工作的过程当中会慢慢地发现，很多时候发现问题和定义问题会更加重要。

打个简单的比方，刚刚我在说为什么要去做云凤蝶？因为我们有一千多人的前端，有 1/3 在做中后台应用，急需解决研发效能的问题以及门槛的问题。那么说 1/3 的人在做这个事，其实还是挺有体感的，但是如果你跟老板说，我觉得现在前端研发的同学效能太低了，这句话可能很难让老板 Get 到这个事。

所以怎么去描述问题很重要，包括怎么去发现问题，因为很多的时候越往前走，你会发现问题就不那么明显了，甚至有可能很多时候大家都觉得这不是一个问题，直到你做出来了，他们才说原来你这个真的是很能解决问题的东西呀。这个过程当中，你可能经常会被别人 Diss 或者会被怀疑，但是如果真的想清楚这事应该怎么做的话，可以坚定一些。

3、注重基础

第三个是形成自己的知识体系，注重基础知识的积累。这是我觉得对工作年限比较短的同学来说最重要的事情。对于程序员来说，我们还是要去把本职工作做好，把基础打好，因为如果基础不好的话，走到管理岗可能也只是一种偶然，很难走长远。

在知识体系里面，有一些是基础知识，有一些是应用级别的知识，应用级别的知识就是你可能花两三个月、快的话两三个星期也能上手的这类。但要能识别出来哪些是基础的、哪些是应用的。对于基础知识可能往往要花非常多的心力或者精力去学习，但是一旦你学会了之后，它可能会让你在很长一段时间里都能受益。

4、无心插柳

第四点就是学点无用的东西、做点无用的事，见见无用的人。

这个可能跟前面的鳗鱼小姐姐的说法有一定等同，就是你现在做的这些无用的事，在未来总会连成一串。确实是这样，我回想了一下，在 2015 年参与开发 Chair —— 就是我们蚂蚁的 Node Web框架 —— 这个项目的时候，我做的几项工作。

第一个是打通了跟现有 Java 服务体系，能做成这件事，来源于我工作了之后还花了比较多的精力去学 Java。另外一个就是把当时 Java 的 Velocity 模板用机器编译成了 nunjunks 模板，这个正好是因为之前学了那本龙书 —— 叫《编译原理》的那本龙书，学完了之后正好就用到了，这个东西如果要想现学的话可能就比较难了，因为我当时断断续续看了半年。

这个仓库大家可以看一下，右边有一张截图，就是我当时的一些习题记录放在了 GitHub 上，很多同学在进入阿里之后就慢慢地不怎么更新了，我也是一样的，没办法，工作太忙了。但是这个仓库的 Star 数是一直在涨的，因为你可能找不到第二份习题答案。

今天趁着这个大会也想呼吁一下今天的听众同学，如果有同学对这个东西比较有兴趣的话，也欢迎成为这个仓库的维护者，因为我实在是忙到无力维护这个东西好多年了，但是我不断地看到有人在用，不断有人提 PR，我觉得荒废掉挺可惜的。

5、准求极致

第五点就是追求极致，最难的路可能是最好走的。如果我们选择了一条比较容易的路，我们往往会面临低质量的竞争；但是如果我们选了一条比较难的路，可能只是开始比较艰难，但是会越走越开阔。就像开始讲到云凤蝶在选择可视化搭建的画布基础的时候，我们选择了一个看起来可能最难的自由拖拽的画布，因为我们希望用户能够有一个像做 PPT 一样的应用研发体验，这个确实有非常多的技术难点要解决，当然这个过程当中 Bug 也搞了不少，也被用户骂了不少，但是做到今天，我们真正觉得这条路是走对了，而且我们不断地得到用户的认可。

五、书籍推荐

按照大会的惯例，需要给大家推荐一本书。我先说一下，如果大家觉得大学没有学好，那可能是因为教材比较渣，一定不要觉得是自己比较渣。这个我是深有体会的，因为很多大学的课程我在工作了之后又重新学了一遍，学的时候我就换了教材。

这是我给大家推荐的几本书。为什么是几本书呢？因为这些书其实是有一定的关联性的。

上面的三本是《微积分》、《线性代数》跟《概率论》，这个可能是我们所有同学在读本科的时候基础的三门课程。下面是大家可能会觉得现在比较热门的、同学们也比较想去了解的，是《数据挖掘》以及《人工智能》。

很多时候大家会看到有一些所谓的人工智能的入门书之类的，我建议大家如果真的对这两个东西感兴趣的话，可以看一看这两本书。这两本书都非常厚，但是《人工智能》这本书非常全面地讲述了人工智能领域所有的东西，当然有一些东西可能在今天看来比较过时，但仍然建议大家读一读，耐心一点把这本书读完。

这本书读完了之后，对人工智能能带来哪些好处，或者说哪个方案会比较靠谱一些，你就会有比较坚定的自己的看法，包括你要跟相关的同学去沟通，你是不会发怵的。

然后另外一个就是《数据挖掘》，现在大家都用数据说话嘛，所以数据挖掘也很重要。这本导论好就好在非常浅显易懂，基本上所有的方式方法你都能看得懂、用得着。所以这两本书非常推荐。

那为什么还推荐了上面的那一排基础书呢？因为在人工智能领域有一些基础的算法，可能让大家觉得最头疼的就是这些东西，正好上面的那本《线性代数》对应了人工智能行业非常多的基础算法，可以说是非常合适的一本人工智能算法基础的入门书。如果大家有兴趣的话，建议也看一看这本。包括上面的《概率论》也是一样的，因为在数据挖掘的时候，概率有非常大的作用。

好了，这就是今天我推荐的一些书，不要被这些书吓到，虽然看着都很厚，但是其实看着还挺有趣。

六、加入我们

好，到了最后了，这就是今天来跟大家聊的最大的动力，所以希望大家有什么问题的话也欢迎跟我交流。

七、Q & A

1、比较纠结，自己作为前端，不懂服务端的东西，而且平时工作也不太会涉及到服务端，自己想学一些服务端，但是又不知道如何下手，常常会陷入深深的自我怀疑，请问沉鱼小姐姐有没有一些好的建议？

如果是早期的前端，可能基本上都是从自我怀疑当中走过来的。我刚才讲过没有 Node.js 的时代，大家对服务端是很难插上手的。虽然可能有一部分同学会写 PHP，但是如果 PHP 没有用在你公司的生产环境里面，那也没有太多的用武之地。

我觉得比较靠谱的、比较有可操作性的两个建议是：

第一，看看你公司的整个服务端的架构是什么，然后可以学一学跟公司服务端架构贴近的东西，比如说你的公司用的是 Java —— 可能大部分公司都是用 Java，有一些创新公司会用 Node.js，那么那就学学 Java 呗。学一门语言在我看来是应用级别的东西，所以应该不会特别难才对。找到一些机会，然后学它、用它。

第二，我们要注重基础能力的培养，比如说你学 Java，到底知不知道一个 HTTP 请求是什么？HTTPS 请求跟它的区别是什么？最新的 HTTP2、HTTP3 到底是什么东西？因为这些东西包括多进程、多线程之类的，可能才是语言下面真正常用的那些知识。很多的同学在学语言的时候觉得晕，不是晕那个语言，而是因为那个语言下面那个知识可能不是很牢固。所以第二个建议就是去学习一下这些相关的知识。

然后第三个建议就见仁见智了，去更有挑战的地方。

2、你是如何掌握自己的时间的？如何掌握自己去学这么多东西？对于前端团队人比较少的情况，一般都是业务来推动开发，这种情况下应该如何去处理，逐渐让技术跟业务相互推动？

“掌控自己的时间”，首先还是不得不说一下，跟今天其他的分享嘉宾相比较而言，我的工作年限可能确实是比较长的，所以我就有更多的时间来学东西。你工作五、六年你肯定没有那么多时间学。另外一个，我确实比较珍惜早晨的时间，我通常会比较早就起。

如果平时我们公司 9:00 上班的话，我可能 6:30 到 8:00 左右之间，大概会有一个半小时的时间会持续地学习一些东西，这段时间一定是不会被干扰的，是非常高效的一段时间。当然现在说起来有点脸红，因为几年前我生了我们家宝宝，这个对女生来说确实会有一些影响，但是也没有太多的办法，只能不断地校准自己的时间。

“对于前端人数比较少的团队来说，通常都是业务推动开发”，对于大的前端团队来说也是这样的，没有太多的区别。只是大家在这个场景下怎么去看待业务，比如你能不能在现有的业务里面看到一些更远的东西，这个很重要。

其实我所在的团队可能是蚂蚁特别大的一个前端团队，但是也有一些团队是前端是比较大的，比如说我刚刚说的有一个大数据开发的 IDE，那个团队的同学，其实也是很厉害的，跟业务的大小有一定关系，但也并不是绝对的，有一些小团队他们可能做出来的东西也是很厉害的。

另外如果说，你实在觉得没有太多的发挥之处了，比如说你每天在家扫地，扫地机器人这玩意你要是能想到可能特别牛，如果要是想不到的话，可能还是在家每天扫地，觉得没有什么价值感，可能确实得停下来想想自己想做的这个事的价值到底是什么。最后如果觉得还是想不清楚，跟别人聊了也很迷茫的话，建议去看一看其他团队，那些你觉得做得特别好的、有活力的团队，他们是怎么做的，或者说换个环境也是 OK 的。

3、为什么是 API 到产物，而不是 UI 到产物？B 端跟 C 端的产品又有什么样的区别？

在我们公司内部有一个叫做 API 平台的东西，集合了公司所有能用的 API 以及一些 API 的元信息，这个元信息虽然说不全，但是在云凤蝶里面是能够补全的。元信息是什么？比如有一个叫做 userId 的字段，它可能是员工 id，当你有这样一些元信息的时候，你对 API 的理解就会更加丰富一些，你从这个 API 生成的产物，第一，它是集合了我们设计团队对整个设计规则的理解，也就是机器来做设计；第二，因为我们知道 API 上很多的元信息，所以更加能理解业务，能做出来直接可以做最后交付的东西。

如果说是 UI 到产物的话，那么你缺失了非常重要的业务信息，你只能根据它长什么样把这个页面切出来，但实际上没有办法完成功能的闭环，同时你还需要设计师先去做设计的工作。但问题也分具体场景，就是我刚才强调说，中后台研发不是对设计品质要求不高，而是对设计的特殊性、交互的特殊性要求不那么高，因为表单你不要做出一个花来对吧？这个时候 UI 到产物，它也有很多的应用场景，比如说我们在做一些促销的时候，推荐宝贝、推荐产品这样的东西，它的逻辑可能是偏少的，更多偏展示，这个时候 UI 到产物就比较好用。

B 端和 C 端的产品区别，笼统一点来说，我觉得 B 端的产品更多是完成功能性的需求，对于设计的特殊性要求是没有那么高的，但是并不意味着我们对品质的要求就低。因为你看我们有那么多对外的商业的 toB 的产品，那就必然意味着它的要求是很高的。

而且 B 端的逻辑可能复杂到难以想象，很多时候做 C 端的同学会觉得 B 端非常简单，就是做表单、表格，但是当你面临 800 个字段的表格、表单的时候，你要怎么搞？这个事情可能在 C 端是很难想象的。对于 C 端来说，它同样有非常多的挑战，比如说设计的新颖性、先进性，包括 C 端的体量非常大，这个体量可能是 B 端没有办法去比的，这就得具体问题具体看了。

4、身边的程序员是否都大部分都坚持了本行？有没有其他人转行的？转行的同学又是去做了什么？

我认识的大部分人可能都还是比较 Geek 的，所以很多人都还坚持在写代码的一线，包括一些高 P 的同学，也都在每天写代码。但是也有转行的，不是说程序员这条路一定要一条路走到黑，大家可以根据自己的规划去走。

比如说我们有认识的一些同学可能觉得，没问题，我到 P6、P7，我掌握了整个前端研发一些基础的东西之后，我出去创业，也有这样的同学，其实过得还挺好的，可能比我们要滋润很多。但这个就看个人选择了。还有一些做管理的，确实是少数，因为像刚刚说的，那个比例在那，比如说 30 个人才有 1 个管理者，这就意味着管理岗毕竟是很少的。