Vue生命周期

构建客
• 阅读 882

Vue生命周期
常见vue生命周期钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destory

beforeCreate
此时没有 el对象和 data数据
created
已经存在data数据 如果data改变视图会发生变化
可以在此方法进行数据处理
此阶段 判断是否有 el 即 el:‘#app’ 没有就结束
如果有会调用
vm.$mount(el)
去挂载dom结点

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--html中修改的-->
    <h1>{{message + '这是在outer HTML中的'}}</h1>
  </div>
</body>
<script> var vm = new Vue({
    el: '#app',
    template: "<h1>{{message +'这是在template中的'}}</h1>", //在vue配置项中修改的
    data: {
      message: 'Vue的生命周期'
    } </script>
</html>

先检查 template是否存在 如果存在模板编译成render函数,
没有将外部html作为模板渲染
所以综合排名优先级:
render函数选项 > template选项 > outer HTML.

beforeMount和mounted 钩子函数间的生命周期
为vue对象添加$el成员
mounted之后就渲染dom 可以在此方法调用方法和属性
beforeUpdate钩子函数和updated钩子函数间的生命周期

当组件数据变化 会调用beforeUpdateupdated钩子函数
beforeUpdate 监听数据变化
updated 进行渲染
beforeDestroy和destroyed钩子函数间的生命周期

点赞
收藏
评论区
推荐文章
郜小超 郜小超
4年前
史上最全前端面试题(但是没有答案 自己百度 手动狗头!)
Vue面试题生命周期函数面试题1.什么是vue生命周期2.vue生命周期的作用是什么3.第一次页面加载会触发哪几个钩子4.简述每个周期具体适合哪些场景5.created和mounted的区别6.vue获取数据在哪个周期函数7.请详细说下你对vue生命周期的理解?vue路由面试题1.mvvm框架是什么?2.vuerout
明月 明月
3年前
vue常见面试题
1.有使用过vue吗?说说你对vue的理解?2.说说你对SPA单页面的理解,它的优缺点分别是什么?如何实现SPA应用呢?3.什么是双向绑定?原理是什么?4.请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?5.Vue组件之间的通信方式都有哪些?6.vshow和vif有什么区别?使用场景分别是什
Alex799 Alex799
4年前
Vue面试题
1、Vue的生命周期?beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)挂载中可以操作DOM,创建中不能操作DOM;常用挂载或者创建生命周期就行了2、methods和computed的区别?
LinMeng LinMeng
3年前
面试题汇总
2021/10/30pfyh1、举例说几个ES6新特性2、map和filter的区别3、浏览器缓存机制4、vue渲染机制5、生命周期钩子函数6、组件传值7、箭头函数的特点/this指向/有没有arguments/如何获取入参8、虚拟DOM树9、Diff算法10、Vuex11、vue的两种路由模式hash和history的特点12、bind,call,appl
Easter79 Easter79
3年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
CuterCorley CuterCorley
4年前
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Tankard825 Tankard825
4年前
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。5.1.Vue实例初始
马丁路德 马丁路德
4年前
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图:vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。onLoad
解析$nextTick魔力,为啥大家都爱它?
1.为什么需要使用$nextTick?首先我们来看看官方对于$nextTick的定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。由于vue的试图渲染是异步的,生命周期的created()钩子函数进行的DO
融云IM即时通讯 融云IM即时通讯
7个月前
融云IM干货丨uni-app 生命周期有哪些?
uniapp的生命周期分为应用生命周期、页面生命周期和组件生命周期三类:应用生命周期应用生命周期函数需要在App.vue中声明,主要包含以下函数:onLaunch:当uniapp初始化完成时触发(全局只触发一次)。onShow:当uniapp启动,或从后台