关闭

vue实例生命周期易错点

标签: vue
74人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5301次
    • 积分:180
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类