Vue.js的注意事项与技巧

Vue.js 是一个很棒的框架。然而，当你开始构建一个大型 JavaScript 项目的时候，你将对 Vue.js 感到一些困惑。这些困惑并不是来自框架本身，相反 Vue.js 团队会经常调整一些重要设计策略。

相对于 React 和 Angular，Vue.js 面向一些不同水平的开发者。它更加的友好，不管是对初学者还是经验丰富的老手。它并不隐藏一些 DOM 操作，相反它与 DOM 配合的很好。

这篇文章更像是一个目录，列举了我在 Vue.js 的初学路上遇到一些问题和技巧。理解这些关键性的设计技巧，有助于我们构建大型的 Web 应用。

写这篇文章的时候是 2018 年 5 月 18 日，下面这些技巧依然是有效的。但是框架升级，或者浏览器底层或者 JS API 发生改变时，他们可能会变得不是那么有用。

译者注：尽管 Vue.js 3 即将到来，但是下面的技巧大部分是有用的，因为 3 的版本并不会改变一些上层 API ，最大的特性可能是底层数据 Observer 改有 proxy 实现，以及源码使用 typescript 构建。

1、为什么 Vue.js 不使用 ES Classes 的方式编写组件

如果你使用过类似于 Angular 的框架或者某些后端 OOP 语言后，那么你的第一个问题可能是：为什么不使用 Class 形式的组件?

Vue.js 的作者在 GitHub issues 中很好的回答了这个问题：

Use standard JS classes instead of custom syntax?

为什么不使用 Class 这里有三个很重要的原因：

ES Classes 不能够满足当前 Vue.js 的需求，ES Classes 标准还没有完全规范化，并且总是朝着错误的方向发展。如果 Classes 的私有属性和装饰器(当前已进入 Stage 3)稳定后，可能会有一定帮助。

ES Classes 只适合于那些熟悉面向对象语言的人，它对哪些不使用复杂构建工具和编译器的人不够友好。

优秀的 UI 组件层次结构一般都是组件的横向组合，它并不是基于继承的层次结构。而 Classes 形式显然更擅长的是后者。

译者注：But，Vue.js 3.0 将支持基于 Class 的组件写法，真香。

2、如何构建自己的抽象组件?

如果你想构建自己的抽象组件(比如 transition、keep-alive)，这是一个比构建大型 web 应用更加疯狂地想法，这里有一些关于这个问题的讨论，但是并没有什么进展。

Any plan for docs of abstract components?

译者注：在 Vue.js 内部组件(transition、keep-alive)中，使用了一个 abstract 属性，用于声明抽象组件，这个属性作者并不打算开放给大家使用，所以文档也没有提及。但是如果你要使用也是可以的，那么你必须深入源码探索该属性有何作用。

但是不要害怕，如果你可以很好地理解 slots ，你就可以构建自己的抽象组件了。这里有一篇很好的博客介绍了要如何做到这一点。

Writing Abstract Components with Vue.js

译者注：下面是《在 Vue.js 中构建抽象组件》的简单翻译

抽象组件与普通组件一样，只是它不会在界面上显示任何 DOM 元素。它们只是为现有组件添加额外的行为。

就像很多你已经熟悉的 Vue.js 的内置组件，比如：` `、``、``。

现在展示一个案例，如何跟踪一个 DOM 已经进入了可视区域 ，让我们使用 IntersectionObserver API 来实现一个解决这个问题的抽象组件。

(完整代码在这里：[vue-intersect](https://github.com/heavyy/vue-intersect))

// IntersectionObserver.vue 
export default { 
  // 在 Vue 中启用抽象组件 
  // 此属性不在官方文档中， 可能随时发生更改，但是我们的组件必须使用它 
  abstract: true, 
  // 重新实现一个 render 函数 
  render() { 
    // 我们不需要任何包裹的元素，只需要返回子组件即可 
    try { 
      return this.$slots.default[0]; 
    } catch (e) { 
      throw new Error('IntersectionObserver.vue can only render one, and exactly one child component.'); 
    } 
 
    return null; 
  }, 
  mounted () { 
    // 创建一个 IntersectionObserver 实例 
    this.observer = new IntersectionObserver((entries) => { 
      this.$emit(entries[0].isIntersecting ? 'intersect-enter' : 'intersect-leave', [entries[0]]); 
    }); 
 
    // 需要等待下一个事件队列，保证子元素已经渲染 
    this.$nextTick(() => { 
      this.observer.observe(this.$slots.default[0].elm); 
    }); 
  }, 
  destroyed() { 
    // 确保组件移除时，IntersectionObserver 实例也会停止监听 
    this.observer.disconnect(); 
  } 
}  

（编辑：ASP站长网）