vue中父子组件先后渲染_Vue渲染父子组件时需要注意的点

title: Vue渲染父子组件时需要注意的点

date: 2018-11-19 18:55:58

tags: [Vue]

categories: Vue

前言

我在边学 Vue 边做 轱辘UI 的项目中，写 row 组件 的测试用例时碰到了一个问题。

测试用例需要渲染两个组件，它们是父子关系，但测试下来子组件并没有拿到父组件的 gutter 属性，发现原来是因为 Vue 异步的渲染。

之后通过 setTimeout 和 done() 解决了这一问题，之后便有了这篇博客。

分析

Vue到底是怎样渲染组件到页面的？看例子来分析吧

我们自己会怎么写：

// 这是个同步的过程

var div = document.createElement('div')

document.body.appendChild(div)

而 Vue 不是这么简单的：

var div = document.createElement('div')

var child = document.createElement('div')

// 步骤一，会触发child的mounted事件，这是异步的

div.appendChild(child)

// 步骤二，会触发div的mounted事件，这也是异步的

document.body.appendChild(div)

// 步骤三，这行代码会先于上面两行执行，因为这是同步的，而此时div里还没有child

console