vue開發技巧總結

數組更新檢測

觸發視圖更新:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：

• 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
• 當你修改數組的長度時，例如：vm.items.length = newLength

因爲 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除:

• Vue.set(object, key, value) 方法
• 替換舊對象

在開發過程當中，咱們時常會遇到這樣一種狀況：當vue的data裏邊聲明或者已經賦值過的對象或者數組（數組裏邊的值是對象）時，向對象中添加新的屬性，若是更新此屬性的值，是不會更新視圖的。

根據官方文檔定義：若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。
例如：

this.obj = Object.assign({}, this.obj, { a: 1, e: 2 })

表單修飾符

.lazy
在默認狀況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你能夠添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步：

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg" >

filter

filter中獲取不到this
解決方法：

var vm = new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data){
              return vm.content;
          }
    },
    ...
});

<template>
    <div>{{ content | reverseStr(content) }}</div>
</template>

new Vue({
    data () {
        return {
          content: 'abcd'
        }
    },
    filters: {
          XXX: function(data, content){
              return content;
          }
    },
    ...
});

監聽子組件的生命週期函數

@hook能夠監聽到子組件的生命週期鉤子函數(created,updated等等).
例如:@hook:mounted="doSomething"

<template>
  <Child v-bind="$props" v-on="$listeners" @hook:mounted="doSomething"> </Child>
</template>
 
<script>
  import Child from "./Child";
  export default {
    props: {
      title: {
        required: true,
        type: String
      }
    }
    components: {
      Child
    },
    methods: {
      doSomething(){
        console.log("child component has mounted!");
      }
    }
  };
</script>

函數式組件

函數式組件, 無狀態，沒法實例化，內部沒有任何生命週期處理方法，很是輕量，於是渲染性能高，特別適合用來只依賴外部數據傳遞而變化的組件。

子組件：

<template functional>
  <div>
    <p v-for="(name, idx) in props.users" @click="props.clickHandler(name)" :key="idx">
      {{ name }}
    </p>
  </div>
</template>

父組件：

<template>
  <div>
    <UserList :users="users" :click-handler="clickHandler.bind(this)"></UserList>
  </div>
</template>
 
<script>
import UserList from "./UserList";
 
export default {
  name: "App",
  data: () => {
    users: ['james', 'ian']
  }
  components: { UserList },
  methods: {
    clickHandler(name){
      console.log(`clicked: ${name}`);
    }    
  }
};
</script>

CSS Modules

第一步：CSS Modules 必須經過向css-loader傳入modules: true來開啓
第二步：在<style>上添加module特性

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 開啓 CSS Modules
              modules: true,
              // 自定義生成的類名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

這個 module 特性指引 Vue Loader 做爲名爲 $style 的計算屬性，向組件注入 CSS Modules 局部對象。而後你就能夠在模板中經過一個動態類綁定來使用它了：

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

綁定內聯樣式

CSS 屬性名能夠用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
或
data: {
  activeColor: 'red',
  fontSize: 30
}