关闭

vue实例生命周期易错点

标签: vue
117人阅读 评论(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
查看评论

Vue实例中的生命周期

vue生命周期,官网上说的够详细;你在网上搜也是一搜一大片。 在这推荐下面这篇vue生命周期文章: http://www.cnblogs.com/fly_dragon/p/6220273.html但是我一直没有弄明白的有以下2点: Vue的生命周期到底是干什么的。 我在什么时候使用哪个事件钩子 ...
  • it_liusi
  • it_liusi
  • 2017-07-31 17:54
  • 193

Vuejs之路之--对实例生命周期的理解

用Vue框架,熟悉它的生命周期可以让开发更好的进行。 首先先看看官网的图,详细的给出了vue的生命周期: 它可以总共分为8个阶段: beforeCreate(创建前), created(创建后), beforeMount(载入前), mounted(载入后), beforeUpd...
  • codesWay
  • codesWay
  • 2017-08-02 22:02
  • 977

浅谈Vue的生命周期模型

浅谈Vue的生命周期模型 Vue实例从创建到销毁的过程,就是生命周期。 Vue的生命周期包括:开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些JavaScr...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-05-10 21:46
  • 2506

Vuejs学习系列(十四)---vue实例的生命周期(二)

Vue提供的可以注册的钩子都在上图片的红色框标注。 他们是: · beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。 · cre...
  • bwf_erg
  • bwf_erg
  • 2017-03-14 17:59
  • 173

vue js 的生命周期和钩子函数

用Vue框架,熟悉它的生命周期可以让开发更好的进行。 首先先看看官网的图,详细的给出了vue的生命周期: 简单理解为 它可以总共分为8个阶段: beforeCreate(创建前), created(创建后), beforeMount(载入前),...
  • isWangx
  • isWangx
  • 2017-06-14 10:55
  • 1691

VUE--事件和生命周期

一、事件冒泡 方法一、使用event.cancelBubble = true来组织冒泡            methods:{        show1:function(ev){ ...
  • zhangrenliang
  • zhangrenliang
  • 2017-03-21 11:49
  • 1329

vue里面ref和生命周期的理解

1. ref vue里面增加一个DOM节点的写法。这是比较通俗的说法,vue里面讲的是ref是给元素或者子组件注册引用信息的,值得注意的是引用信息注册在父组件的$refs对象上。如果在普通的DOM元素使用,引用指向DOM;子组件指向组件实例。 注册后,vue会进行销毁。但如果不使用就不要注册了。...
  • qq_24122593
  • qq_24122593
  • 2017-10-19 09:43
  • 452

Vue.js学习 Item3 -- 构造器与生命周期

构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例:var vm = new Vue({ // 选项 })一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。在实例化 Vue 时,需要传...
  • i10630226
  • i10630226
  • 2016-07-07 23:47
  • 3681

Vue入门系列之Vue实例详解与生命周期

 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了...
  • cmdos
  • cmdos
  • 2016-12-25 21:09
  • 989

vue生命周期的理解

Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
  • haochangdi123
  • haochangdi123
  • 2017-10-26 21:22
  • 145
    个人资料
    • 访问:6983次
    • 积分:197
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类