Vue2学习（3）

子组件索引

尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID。例如：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

当 ref 和 v-for 一起使用时，ref 是一个数组，包含相应的子组件。

字符串模板(string template)

• JavaScript 内联模板字符串
• .vue 组件

非字符串模板(non-string template)

• DOM 模板

单元素/组件的过渡

Vue 提供了 transition 外层包裹容器组件(wrapper component)，可以给下列情形中的任何元素和组件添加进入/离开(enter/leave)过渡

• 条件渲染（使用 v-if）
• 条件展示（使用 v-show）
• 动态组件
• 组件根节点

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

render

每个元素都是一个节点。每一段文字都是一个节点。甚至注释也都是节点！节点只是页面的一部分。正如在一棵家谱树中一样，每个节点都可以有子节点（也就是说，每个节点都可以包含多个子节点）。

有效地更新所有这些节点可能是很困难的，但幸运的是，你无需手动执行。相反，只需在 Vue 模板中，在页面中添加你需要用到的 HTML：

<h1>{{ blogTitle }}</h1>

或者通过一个 render 函数：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在这两种场景中，Vue 会自动保持页面更新，更确切地说，在 blogTitle 修改时，也同样能够及时更新。

virtual DOM

Vue 通过实现一个 virtual DOM，来跟踪那些「真正需要对 DOM 所做的修改」。仔细看看这一行：

return createElement('h1', this.blogTitle)

createElement 实际返回的是什么呢？准确地说，返回的并非一个真正的 DOM 元素。可能更确切地说，应该将其命名为 createNodeDescription（译注：createNodeDescription，创建节点描述），包含「哪些节点应该由 Vue 渲染在页面上」的相关描述信息，也包括所有子节点的相关描述。我们将以上这个节点描述称为 “virtual node”（译注：virtual node，虚拟节点），通常缩写为 VNode。”virtual DOM” 就是由 Vue 组件树构建出来的，被称为整个 VNodes 树。