Vue 开发必须知道的36个技巧(小结)

本文总结了36个Vue开发中必须知道的技巧，内容涵盖了组件开发、状态管理、路由导航、性能优化等多个方面的技巧。

组件开发篇

Tip1：合理使用computed

computed是一个非常强大的特性，但也有很多约束，比如它会缓存计算结果；还要注意它不应该有任何副效应，也不应该修改任何数据。所以，在使用computed 计算属性时，需要明确计算结果并不会因为其他数据变化而重新计算，最好只计算纯粹的数据，以避免浪费计算资源。

Tip2：渲染列表时使用key属性

在Vue中，key 是用来唯一标识每个节点的属性。如果列表项的顺序被改变了，那么 Vue 将会尽可能的尝试重新利用已渲染的元素，并且仅对关键属性进行修改来减少DOM操作。

例子：假设我们有一个可以被删除的列表，并且我们删除了它的第一个元素。”

<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="item.id">
      {{ item.content }}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </ul>
</template>

Tip3：在组件中接受数据和事件

在Vue中，可以在组件上定义 props 属性，它可以帮助我们在父组件中向子组件传递数据。同时也可以通过this.$emit(eventName)方法向父组件派发事件。

例子：用父组件向子组件传递内容，同时子组件触发一个事件。

// 父组件
<template>
  <child-component :msg="message" @send="handleSend"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    },
    methods: {
      handleSend(data) {
        console.log(data);
      }
    }
  }
</script>

// 子组件
<template>
  <div>
    {{ msg }}
    <button @click="send">触发事件</button>
  </div>
</template>

<script>
  export default {
    props: ['msg'],
    methods: {
      send() {
        this.$emit('send', 'Hello Parent')
      }
    }
  }
</script>

状态管理篇

Tip4: 了解Vuex

Vuex 是Vue中官方的状态管理库，它提供了一个集中式的、响应式的存储状态管理方案。它内部集成了Vue的依赖追踪机制，使得我们在应用内管理和响应状态变化非常方便。

Tip5: 在Vuex中使用mapXXX系列API优化代码

在使用 Vuex 管理应用状态时，当我们需要读取和修改状态的时候，常常需要使用mapXXX系列的辅助函数，比如 mapGetters、mapMutations 或 mapActions 来简化代码和减少键入。这些辅助函数通过对我们所需的状态，mutation 和 actions 进行映射，在组件中提供了更直接且易于阅读的 API。

例子：在组件中使用 Vuex 和 mapXXX API。

<template>
  <div>
    <h3>{{ $store.getters.getFullName }}</h3>
    <button @click="updateUserInfo">修改信息</button>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';

  export default {
    computed: {
      ...mapGetters([
        'getFullName'
      ])
    },
    methods: {
      ...mapMutations([
        'updateName'
      ]),
      updateUserInfo() {
        this.updateName('Tom');
      }
    }
  }
</script>

路由导航篇

Tip6: 更改默认的路由切换动画

在Vue Router中，如果您希望更改默认的路由切换动画而不是使用默认的 transition-group，您可以选择使用 beforeEnter 与 leave 钩子，并且在 css 中定义动画。

Tip7: 路由组件懒加载

为了优化应用程序的性能和减少初始加载时间，我们可以尝试路由组件懒加载，这样只有在路由被调用时才会加载该组件，而非一次性把所有组件都加载出来。我们可以使用 Vue 内置的语法 import() 去实现。

例子：实现路由组件懒加载

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

export default new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

应用优化篇

Tip8: 避免重复渲染相同的数据

当需要在组件中间隔一定时间重复渲染数据时，我们可以选择使用 shouldComponentUpdate 确保只有在 state 更新时才进行渲染操作。

例子：避免重复渲染相同的数据

class Button extends Component {
  shouldComponentUpdate(nextProps) {
    const { onClick, value } = this.props;
    return nextProps.onClick !== onClick || nextProps.value !== value;
  }

  render() {
    const { onClick, value } = this.props;
    return <button onClick={onClick}>{value}</button>;
  }
}

Tip9: 设置合理的事件监听器

在Vue中，当一个组件还原成 DOM 时，它注册的事件监听器不会自动清除。这可能会导致内存泄漏和其它类似的问题。所以我们需要在组件销毁前清除监听器以释放资源。

export default {
  mounted() {
    window.addEventListener('scroll', this.onScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      //...
    }
  }
}

以上是本文对Vue开发必须知道的36个技巧做了详细的介绍，希望对您有所帮助。