一定要知道的 25 个 Vue 技巧

一定要知道的 25 个 Vue 技巧攻略

Vue.js 是一个轻量级的 JavaScript 框架，其强大的数据绑定和组件化设计使得它成为了在前端开发中最热门的框架之一。在本文中，我将会向你介绍一些常用的 Vue 技巧，以帮助你更好的利用 Vue 的能力。

技巧 1：使用 v-cloak 防止 FOUC

FOUC (Flash of Unstyled Content) 是一个常见的问题，它会导致在使用 Vue.js 的时候，页面的原始 HTML 代码在浏览器中加载完之前就被展示出来了，这显然不是一个好的用户体验。为了解决这个问题，我们可以使用 v-cloak 指令可以防止这种情况的发生：

<div v-cloak>
  {{ message }}
</div>

<style>
  [v-cloak] {
    display: none;
  }
</style>

技巧 2：使用 .sync 更新子组件数据

当我们在父组件中更新一个子组件的数据时，就需要在子组件的 computed 函数中使用 get() 和 set() 方法来设置这个数据，但这样很不方便。在 Vue.js 2.3.0 以上的版本中，我们可以使用 .sync 修饰符来实现这个目的，这将使得一个子组件的数据双向绑定：

<template>
  <div>
    <h3>{{ title }}</h3>
    <input v-model="title"/>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props: {
      title: {type: String, default: ''}
    },
    methods: {
      updateTitle(t) {
        this.$emit('update:title', t);
      }
    },
    watch: {
      title: function (val) {
        this.updateTitle(val);
      }
    }
  }
</script>

<!--在父组件中，我们可以像下面这样使用这个子组件-->
<template>
  <div>
    <child :title.sync="title"></child>
  </div>
</template>

<script>
  export default {
    name: 'parent',
    data() {
      return {
        title: 'Vue技巧',
      }
    }
  }
</script>

这里我们需要注意，在子组件中使用 updateTitle 方法来把 title 内容传递到父组件中，而在父组件中使用 .sync 来自动实现子组件数据的双向绑定。

技巧 3：使用 v-model 指令和修饰符自定义表单

使用 v-model 指令，我们可以方便地实现表单数据的双向绑定，但是如果我们需要一个定制化的表单，我们还需要使用一些修饰符：

<template>
  <div>
    <input v-model="name"/>
    <input v-model.number="age"/>
    <input v-model.trim="text"/>
    <input v-model.lazy="content"/>
  </div>
</template>

<script>
  export default {
    name: 'custom-form',
    data() {
      return {
        name: '',
        age: 0,
        text: '',
        content: ''
      }
    }
  }
</script>

这里我们使用了 v-model.number 来将输入内容转为数字， v-model.trim 来去除两边的空格，v-model.lazy 来延迟数据更新。这些修饰符可以使得数据更加精确，也能够提高用户体验。

这里仅列举了这个攻略的前三个技巧，剩下的技巧请参考原文链接来学习。