Vue如何制作高度模块化的程序（三）避免直接访问DOM 在 Vue 应用程序上编程时，一定要避免直接访问 DOM。相反，

这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

9. 避免直接访问DOM

在 Vue 应用程序上编程时，一定要避免直接访问 DOM。相反，您应该使用$refs，我发现这是访问DOM的理想方式，它更易于维护，并且您不再需要依赖特定的类名。

10. 向一个元素添加多个类

关于 Vue 的最好的事情之一就是，向元素添加动态类非常方便。

< div :class=”{'red': isError}” >< / div >

一种不同但最常见和最简单的方法是;

< div :class="{'red': isError, 'text-bold': isActive }” >< / div >

11. 使用选择器

用代码更好地解释它：

//我们有这个选择器
export const language = (state) => state.userConfig.language;
//我们需要方法放在我们的一个变量中
// Bad
[GET_GAMES]({ commit, rootState }) {
   const lang = rootState.userConfig.language;
}
// Good
[GET_GAMES]({ commit, rootState }) {
   const lang = language(rootState);
}

12. 验证你的Props

我不确定这种做法是否容易，我很早就知道了，但这是要遵循的最佳实践之一。在处理大型项目时，无法记住在道具中使用的类型、格式和约定。因此，以类似的方式考虑以下示例，您可以编写 prop 验证。

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

13. 适当的结构

Vue 没有任何默认的方式来构建应用程序，除非你使用的是 Nuxt。因此，它要求你和你的团队成为一个非常有组织的开发人员来创建一个可以理解的结构，因为以后再改会更有压力，更麻烦。

14. 自己清理。

在设计SPA时，建立内存使用率是相当明显的;如果不消除实例、间隔、自定义事件，则您的应用可能会变慢或无响应。

这可能看起来像这样：

created() {
  refreshUserLoginTokenInterval(); //在创建时，我们开始一个interval来刷新
},
beforeDestroy () {
  destroyUserLoginInterval(); //在组件被销毁之前，我们清理
}

15. 总结

上面列出的是关键优势和 Vue.js最佳实践，我相信每个开发人员都有自己的最佳实践，如果你认为我说的有错误，或者你有更好的方法，那么请随时在下面发表评论。

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持