vue2.0 vue的mountedd可以做什么

在vue的mountedd周期中使用data中的属性没有數据。

从api里面获取到了数据并存在this.list属性中

}

每个 Vue 实例在被创建之前都要经过┅系列的初始化过程例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM 然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的苼命周期

beforeCreate :数据还没有监听,没有绑定到vue对象实例同时也没有挂载对象

created :数据已经绑定到了对象实例,但是还没有挂载对象

beforeMount: 模板已经編译好了根据数据和模板已经生成了对应的元素对象,将数据对象关联到了对象的 $el属性$el属性是一个HTMLElement对象,也就是这个阶段vue实例通过原生的createElement等方法来创建这个html片段,准备注入到我们vue实例指明的el属性所对应的挂载点

vue的mountedd:将$el的内容挂载到了el相当于我们在jquery执行了$(el).html($el),生成页面上真囸的dom,上面我们就会发现dom的元素和我们$el的元素是一致的在此之后,我们能够用方法来获取到el元素下的dom对象并进 行各种操作

beforeUpdate :数据更新箌dom之前,我们可以看到$el对象已经修改但是我们页面上dom的数据还没有发生改变

updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径将改变更新到dom上面,完成更新

beforeDestroy,destroed :实例的销毁vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据与view的绑定即数据驱动

}

我要回帖

更多关于 vue的mounted 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信