形而上的小鱼

总得学点后端吧

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 我发送了事件" 
                }
            }
   })
   //直接写标签
   <mycard></mycard>
var mycomponent = Vue.extend({
            template:'<div>发送事件</div>',
            props:['obj'],
            data: function(){
                return {
                    id: "我是子组件card1 我发送了事件" 
                }
            }
});
var mycard = new mycomponent();
//命令式挂载,box决定挂载的位置
mycard.$mount("#box");
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/toyourwindy/article/details/77970480
文章标签: vue
个人分类: vue.js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭