知識點小記

這是一些小問題的記錄和總結：

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下就沒法解析，因此須要注意這個加號