Vue2.2.0+新特性整理及注意事项

Vue.js是一个流行的JavaScript框架，它是一个数据驱动、构建用户界面的渐进式框架。Vue2.2.0是Vue.js的一个重要版本，引入了一些新特性以及注意事项。本文将详细讲解Vue2.2.0+新特性整理及注意事项。

新特性

新增v-model指令的修饰符

在Vue2.2.0中，v-model指令新增了修饰符 lazy 和 number。lazy 修饰符表示在change事件中而不是input事件中更新数据。number 修饰符表示将绑定的值转换成数值类型。

<input v-model.lazy="msg"> <!-- 在 change 事件中更新 -->
<input v-model.number="age"> <!-- 将绑定的值转换成数值类型 -->

新增修饰符v-once

Vue2.2.0中新增了一个修饰符 v-once，它表示一次性地绑定数据。在这个元素（或组件）及其所有的子元素中，数据只绑定一次，不会被重新计算。

<span v-once>{{ msg }}</span> <!-- 数据只绑定一次，不会被重新计算 -->

新增自定义事件名的限制

Vue2.2.0中，为了防止团队成员编写重复的自定义事件名，新增了限制：自定义事件名必须以小写字母开头。如果事件名有连字符，那么连字符后的第一个字母也必须是小写字母。

Vue.component('my-component', {
  methods: {
    // 自定义事件名必须以小写字母开头
    onClick: function () {
      // ...
    }
  }
})

注意事项

按键修饰符不能用于非键盘事件

在Vue2.2.0之前，按键修饰符 keyup.enter 可以用于任意元素（例如<div>和<span>等），并可用于模拟鼠标点击事件。而在Vue2.2.0中，按键修饰符只能用于键盘事件，不能用于非键盘事件。

<!-- 按键修饰符只能用于键盘事件 -->
<div v-on:keyup.enter="submitForm"></div>

$dispatch和$broadcast不推荐使用

Vue2.2.0将 $dispatch 和 $broadcast 方法从API中废除，并不推荐使用。建议使用 $emit 方法代替。

this.$dispatch('my-event', arg1)
this.$broadcast('my-event', arg1)

this.$emit('my-event', arg1)

示例说明

v-model指令的修饰符示例

<template>
  <div>
    <!-- 在 change 事件中更新 -->
    <input v-model.lazy="msg">

    <!-- 将绑定的值转换成数值类型 -->
    <input v-model.number="age">
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      age: 0
    }
  }
}
</script>

自定义组件示例

<template>
  <div>
    <!-- 数据只绑定一次，不会被重新计算 -->
    <my-component v-once :message="msg"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

在上面的示例中，我们引入了一个名为 MyComponent 的组件，并在父组件中使用了 v-once 修饰符来使数据只绑定一次而不被重新计算。子组件的数据将不会响应式更新。