前言

本文是vue源码贡献值Chris Fritz在公共场合的一场分享，觉得分享里面有不少东西值得借鉴，虽然有些内容我在工作中也是这么做的，还是把大神的ppt在这里翻译一下，希望给朋友带来一些帮助。

一、善用watch的immediate属性

这一点我在项目中也是这么写的。例如有请求需要再也没初始化的时候就执行一次，然后监听他的变化，很多人这么写：

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

上面的这种写法我们可以完全如下写：

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

前言

目前前端开发流行框架，react,vue,angular以及微信小程序等等，都是对数据的操作，其实es6中对字符串、数组、对象的扩展，对于我们更简单的操作数据提供了方便。今天主要总结一下我项目中主要用到的es6对这些扩展的应用。当然，es6对函数的扩展及其他应用也很重要，关于这些应用，请关注我后面的文章。

includes方法

在e6字符串和数组中，多了一个includes（）方法，这个方法我在项目中经常用到。

有人说includes（）方法完全可以用indexOf取代，但是indexOf有几个缺点：

一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。

二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

但是includes就可以解决这个问题！

[NaN].includes(NaN)
// true

该方法的几个例子：

前言

说到性能优化，我博客前面文章讲了不少，其实性能优化做的好坏，直接体现前端开发人员的水平。因此，很多面试中基本上都会提及这一点。今天主要借鉴淘宝网性能优化方式之一webp及Bigpipe 进行简单的讲解。

webp

打开淘宝网，假如你是chrome浏览器，你会发现，所有图片都是webp结尾的，淘宝网图片运用了webp。假如你是safari浏览器，看到图片就是jpg或者png了，淘宝网自动判断浏览器支持不支持webp，假如支持，则输出相应的图片格式！

看下图：

前言

本文主要记录如何用js提前中文拼音首字母的方法。封装一个函数，假如有需要的，可以直接拿去用。

原理

主要是根据中文的unicode码来进行的。主要是在收集的中文范围内查找，大家可以多收集一些。假如中文是多音字，那可能有点坑了！