javoski / blog Goto Github PK

Vue 现在这么受欢迎，官网上清晰简洁的文档功不可没，但是文档中所描述的并不是 Vue 的全部，所以接下来我就来说一说 Vue 文档没有提到的东西吧。

1. DOM 事件其实并没有自动移除

在官网入门教程 Vue 2.0 Event Handling 的最下面是这么说的

When a ViewModel is destroyed, all event listeners are automatically removed. You don’t need to worry about cleaning it up yourself.

但其实 2.x 版本的 Vue 并不会在 ViewModel 被销毁后(即生命周期hook: destroyed被调用之后)自动移除 DOM 上的 listeners，而是交由浏览器自带的垃圾回收机制去做这些事情。不信可以看看这个例子。

2. 什么时候触发 update ?

按照官方文档的说法，当 data 改变的时候，就会触发 update，其中 update 的流程大概是：
beforeUpdate --> rerender --> updated

这种说法不能说是错的，只是不够严谨。严格来说，应该是 ViewModel 的 render 方法所依赖的 state 发生改变的时候才会触发 update，通俗点说就是只有 view 中有用到的响应式数据( data, prop, computed 等)改变了，才会 update。

3. 动态组件 & is 的用法

Vue 文档中关于动态组件部分的描述大概就是：使用保留的 <component> 元素配合动态绑定的 is 属性就可以在同一个挂载点切换不同的组件。

<component v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</component>

这里面动态的关键在于 is 属性，而不在于 <component> ，换句话说，就是随便你用什么标签，只要有 is 属性，它就算是动态组件, 当然你也可以静态地给 is 赋值一个字符串，不过这样它就只能表示某一个组件，失去了动态的意义了。
上面的例子把 component 改为 div ，效果是一样的，实际上不只是 <div>, 其他任何标签都可以，比如 <whatever>。

<div v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</div>

同时 is 不仅可以用于渲染 Vue 组件，也可以渲染原生的 DOM 元素。在 Vue 文档入门教程关于 Render Functions 的部分，有这样一个例子，它的需求是根据 level 值实现大小动态( h1 ~ h6 )的标题：

<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

为了解决代码繁琐、结构冗余的问题，文档里面自然用了 render function：

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

其实就单单这个例子来说，也可以使用 is + template 的方法，比 render function 还要简洁直观：

<script type="text/x-template" id="anchored-heading-template">
  <component :is="'h' + level">
    <slot></slot>
  </component>
</script>

4. 抽象组件

我在 Vue 官方文档中好像没有找到关于抽象组件( abstract component )的内容，其实 Vue 内置的 keep-alive 和 transition 都是属于抽象组件。

IMO - In my opinion - 在我看来
IMHO - In my humble opinion - 恕我直言
FYI - For your information - 仅供参考
AFAIK - As far as I know - 据我所知
a.k.a. - also known as - 又称，亦名
WDYT - What do you think - 你怎么看
TBH - To be honest - 老实说
AFAICT - As far as I can tell
FWIW - For what it's worth - 不管是否有用
AMA - Ask My Anything (reddit)