知识点小记

这是一些小问题的记录和总结：

1. vue serve和build

在vue-cli3.0中能够快速的开发原型。
经过全局安全@vue/cli-service-global

npm i -g @vue/cli-service-global

那么就能够使用vue serve xx.vue起服务和vue build xx.vue打包。
固然打包的话还有更多的配置项：命名，打包模式等。

2. es6箭头函数

咱们来看一下箭头函数的效果:

var num = 10
var getNum =  function() { return this.num; }
var getNum2 = () => {return this.num;}

var c = {
  num: 11
}

console.log(getNum.bind(c)()) // 11


console.log(getNum2.bind(c)()) // 10

箭头函数是没法经过bind、apply、call来修改做用域的
这个须要切记。
由于咱们习惯使用箭头后，会忘记为何使用。在有些场景，咱们自定义的函数，可能会由于习惯而使用箭头函数；
而使得做用域错误。因此切记在须要的时候使用箭头函数。

若是咱们在vue的生命周期使用箭头函数会怎么样？

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  },
  created: () => {
    console.log(this) // undefined
  },
  created () {
    console.log(this) // vue实例
  },
  methods: {
  }
}
</script>

很明显，若是使用箭头函数的话，那么this也没法被修改，那么就会undefined。

3. 控件库中多语言是如何实现的

之前我开发控件库的时候，是把设计中文相关的内容都经过外部传入，那么这样就不会设计多语言了。
可是若是是一些固定的词汇，那么每次经过外面传入是会比较繁琐的。
这边hui或hui-pro是经过本身定义一个工具库。
这个工具库的内容就是先判断this存在不存在，存在的话检测this对象中是否有对语言对象i18n，若是存在那么就使用i18n的语言进行转换。
若是不存在。那么直接使用本地控件库的键值对的形式读取。

4 calc计算

vue中可能有会用计算calc，看以下

修改前
computed: {
    outSpanMaxWidth() {
      // 默认改成了 200px, 须要手动还原
      if (!this.maxWidth) return;
      return `calc(${this.maxWidth} ${this.closable ? '+ 40px' : ''})`;
    }
  }
修改后
computed: {
outSpanMaxWidth() {
  // 默认改成了 200px, 须要手动还原
  if (!this.maxWidth) return;
return `calc(${this.maxWidth} ${this.closable ? '+ 40px' : ''})`; 
}
}

咱们能够看到this.closable为ture的时候
outSpanMaxWidth为calc('200px+40px')
为false的时候calc('200px+')
这个在谷歌浏览器是能够正常解析的，可是ie下就没法解析，因此须要注意这个加号