Abiel

Abiel 查看完整档案

杭州编辑中国计量学院  |  信息与计算科学 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Abiel 收藏了文章 · 10月10日

2020年8月-9月前端找工作感受总结

记录一下自8月中旬离职之后准备以及找工作的经历,会提到个人感受到的招聘情况和一些前端面试题.会按照以下几个点来展开.
  • 背景信息(个人相关)
  • 整体找工作的感受
  • 整体节奏(时间安排)
  • 面试题整理(含算法题)
  • 感悟和总结

背景信息(个人相关)

普通二本,计算机专业,三年工作经验(一年爬虫,两年前端+全栈),前端岗位,技术栈主要是vue.js + node.js.简历上稍微好的点应该就是在猎豹的工作经历和爬虫的工作背景.整体看来就是很一般般的.

整体找工作感受

在经历整个过程之后对找工作前的一些点的思考,希望减少一些同学对今年就业形势的误判.

  • 整体就业形势的感受

因为受疫情影响,整体经济大形势是不好的,很多企业都在裁人,所以整体hc减少,工作不好找,这是在脉脉或者v2ex论坛里面很多人的反馈.但是我个人感受是今年招人的还是挺多的,就拿我的情况来说,我找工作一直用的boss直聘(boss招聘打钱),上面有300+条消息都看不过来(这个有点小诀窍,下面会提到),只有第一周我回了一些比较中意的hr简历,剩下的两周都没有再投简历.
结合约面试的情况来看,招聘主要集中在滴滴,美团,字节这三家.boss上发消息的10个里面有6个字节的.美团换着部门面面了三次,滴滴面了两次.面了三周的时间,基本上每天两场.最后陆陆续续拿到了6个offer.
后来我也分析了,整体hc减少是不假,但可能是10个小厂减少了20个hc,一个大厂涨了12个hc这样的情况,hc少了但是更集中了.
我的结论就是,有些事别老听别人说,要小马过河,自己去试试.
另外,我也有点困惑,今年找工作的这个情况到底是3年的工作经验带来的还是猎豹的工作经历带来的.

  • Github项目star数和个人博客对面试的影响

我在github上有一个500+ star的项目,还有平时有写博客的习惯,我从改简历开始就琢磨这些点该怎么表达更好,尽管我在每次自我介绍的时候都会提到在开发之余我会写写自己的项目和博客,但是目前github项目基本没有人问的,博客也只有百度五面和去哪儿二面的时候才有问到.
所以,这部分怎么说呢,属于锦上添花的,要搞好核心能力,不要把这些看太重,除非你这这两点非常非常优秀.

  • 关于视频面和现场面

视频面确实方便,面试成本低,写代码也更方便,但是呢,视频面节奏比较慢,基本上不会一面之后立马二面,我见过最快的视频面隔了一个小时进入下一面,其他的都隔着1-3天不等.不如现场面痛快,今年的现场面基本上都能当场轻松的拿到offer.

  • boss上遇到的一些问题

    • 我发现把boss的求职状态设置成[在职-暂不考虑]比设置成[离职-随时到岗]更有用,设置成[在职-暂不考虑]然后每天还正常的刷boss会收到更多的消息,个人感受,无实际依据.
    • boss上有一部分人,不是hr也是不是team leader,但是也会找你要简历,这部分八成是赚内推奖励的,我的简历就被莫名其妙的推过几次,对于这种情况我不置可否,但是如果你有确定的内推人的话,最好甄别一下这种情况,把内推奖励留给小伙伴.

整体节奏(时间安排)

第一周,主要用来回顾一下基础知识,看了下一些比较重要的知识点,没怎么看面试题,面试题基本上都是通过面试来查漏补缺的.同时开始约下周的面试.
第二周,开始面试,基本都是视频面,上午一场下午一场,好留出来时间整理遇到的问题.周六日基本不约面试,同时开始约下周的面试.这周的面试基本上全挂一面,惨不忍睹,当然也有拿offer的,作为保底.这不重要,重要的是查漏补缺,找出自己准备的和面试的差距.好有的放矢.
第三周,面试节奏放慢了一点,面试题都过了一遍了,所以这周基本上都能进二面了,也拿到了一些offer,这时候去推掉第二周拿到的offer.
第四周,这时候面试节奏更慢了,基本上是第三周面试进入比价靠后的面试和一些临时约的面试.这时候拿到的offer之后去推掉上周的offer.这周之后基本上面试结束,找工作告一段落,纠结纠结手里的offer,作出决定,然后等着入职就行了.

面试题整理

常规知识点

在第一周的时候整理基础知识的时候侧重回顾的一些知识点,这里列一下

  • js基础知识
  • 从输入url到获得页面经历的所有事情(越细越好)
  • 原型链
  • 继承
  • es6新特性
  • DOM事件和事件流
  • 盒子模型
  • 事件循环
  • BFC
  • Flex
  • Promise原理以及手写代码
  • vue响应式原理
  • vue虚拟dom & diff算法
  • 前端性能优化
  • 防抖和节流
  • HTTP缓存
  • 常见算法(排序洗牌等)

面试中遇到的高频题(跟上面会有重合)

  • 事件循环
  • 原型链
  • vue响应式原理
  • HTTP缓存
  • 防抖和节流
  • vue3解决什么问题
  • Vue 为什么不能检测数组和对象的变化,怎么处理(为什么通过索引操作数组不能触发响应式)
  • vue router原理
  • v-model实现原理
  • vue.nexttick
  • https的过程
  • 性能优化
  • promise(基本上要求可以手写Promise.all方法,这个问的最多)
  • async/await
  • 从输入url到看到页面经历的所有事情(越细越好,这道题知识点非常多)
  • 跨域形成原因以及解决方案
  • 深拷贝和浅拷贝(也会问到JSON.stringify JSON.parse这种方案的弊端)
  • 箭头函数和普通函数有什么区别
  • 最近在看什么新技术

低频但是需要注意的面试题

  • CSRF & XSS
  • chrome设置小于12px字体
  • node和浏览器事件循环有何不同
  • webpack tree shaking
  • map & set
  • 前端有哪些技术(腾讯面试题,面试官会顺着你说的技术一个一个展开问)
  • 实现一个call/bind(call,apply,bind区别)
  • get 和 post 的区别
  • BFC
  • yield
  • 如何给localStorage加上max-age功能
  • Object.defineProperties都有那些参数,以及参数解释
  • requestAnimation
  • 手写原型链和js各种继承模式
  • 让你重新做你做过的项目有什么可以改进的地方
  • 让一个元素消失的几种做法,有何不同,对子元素的影响
  • 如何遍历对象(接下来会问有何不同)
  • 搜索框输入需要注意的点(其实还是在问防抖)
  • 原生实现inserAfter
  • 事件委托应用场景,e.target和e.currentTarget区别
  • HTTP缓存,对应字段,cache-contron都有那些值
  • new过程都发生了什么

面试遇到的算法题

  • 排序算法(冒泡,快排)
  • 洗牌算法
  • v1.2.3 v0.3.0 这样的版本号比大小(找简单方法,不要随便写一个循环的版本)
  • 广度优先遍历
  • 用O(n)的复杂度合并两个有序数组
  • 数组生成树形结构
    var arr = [
        { id: 1, value: "节点1", p_id: 0 },
        { id: 2, value: "节点2", p_id: 1 },
        { id: 3, value: "节点3", p_id: 1 },
        { id: 4, value: "节点4", p_id: 2 },
        { id: 5, value: "节点5", p_id: 0 },
        { id: 6, value: "节点6", p_id: 5 },
        { id: 7, value: "节点7", p_id: 6 },
        { id: 8, value: "节点8", p_id: 6 },
    ];
    // 输出
    [{
        "id": 1,
        "value": "节点1",
        "p_id": 0,
        "children": [
            {
                "id": 2,
                "value": "节点2",
                "p_id": 1,
                "children": [
                    {
                        "id": 4,
                        "value": "节点4",
                        "p_id": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": 3,
                "value": "节点3",
                "p_id": 1,
                "children": []
            }
        ]
    },
    {
        "id": 5,
        "value": "节点5",
        "p_id": 0,
        "children": [
            {
                "id": 6,
                "value": "节点6",
                "p_id": 5,
                "children": [
                    {
                        "id": 7,
                        "value": "节点7",
                        "p_id": 6,
                        "children": []
                    },
                    {
                        "id": 8,
                        "value": "节点8",
                        "p_id": 6,
                        "children": []
                    }
                ]
            }
        ]
    }]
  • 数组L型输出
// L型输出
var arr = [

    ['1', '2', '3'],

    ['4', '5', '6'],

    ['7', '8', '9'],

];
// 输出大致顺序 1 4 7 8 9 2 5 6 3
  • 数组求排列组合
// 数组排列组合
var arr = [
    ['A', 'B', 'C'],
    [1, 2, 3],
    ['X', 'Y', 'Z'],
];
// 输出类似 A1X A1Y A1Z ...
  • 实现一个函数 find(obj, str),满足
var obj = {a:{b:{c:1}}};
find(obj,'a.b.c') //1
find(obj,'a.d.c') //undefined
  • 乒乓球比赛判断输赢(这个表达起来费劲,但是是个贴合实际开发场景的例子.不常见,但是不难)

这些是能回忆出来的部分,算法题普遍没有那么难,递归比较多,另外能用简单的方式就用简单的方式,这样才能凸显能力.

感悟和总结

  • 到手的offer,最后选择去百度了

    • 百度(具体部门就不说了)
    • 美团(优选)
    • 去哪儿(机票)
    • 作业帮(成人教育)
    • 天眼查(企服)
    • 一个小公司
  • 一定要避免类似面试官问你项目中遇到什么问题没,你说没问题都解决了这样的回答,基本必挂(网易二面经验)
  • 上面的面试题同一个问题会有不同的表述,所以要认真审题,搞清楚问的知识点,避免面试官问在第三层,而你只答在第一层这样的事情,太拉跨(腾讯一面经验)
  • 找工作是个概率的事情,面试的次数多了就会中
  • 内推有时会可能会有意想不到的加持(面作业帮的体会)
  • 日常我们要留意构建自己的基础知识体系,这样在面试准备的时候不用恶补太多基础知识

最后希望在找工作的同学保持心态,都能顺利找到理想的工作.

查看原文

Abiel 赞了文章 · 10月10日

2020年8月-9月前端找工作感受总结

记录一下自8月中旬离职之后准备以及找工作的经历,会提到个人感受到的招聘情况和一些前端面试题.会按照以下几个点来展开.
  • 背景信息(个人相关)
  • 整体找工作的感受
  • 整体节奏(时间安排)
  • 面试题整理(含算法题)
  • 感悟和总结

背景信息(个人相关)

普通二本,计算机专业,三年工作经验(一年爬虫,两年前端+全栈),前端岗位,技术栈主要是vue.js + node.js.简历上稍微好的点应该就是在猎豹的工作经历和爬虫的工作背景.整体看来就是很一般般的.

整体找工作感受

在经历整个过程之后对找工作前的一些点的思考,希望减少一些同学对今年就业形势的误判.

  • 整体就业形势的感受

因为受疫情影响,整体经济大形势是不好的,很多企业都在裁人,所以整体hc减少,工作不好找,这是在脉脉或者v2ex论坛里面很多人的反馈.但是我个人感受是今年招人的还是挺多的,就拿我的情况来说,我找工作一直用的boss直聘(boss招聘打钱),上面有300+条消息都看不过来(这个有点小诀窍,下面会提到),只有第一周我回了一些比较中意的hr简历,剩下的两周都没有再投简历.
结合约面试的情况来看,招聘主要集中在滴滴,美团,字节这三家.boss上发消息的10个里面有6个字节的.美团换着部门面面了三次,滴滴面了两次.面了三周的时间,基本上每天两场.最后陆陆续续拿到了6个offer.
后来我也分析了,整体hc减少是不假,但可能是10个小厂减少了20个hc,一个大厂涨了12个hc这样的情况,hc少了但是更集中了.
我的结论就是,有些事别老听别人说,要小马过河,自己去试试.
另外,我也有点困惑,今年找工作的这个情况到底是3年的工作经验带来的还是猎豹的工作经历带来的.

  • Github项目star数和个人博客对面试的影响

我在github上有一个500+ star的项目,还有平时有写博客的习惯,我从改简历开始就琢磨这些点该怎么表达更好,尽管我在每次自我介绍的时候都会提到在开发之余我会写写自己的项目和博客,但是目前github项目基本没有人问的,博客也只有百度五面和去哪儿二面的时候才有问到.
所以,这部分怎么说呢,属于锦上添花的,要搞好核心能力,不要把这些看太重,除非你这这两点非常非常优秀.

  • 关于视频面和现场面

视频面确实方便,面试成本低,写代码也更方便,但是呢,视频面节奏比较慢,基本上不会一面之后立马二面,我见过最快的视频面隔了一个小时进入下一面,其他的都隔着1-3天不等.不如现场面痛快,今年的现场面基本上都能当场轻松的拿到offer.

  • boss上遇到的一些问题

    • 我发现把boss的求职状态设置成[在职-暂不考虑]比设置成[离职-随时到岗]更有用,设置成[在职-暂不考虑]然后每天还正常的刷boss会收到更多的消息,个人感受,无实际依据.
    • boss上有一部分人,不是hr也是不是team leader,但是也会找你要简历,这部分八成是赚内推奖励的,我的简历就被莫名其妙的推过几次,对于这种情况我不置可否,但是如果你有确定的内推人的话,最好甄别一下这种情况,把内推奖励留给小伙伴.

整体节奏(时间安排)

第一周,主要用来回顾一下基础知识,看了下一些比较重要的知识点,没怎么看面试题,面试题基本上都是通过面试来查漏补缺的.同时开始约下周的面试.
第二周,开始面试,基本都是视频面,上午一场下午一场,好留出来时间整理遇到的问题.周六日基本不约面试,同时开始约下周的面试.这周的面试基本上全挂一面,惨不忍睹,当然也有拿offer的,作为保底.这不重要,重要的是查漏补缺,找出自己准备的和面试的差距.好有的放矢.
第三周,面试节奏放慢了一点,面试题都过了一遍了,所以这周基本上都能进二面了,也拿到了一些offer,这时候去推掉第二周拿到的offer.
第四周,这时候面试节奏更慢了,基本上是第三周面试进入比价靠后的面试和一些临时约的面试.这时候拿到的offer之后去推掉上周的offer.这周之后基本上面试结束,找工作告一段落,纠结纠结手里的offer,作出决定,然后等着入职就行了.

面试题整理

常规知识点

在第一周的时候整理基础知识的时候侧重回顾的一些知识点,这里列一下

  • js基础知识
  • 从输入url到获得页面经历的所有事情(越细越好)
  • 原型链
  • 继承
  • es6新特性
  • DOM事件和事件流
  • 盒子模型
  • 事件循环
  • BFC
  • Flex
  • Promise原理以及手写代码
  • vue响应式原理
  • vue虚拟dom & diff算法
  • 前端性能优化
  • 防抖和节流
  • HTTP缓存
  • 常见算法(排序洗牌等)

面试中遇到的高频题(跟上面会有重合)

  • 事件循环
  • 原型链
  • vue响应式原理
  • HTTP缓存
  • 防抖和节流
  • vue3解决什么问题
  • Vue 为什么不能检测数组和对象的变化,怎么处理(为什么通过索引操作数组不能触发响应式)
  • vue router原理
  • v-model实现原理
  • vue.nexttick
  • https的过程
  • 性能优化
  • promise(基本上要求可以手写Promise.all方法,这个问的最多)
  • async/await
  • 从输入url到看到页面经历的所有事情(越细越好,这道题知识点非常多)
  • 跨域形成原因以及解决方案
  • 深拷贝和浅拷贝(也会问到JSON.stringify JSON.parse这种方案的弊端)
  • 箭头函数和普通函数有什么区别
  • 最近在看什么新技术

低频但是需要注意的面试题

  • CSRF & XSS
  • chrome设置小于12px字体
  • node和浏览器事件循环有何不同
  • webpack tree shaking
  • map & set
  • 前端有哪些技术(腾讯面试题,面试官会顺着你说的技术一个一个展开问)
  • 实现一个call/bind(call,apply,bind区别)
  • get 和 post 的区别
  • BFC
  • yield
  • 如何给localStorage加上max-age功能
  • Object.defineProperties都有那些参数,以及参数解释
  • requestAnimation
  • 手写原型链和js各种继承模式
  • 让你重新做你做过的项目有什么可以改进的地方
  • 让一个元素消失的几种做法,有何不同,对子元素的影响
  • 如何遍历对象(接下来会问有何不同)
  • 搜索框输入需要注意的点(其实还是在问防抖)
  • 原生实现inserAfter
  • 事件委托应用场景,e.target和e.currentTarget区别
  • HTTP缓存,对应字段,cache-contron都有那些值
  • new过程都发生了什么

面试遇到的算法题

  • 排序算法(冒泡,快排)
  • 洗牌算法
  • v1.2.3 v0.3.0 这样的版本号比大小(找简单方法,不要随便写一个循环的版本)
  • 广度优先遍历
  • 用O(n)的复杂度合并两个有序数组
  • 数组生成树形结构
    var arr = [
        { id: 1, value: "节点1", p_id: 0 },
        { id: 2, value: "节点2", p_id: 1 },
        { id: 3, value: "节点3", p_id: 1 },
        { id: 4, value: "节点4", p_id: 2 },
        { id: 5, value: "节点5", p_id: 0 },
        { id: 6, value: "节点6", p_id: 5 },
        { id: 7, value: "节点7", p_id: 6 },
        { id: 8, value: "节点8", p_id: 6 },
    ];
    // 输出
    [{
        "id": 1,
        "value": "节点1",
        "p_id": 0,
        "children": [
            {
                "id": 2,
                "value": "节点2",
                "p_id": 1,
                "children": [
                    {
                        "id": 4,
                        "value": "节点4",
                        "p_id": 2,
                        "children": []
                    }
                ]
            },
            {
                "id": 3,
                "value": "节点3",
                "p_id": 1,
                "children": []
            }
        ]
    },
    {
        "id": 5,
        "value": "节点5",
        "p_id": 0,
        "children": [
            {
                "id": 6,
                "value": "节点6",
                "p_id": 5,
                "children": [
                    {
                        "id": 7,
                        "value": "节点7",
                        "p_id": 6,
                        "children": []
                    },
                    {
                        "id": 8,
                        "value": "节点8",
                        "p_id": 6,
                        "children": []
                    }
                ]
            }
        ]
    }]
  • 数组L型输出
// L型输出
var arr = [

    ['1', '2', '3'],

    ['4', '5', '6'],

    ['7', '8', '9'],

];
// 输出大致顺序 1 4 7 8 9 2 5 6 3
  • 数组求排列组合
// 数组排列组合
var arr = [
    ['A', 'B', 'C'],
    [1, 2, 3],
    ['X', 'Y', 'Z'],
];
// 输出类似 A1X A1Y A1Z ...
  • 实现一个函数 find(obj, str),满足
var obj = {a:{b:{c:1}}};
find(obj,'a.b.c') //1
find(obj,'a.d.c') //undefined
  • 乒乓球比赛判断输赢(这个表达起来费劲,但是是个贴合实际开发场景的例子.不常见,但是不难)

这些是能回忆出来的部分,算法题普遍没有那么难,递归比较多,另外能用简单的方式就用简单的方式,这样才能凸显能力.

感悟和总结

  • 到手的offer,最后选择去百度了

    • 百度(具体部门就不说了)
    • 美团(优选)
    • 去哪儿(机票)
    • 作业帮(成人教育)
    • 天眼查(企服)
    • 一个小公司
  • 一定要避免类似面试官问你项目中遇到什么问题没,你说没问题都解决了这样的回答,基本必挂(网易二面经验)
  • 上面的面试题同一个问题会有不同的表述,所以要认真审题,搞清楚问的知识点,避免面试官问在第三层,而你只答在第一层这样的事情,太拉跨(腾讯一面经验)
  • 找工作是个概率的事情,面试的次数多了就会中
  • 内推有时会可能会有意想不到的加持(面作业帮的体会)
  • 日常我们要留意构建自己的基础知识体系,这样在面试准备的时候不用恶补太多基础知识

最后希望在找工作的同学保持心态,都能顺利找到理想的工作.

查看原文

赞 113 收藏 72 评论 16

Abiel 发布了文章 · 9月18日

Vue3 Composition API

vue3.0在7月发布了rc版本,vue-cli4.5后也支持选择vue3作为备选版本可以体验了,vue3的正式版本相必也不远了。学不动了呀!!!!
相比vue2.0版本(Option API),Composition API(组合API)算是3.0的重大变更之一了。

概述

Composition API 主要灵感来源于React Hooks,目的是通过一组低侵入式的、函数式的 API,使得我们能够更灵活地「组合」组件的逻辑。

示例

<template>
  <div>{{count}}</div>
  <button @click="addCount">添加</button>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'App',
  setup () {
    const count = ref(0)
    const getCount = () => {
      count.value = Math.floor(Math.random() * 10)
    }
    const addCount = () => {
      count.value++
    }
    onMounted(() => {
      getCount()
    })

    return {
      count,
      addCount
    }
  }
});
</script>

``
Composition API顾名思义就是不再传入data、mounted等参数,通过引入的ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。

为什么需要

1.在组件比较复杂的情况下,可以将逻辑代码合到一起去,而不会被option强行分隔。这提高了代码质量的上限,同时也拉低了代码质量的下限。来自官方的一张对比图:

image

2.更好的进行复用。

在vue2中,想要复用部分逻辑的代码,都是通过mixin进去。但mixin进去的内容实际上很不直观,而且相同命名会被覆盖。而通过composition API,因为所有的方法都是引入的,可以将单独某个逻辑进行封装。例如对发送验证码倒计时功能进行封装。

<template>
  <input type="number" placeholder="请输入验证码">
  <button v-if="count">{{count}}秒后可重新发送</button>
  <button v-else @click="startCount">发送验证码</button>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

const userCountDown = () => {
  const count = ref(0)
  const countDown = (num: number) => {
    count.value = num
    num--
    if (num > 0) {
      setTimeout(() => {
        countDown(num)
      }, 1000)
    }
  }
  const startCount = () => {
    // get verifyCode
    countDown(60)
  }

  return { count, startCount }
}

export default defineComponent({
  name: 'Home',
  setup () {
    const { count, startCount } = userCountDown()
    return { count, startCount }
  }
});
</script>

3.更好的typescript支持。不会再往vue原型上添加很多内容,而是通过引入的方式,类型定义会更清晰。

setup

setup是vue新增的一个选项,它是组件内使用Composition API的入口。setup是在创建vue组件实例并完成props的初始化之后执行。因为setup会在option api解析之前被调用,所以setup中的this会与options中得完全不一样。为了避免混乱,在setup中不使用this。同时setup返回的值,可以在模板和其他option中使用。从设计上来说,vue官方是将所有的事情在setup里完成。setup返回值连接的是template模板与方法。

ref、reactive

既然不在传入data,那么将数据创建和监听响应式就需要通过vue暴露出来的功能 ref或reactive。两者有所区别,ref用于基础赋值类型的数据,而reactive用于引用类型的数据。

其中基础赋值类型的值,在setup方法中,需要用 .value的方式进行获取和修改。因为赋值类型的值如果return出去返回值,就失去了数据的双绑定。但是在template中,可以进行直接访问。

<template>
  <div>{{count}}
    <button @click="changeCount">添加</button>
  </div>
  <div>学生的姓名是:{{student.name}}</div>
  <div>学生的年龄是:{{student.age}}
    <button @click="changeStudentAge(20)">添加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  name: 'Home',
  setup () {
    const count = ref(0)
    const changeCount = () => {
      count.value = count.value + 1
    }
    const student = reactive({
      name: 'Bob',
      age: 12
    })
    const changeStudentAge = (age: number) => {
      student.age = age
    }
    return {
      count,
      changeCount,
      student,
      changeStudentAge
    }
  }
});
</script>

computed与watch

<template>
  <div>{{count}}</div>
  <div>{{doubleCount}}</div>
  <button @click="addCount">添加</button>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect, watch } from 'vue';

export default defineComponent({
  name: 'App',
  setup () {
    const count = ref(0)
    watch(count, () => { // 如多个则用数组的方式传入[count, count1]
      console.log('watch', count.value)
    })
    watchEffect(() => {
      console.log('watchEffect', count.value)
    })
    const addCount = () => {
      count.value++
    }
    const doubleCount = computed(() => {
      return count.value * 2
    })
    return {
      count,
      doubleCount,
      addCount
    }
  }
});
</script>

watch与watchEffect的差别是,watchEffect会立马执行,执行中被读取的响应式 数据会被观测。而watch只有在watch对象有变化时才会执行。

生命周期

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured
查看原文

赞 4 收藏 4 评论 2

Abiel 评论了文章 · 2018-12-19

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

Abiel 评论了文章 · 2018-12-13

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

Abiel 评论了文章 · 2018-12-02

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

Abiel 评论了文章 · 2018-12-02

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

Abiel 赞了文章 · 2018-11-12

三年前端,面试思考(头条蚂蚁美团offer)

小鱼儿本人985本科,软件工程专业,前端。
工作三年半,第一家创业公司,半年。
第二家前端技术不错的公司,两年半。
第三家,个人创业半年。
可以看出,我是个很喜欢折腾的人,大学期间也做过很多项目,非常愿意参与到产品中去。技术上勉强合格,不过独自负责过很复杂的前端项目,所以一般基础面试题还有项目经历都没有太大问题。然而面对一些框架的实现原理、源码、工具等研究较少,加上技术栈比较陈旧,对 React 和 Vue 了解较少,导致水平一般都在阿里 P6 级,无法突破到技术专家的评级(P7)。

核心诉求

在换工作的时候,我也认真思考了下一份工作的核心诉求——踏实成长。

具体的讲:

  1. 技术沉淀
  2. 视野+平台

所以,一开始就拒绝了所有初创公司,只看大平台,自己心中的第一优先级是蚂蚁金服、头条。

面试过程

一共面试了四家

  • 美团新零售
  • 贝壳装修
  • 蚂蚁网商银行
  • 头条商业化

面试结果

  • 美团 2-3+
  • 蚂蚁 6+
  • 头条 2-1
  • 贝壳因气场不合没有发 offer。

这里就不说具体的 offer 情况了,还蛮有竞争力的。

面试总结

技术面试

基础问题永远绕不开,前端技术面的考点无外乎:

事件原理,闭包,调用栈,Promise,ES6, 工程化,webpack, 性能优化,跨域,安全问题, React、Redux 思想,Virtual DOM,Diff 算法, 移动端布局,浏览器渲染原理,Event Loop 等

还有手写代码,主要考察一些基本 API 和 ES6 的使用。最常见是在 Array、String prototype 上写一个函数。

比如 'abcd'.f() => 'd-c-b-a'

还有一些常用的函数,比如 bind (好多家都考……),throttle, debounce 等

总之,这些都是前端绕不开的概念,也建议可以真正的夯实基础,多看书,多总结。在面试的时候,面试官通常也是看人下菜,『高级』的概念不清楚,面试官也会主动降低问题的难度。从我面试来看,基本上大厂对于候选人技术的定位还是蛮准的,在面试前我也知道我自己的技术水平就是阿里的P6,结果也是,美团 2-3,头条 2-1 评价基本一致。

至于薪水还需要考虑自己其他的软技能,这个会在业务面的时候重点考察。

有些公司还是会考一些算法,比如美团、头条。但是不多也不难。

如果平常刷过 leetcode 的话应该问题不大,对于前端同学来说 leetcode 上的 medium 题目应该就可以了。

具体面试题

这里分享一个很有意思的问题,来自头条:

100 * 100 的 Canvas 占内存多大?

感觉非常有新意,各位同学可以思考。

分享一个算法题:

给定一个数组排序,使得奇数位的值不大于相邻偶数位的值。

业务面试

一般第二面或者第三面的时候都会结合业务聊技术

我个人非常喜欢这一面,因为自己独自负责过非常复杂的前端项目,基本上从技术选型、前端工程化、架构、设计模式、复杂模块、性能、安全问题、团队管理等都可以扯到。所以这一面往往聊的比较嗨,一个项目就可以面1-1.5小时左右。

以蚂蚁举例,由于我自己面过两次蚂蚁,在聊二面的时候都是这么一个问题,从我个人的业务出发,基本上把项目开发中所有我自己认为可以展示自己思考的点都问了一遍,蚂蚁的面试官也会提出很多临时需求,主要查看面试者面对多变需求如何灵活调整技术方案。

在二面过程中,一定要熟悉自己的项目,尽可能多的参与到项目中去,也尽可能深的了解项目,当然,了解是一方面、表达是一方面、心态又是另一方面。

这三者层层递进,毕竟对于项目的了解是基础,这个需要我们深入业务,多思考,多总结。没事给新来的同学梳理业务,画画业务框架图,主动承担一些有技术难度的工作(比如性能优化、安全排查、工具上提升开发效率等),多分享自己的工作,多和产品经理撕逼,锻炼自己的表达总结能力。如果前两步做的比较好,就可以自信的展示自己的项目了,面对变化的需求,相信也可以快速的想出更好的解决方案。

基本上前两(三)面就可以对一个同学的技术水平有一个比较全面的了解,也方便公司进行技术评级。

终面

第三面一般都是老生常谈:过往工作的选择,换工作的原因,自己的职业规划,自己平常是如何提高自己的等。

这个虽然都差不多,但还是希望各位同学可以多多思考这些问题,毕毕竟工作的目的都是为了自己可以更好的成长,更多的创造价值,顺便获得一份不错的薪水。工作本身就是一种生活的态度,还是要认真面对自己的选择。

终面的时候,一般都会留有一个向面试官询问的阶段。 我自己总结了几个问题,可以分享给大家。

  • 目前咱们的业务,有一个什么样时间规划,这期间有哪些milestone?
  • 我的过往工作经历,有哪些是对咱们团队有帮助的?
  • 您对我在团队中的定位是怎么样的?
  • 对于团队成员的成长,您有哪些方案?

第一个问题主要是看一下目前的业务是处于一个什么阶段,也看一下业务负责人是否靠谱,毕竟面试时双向选择嘛。

第二个问题,主要是想让面试官夸夸自己……

第三个问题,主要是看一下面试官对自己的评价,定位又比评价来的更委婉而又深入一点,看看自己未来在团队中大概是什么定位,一位面试官对我说:我希望你在深入业务的同时,承担一些横向的职责。这就说明面试官对于我的协调能力很欣赏,我也可以暂且推断出我在面试官心中分量也蛮重的。

第四个问题,关系到日常工作中如何平衡业务开发和个人成长,看看这个老板是否真正关心下属的成长,也蛮重要的。

最后,最好留下每一位面试官的微信,毕竟面试时间有限,面试结束后,发一段感谢的话,感谢这次面试,肯定面试的内容很有水平,希望以后可以多多交流。一是表现自己的素养,二是可以看出面试官对于自己的态度。实在不去这家公司,也方便以后挖人嘛……

面试技巧

  1. 确定核心诉求、筛选目标公司
  2. 一份确保可以拿到 offer 的简历
  3. 打磨自我介绍
  4. 打磨项目介绍
  5. 面试录音(征得许可后)、面后复盘
  6. 私下与业务负责人互动
  7. offer 谈判

关于这些内容先不展开,下次接着聊~

一些思考

总结完了自己的面试过程,我也想说一下自己的一些其他思考。

每个程序员都是同学中的佼佼者,学习能力都应该是出类拔萃的。 工作中需要的知识技能又相对固定,面对每次工作和面试中碰到的问题,还是要踏踏实实的去理解和总结。

广度深度两手抓,一是主动承担业务,主动解决问题。二是技术栈也不要给自己设限,React, Vue, 客户端开发,Node,Canvas ... 撸起袖子就是干,当然拓展广度的同时,对于目前紧迫的业务涉及的技术也需要深入了解,买书,买视频,多多投资自己。

多多思考和总结平常的工作和技术。

乐于分享,一是督促学习,二是锻炼自己的表达总结能力,三是这些分享的材料都是自己学习能力的证明,四是找到同类,扩大影响力。

不要排斥猎头,在换工作前,我拜托女朋友挑选了一个口碑很不错的猎头,全程辅导。

更重要的是,有了第三方的介入,可以客观的帮助自己梳理自己的优势劣势,模拟面试,安排面试节奏,稳定情绪,还有谈价格的时候可以避免尴尬。总之,一个靠谱的猎头是个很不错的选择。

评论区的小玉是辅导我的猎头,非常 nice,推荐哦。

至于最后的选择,由于我的三份 offer 都很有竞争力,我自己也非常纠结,这个时候就应该不断的问自己:

  • 下一份工作,你想获得什么?
  • 几个选择,分别工作三年,你认为哪个更值得?
  • 你想在哪个领域深耕?

如果对于业务不是很了解,之前要到的联系方式就很重要,主动约终面的业务负责人再进行一些深入的沟通,真正做到没有疑虑了,再做出选择吧。

尾声
小鱼儿也即将加入新的团队,开始新的工作生活。希望自己可以不忘初心踏实成长。

也祝你找到心仪的工作~
小鱼儿建了前端面试交流群,加群的同学可以同学的微信,备注『面试进群』即可
image.png

查看原文

赞 59 收藏 46 评论 6

Abiel 评论了文章 · 2018-11-01

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

Abiel 评论了文章 · 2018-09-27

vue-cli3.0 环境变量与模式

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值  例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
       <%- VAR %> 用于HTML转义插值
       <% expression %> 用于JavaScript控制流    
    

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service buildvue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

查看原文

认证与成就

  • 获得 154 次点赞
  • 获得 18 枚徽章 获得 0 枚金徽章, 获得 5 枚银徽章, 获得 13 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-06-16
个人主页被 518 人浏览