理解生命周期和钩子函数的调用在工程中十分重要,关于Vue生命周期的理解我推荐这一遍详解Vue生命周期 。写得真不错,浅显易懂,任何初学者一看都能明白是怎么一回事。今天我当然不是来讲生命周期的,我要将的是嵌套组件的创建顺序,嵌套组件件钩子函数的执行顺序,最后是销毁顺序。闲话少说,直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试Vue</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app" style="border: 1px solid red;padding: 10px">
<div >
根组件
<button @click="handleClick">根组件销毁</button>
</div>
<a-component></a-component>
<b-component></b-component>
</div>
<script>
Vue.component('a-component' , {
template : `