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(); 
  } 
}  

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!