Vue.js中讓人容易忽略的API有哪些

小編給大家分享一下Vue.js中讓人容易忽略的API有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

nextTick

nextTick 是 Vue.js 提供的一個函數，并非瀏覽器內置。nextTick 函數接收一個回調函數 cb，在下一個 DOM 更新循環之后執行。比如下面的示例：

<template>
  <div>
    <p v-if="show" ref="node">內容</p>
    <button @click="handleShow">顯示</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        show: false
      }
    },
    methods: {
      handleShow () {
        this.show = true;
        console.log(this.$refs.node);  // undefined
        this.$nextTick(() => {
          console.log(this.$refs.node);  // <p>內容</p>
        });
      }
    }
  }
</script>

當 show 被置為 true 時，這時 p 節點還未被渲染，因此打印出的是 undefined，而在 nextTick 的回調里，p 已經渲染好了，這時能正確打印出節點。

nextTick 的源碼在github.com/vuejs/vue/b…，可以看到，Vue.js 使用了 Promise、setTimeout 和 setImmediate 三種方法來實現 nextTick，在不同環境會使用不同的方法。

v-model 語法糖

v-model 常用于表單元素上進行數據的雙向綁定，比如 <input>。除了原生的元素，它還能在自定義組件中使用。

v-model 是一個語法糖，可以拆解為 props: value 和 events: input。就是說組件必須提供一個名為 value 的 prop，以及名為 input 的自定義事件，滿足這兩個條件，使用者就能在自定義組件上使用 v-model。比如下面的示例，實現了一個數字選擇器：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('input', this.currentValue);
      }
    }
  }
</script>

props 一般不能在組件內修改，它是通過父級修改的，因此實現 v-model 一般都會有一個 currentValue 的內部 data，初始時從 value 獲取一次值，當 value 修改時，也通過 watch 監聽到及時更新；組件不會修改 value 的值，而是修改 currentValue，同時將修改的值通過自定義事件 input 派發給父組件，父組件接收到后，由父組件修改 value。所以，上面的數字選擇器組件可以有下面兩種使用方式：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

或：

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

如果你不想用 value 和 input 這兩個名字，從 Vue.js 2.2.0 版本開始，提供了一個 model 的選項，可以指定它們的名字，所以數字選擇器組件也可以這樣寫：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: 'number',
      event: 'change'
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('number', this.currentValue);
      }
    }
  }
</script>

在 model 選項里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因為這兩個名字在一些原生表單元素里，有其它用處。

.sync 修飾符

如果你使用過 Vue.js 1.x，一定對 .sync 不陌生。在 1.x 里，可以使用 .sync 雙向綁定數據，也就是父組件或子組件都能修改這個數據，是雙向響應的。在 Vue.js 2.x 里廢棄了這種用法，目的是盡可能將父子組件解耦，避免子組件無意中修改了父組件的狀態。

不過在 Vue.js 2.3.0 版本，又增加了 .sync 修飾符，但它的用法與 1.x 的不完全相同。2.x 的 .sync 不是真正的雙向綁定，而是一個語法糖，修改數據還是在父組件完成的，并非在子組件。

仍然是數字選擇器的示例，這次不用 v-model，而是用 .sync，可以這樣改寫：

<template>
  <div>
    <button @click="increase(-1)">減 1</button>
    <span >{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit('update:value', this.value + val);
      }
    }
  }
</script>

用例：

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

看起來要比 v-model 的實現簡單多，實現的效果是一樣的。v-model 在一個組件中只能有一個，但 .sync 可以設置很多個。.sync 雖好，但也有限制，比如：

• 不能和表達式一起使用（如 v-bind:title.sync="doc.title + '!'" 是無效的）；

• 不能用在字面量對象上（如 v-bind.sync="{ title: doc.title }" 是無法正常工作的）。

$set

在上一節已經介紹過 $set，有兩種情況會用到它：

由于 JavaScript 的限制，Vue 不能檢測以下變動的數組：

• 當利用索引直接設置一個項時，例如：this.items[index] = value;

• 當修改數組的長度時，例如：vm.items.length = newLength。

由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除。

舉例來看，就是：

// 數組
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.items[1] = 'x';  // 不是響應性的
    }
  }
}

使用 $set：

// 數組
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.$set(this.items, 1, 'x');  // 是響應性的
    }
  }
}

以對象為例：

// 對象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.item.b = 2;  // 不是響應性的
    }
  }
}

使用 $set：

// 對象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.$set(this.item, 'b', 2);  // 是響應性的
    }
  }
}

另外，數組的以下方法，都是可以觸發視圖更新的，也就是響應性的：

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

還有一種小技巧，就是先 copy 一個數組，然后通過 index 修改后，再把原數組整個替換，比如：

handler () {
  const data = [...this.items];
  data[1] = 'x';
  this.items = data;
}

計算屬性的 set

計算屬性（computed）很簡單，而且也會大量使用，但大多數時候，我們只是用它默認的 get 方法，也就是平時的常規寫法，通過 computed 獲取一個依賴其它狀態的數據。比如：

computed: {
  fullName () {
    return `${this.firstName} ${this.lastName}`;
  }
}

這里的 fullName 事實上可以寫為一個 Object，而非 Function，只是 Function 形式是我們默認使用它的 get 方法，當寫為 Object 時，還能使用它的 set 方法：

computed: {
  fullName: {
    get () {
      return `${this.firstName} ${this.lastName}`;
    },
    set (val) {
      const names = val.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

計算屬性大多時候只是讀取用，使用了 set 后，就可以寫入了，比如上面的示例，如果執行 this.fullName = 'Aresn Liang'，computed 的 set 就會調用，firstName 和 lastName 會被賦值為 Aresn 和 Liang。

以上是“Vue.js中讓人容易忽略的API有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！