vue实例生命周期易错点

1、为什么组件也有生命周期？它和实例生命周期有什么关系？组件和实例又是什么关系？

当我说生命周期时，我想到了两个生命周期，分别是实例生命周期和组件生命周期。官方文档《组件系统》一章，清楚地说明了:

每个页面都是一个组件树：



组件是实例的扩展，扩展了一些选项。组件是一块可重用的代码。

“在 Vue 里，一个组件本质上是拥有预定义选项的一个 Vue 实例”。预定义选项，如生命周期钩子等。

说到预定义选项，就必须看一看构造器了。

当我们创建一个实例的时候，new了一个 Vue()。Vue是个构造器，各种选项所组成的对象是它的参数。

var vm = new Vue({
//各种选项
})

如果我想扩展构造器，这样写：

var mycomponent = Vue.extend({
//一些扩展选项
});
var myvm = new mycomponent();

扩展实例没有挂载点，需要手动挂载：

<div id="app">
<div id="box"></div>
</div>
-------------------------------
//手动挂载,会覆盖掉box：
new mycomponent().$mount('#box');
//或者这样手动挂载
new mycomponent({ el:"#box" });

下面是组件和扩展实例的关系，扩展实例就是它的底层实现：

Vue.component("mycard",{
template:'<div>发送事件</div>',
props:['obj'],
data: function(){
return {
id: "我是子组件card1 我发送了事件"
}
}
})
//直
4000
接写标签
<mycard></mycard>

var mycomponent = Vue.extend({
template:'<div>发送事件</div>',
props:['obj'],
data: function(){
return {
id: "我是子组件card1 我发送了事件"
}
}
});
var mycard = new mycomponent();
//命令式挂载，box决定挂载的位置
mycard.$mount("#box");