5.27 computed和watch，过滤器以及全局mixin，数组去重，console.log查看vue，webpack基础插件和loader，webpack命令行打包，loader err

1、computed和watch的触发场景
一直关心为何computed能充当计算属性的作用，而watch为何会时时监听。
那watch就不用了，类似Object.defineProperty()的set方法，双向绑定，一旦变化则触发watch。

2、过滤器是对mustache中的值进行处理的函数。
vue将其扩展成一个filters接口。
小demo如下：

// 模板中   
  <div class="item-total">
    Item total: <span class="total-price">{{totalPrice | currency('$')}}</span>  // 竖线表示采取过滤
  </div>
// script的methods中，默认val就是mustache中的值，后边再跟参数
filters: {
	currency(val, currency, decimals) {
		let newVal
		// 经处理
		return newVal
}

注：一般过滤器为spa通用方法，故可以全局注册过滤器，或者全局mixin。

// 1、在main.js入口文件中,直接丢代码
import { currency } from './common/js/utils'

Vue.filter('currency', currency)

-----------------------------------------------------------------------------------
// 2、或者在main.js入口文件在，直接丢mixin
import { currency } from './common/js/utils'

Vue.mixin({
  filters: {
    currency
  }
})

3、数组去重方法
Sam老师的方法，对象添加方法原型(较精准)

/* eslint-disable no-extend-native */
Array.prototype.pushWithoutDuplicate = function () {
  // 当页面清空缓存后,第一次点击无法正确判断
  for (let i = 0; i < arguments.length; i++) {
    const arg = arguments[i]
    if (this.indexOf(arg) === -1) {
      this.push(arg)
    }
  }
}

河畔一角老师的方法，es6去重（适用相同类型数据）
注: new Set(arr) 本身是Set对象，需要扩展运算拆解并合并成数组，才能使用。

var arr = ['a','b','a','ab','ab']
var arr2 = [...new Set(arr)] // 结果 ['a','b','ab']

4、console.log控制台查看vue的各项数据。app是根实例#app

5.1、webpack的基础插件
html-webpack-plugin // 解析html插件，多用于多页面生成模板页面
extract-text-webpack-plugin // 抽取插件，比肩css-loader，比如将css抽离入style文档头部，也可以抽离文本
uglifyjs-webpack-plugin // 对js进行合并压缩
commonsChunkPlugin // 抽取公共的库、模块，多用于多页面
clean-webpack-plugin // 打包之前的文件清除
copy-webpack-plugin // 文件的复制

5.2、webpack的loader加载器
css-loader // 解析css文件
sass-loader / node-sass，less-loader，stylus / stylus-loader // 解析各种预编译语法
file-loader，url-loader // 解析图片文件 png,svg,jpg,gif
postcss-loader，autoprefixer // 给css加前缀

6、webpack命令行如何打包构建
要想使用webpack的命令，首先需要全局安装webpack和webpack-cli
cnpm i -g webpack
cnpm i -g webpack-cli
再在本地项目中安装dev依赖
cnpm i webpack -D
cnpm i webpack-cli -D
即可在命令行运行webpack命令

注：构建基本webpack项目除了安装loader还需要安装基础的babel插件

cnpm i -S vue-loader babel-preset-env babel-core
//  安装完毕后 执行webpack命令，继续报错，提示需要安装 vue-template-compiler

7、You may need an appropriate loader to handle this file type.
学习webpack初期，可能是vue-loader版本过高原因，出现了vue内解析lang="scss"失败的问题，最终还是直接使用css编译，去掉了lang=“scss”。webpack打包才成功。

注：webpack打包的js插件，需要Vue.use()注册才能使用。