Vue学习笔记之生命周期

1、简述对vue的生命周期的理解？

const vm = new Vue(){
}
//在创建一个Vue实例的时候，从创建-->渲染（载入）-->运行-->销毁的过程，是Vue实例的生命周期

 

2、Vue生命周期具体包括哪些内容？

（1）创建阶段：

         beforCreate：在创建之前，不能获取任何信息，实际应用较少。

         created:  创建完成之后，才能够获取数据。经常在里面调用methods里面的方法用来请求获取数据。

 

（2）渲染阶段：Vue实例中的内容渲染到 HTML 页面。

         beforeMount： 渲染之前，可以获取数据，仍然不能操作DOM。（操作DOM是指的HTML对象，如：<p></p>，<div></div>等对象）

         mounted:  完成渲染，浏览器中有 UI 结构，可以操作DOM。

 

（3）运行阶段： （用户操作之间的交互）

         beforeupdate:   数据改变，但是页面上的UI数据是旧的。 data数据更新，在代码层面 HTML 取的数据还是旧的（console.log可以打印查看。）

         updated:   已经更新数据，DOM结构完成渲染；数据变化之后为了能够操作到最新的DOM结构，需要将代码写到 updated 里面。

 

（4）销毁阶段：

         beforedestroy:  在Vue实例销毁之前，组件还可以使用，里面的函数、数据、等内容都在。

         destroyed:    在Vue销毁之后，组件不存在，包括里面的函数，对象等。

//写法例子如下，这些周期也被称为钩子函数
 created(){
        console.log('created'+this.masege);
      
     },

 

3、el 选项对Vue生命周期的影响？

如果没el指定操作的DOM，会去查找有没有使用Vue.$mount()方法；两者都没有，那生命周其在created完成之后不会继续往下执行，及不会渲染（载入），在HTML页面上就是空白的，不会显示任何内容。

//el写法
new Vue({
    el: '#app',
    render: h => h(App),
})


//Vue.$mount()方法
new Vue({
    render: h => h(App),
}).$mount('#app')

 

4、生命周期暂停后继续运行与销毁？

//调用方法来继续运行或销毁Vue实例
//继续运行
Vue.$count()
//销毁
Vue.$destroy()

 

以上内容我在学习Vue过程中的理解，如有讲述的不正确的地方，欢迎评论区和私信指正，大家一起进步（抱歉~）