vue之生命周期（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated）

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件

创建
　　1，创建一个vue实例对象
　　
　　 2，初始化一些默认的声明周期函数和默认的事件　-> beforeCreate()
　　　　这时候，data和methods中的数据都没初始化
　　　
　　 3，初始化数据 -> created（）
　　　　data和methods中的数据都被初始化好了
　　
　　 4，编译模板 -> beforeMount()
　　　　即 <div id=“app”>{{msg}} </div> -> 在内存中生成一个编译好的最终模板字符串 -> 把这个模板字符串渲染为内存中dom
　　　　注意：只是在内存中渲染好了模板，并没有把模板挂载到页面上去，此时页面还是旧的, 简单的说结果就是在内存中渲染了一个 <div id=“app”>ok</div> 的dom元素,但是页面上还是 <div id=“app”>{{msg}} </div>
　　　　
　　 5，将编译好的模板真实提换到页面中去 -> mounted()
　　　　即将内存中渲染好的dom元素即 < div id=“app”>ok< /div>已经提换了页面上的 < div id=“app”>{{msg}} < /div>

运行
　　 6，当数据改变时即完成data(model层) ->view(视图层)的更新
　　　　 6.1 先在内存中渲染一份最新的dom树 -> beforeUpdate()
　　　　　　页面上的数据还是旧的，但是data中的数据都是最新的，页面和最新的数据尚未保存同步
　　　　 6.2 将最新的dom树重新渲染到真实的页面上去 -> updated()
　　　　　　页面上的数据和data中的数据都是最新的，页面和最新的数据保存同步
　　　　　　
销毁
　　 7，销毁之前，实例上的data和所有methods，以及过滤器、指令。。。都处于可用状态，还未真正销毁 -> beforeDestroy()
　　 8，销毁，实例上的data和所有methods，以及过滤器、指令。。。都处于不可用状态，还未真正销毁 -> destroyed()


<!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>Document</title><script src="./lib/vue-2.4.0.js"></script>
</head><body><div id="app"><input type="button" value="修改msg" @click="msg='No'"><h3 id="h3">{{ msg }}</h3></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: 'ok'},methods: {show() {console.log('执行了show方法')}},beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它// console.log(this.msg)// this.show()// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化},created() { // 这是遇到的第二个生命周期函数// console.log(this.msg)// this.show()//  在 created 中，data 和 methods 都已经被初始化好了！// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作},beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中// console.log(document.getElementById('h3').innerText)// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串},mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了// console.log(document.getElementById('h3').innerText)// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动},// 接下来的是运行中的两个事件beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)console.log('data 中的 msg 数据是：' + this.msg) */// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步},updated() {console.log('界面上元素的内容：' + document.getElementById('h3').innerText)console.log('data 中的 msg 数据是：' + this.msg)// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的}});</script>
</body></html>

vue之生命周期（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated）相关推荐

【Vue】生命周期， created，mounted, methods , computed , watched
生命周期: 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程. beforecreate : 一般使用场景是在加 loading事件的时候 created :处于loadi ...
vue生命周期（created，mounted具体用于哪些场景）、三种存储的区别
vue生命周期什么是生命周期呢,就好像是人有生老病死一样,vue组件也有从创建到消亡的一系列过程.这个过程就叫做vue的生命周期 vue的生命周期可分为三大阶段,每个阶段都有对应的函数,叫做钩子,又 ...
Vue.js 生命周期
2019独角兽企业重金招聘Python工程师标准>>> 每个 Vue 实例在被创建之前都要经过一系列的初始化过程 vue在生命周期中有这些状态, beforeCreate,creat ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
Vue008_ Vue实例生命周期
生命周期流程图 vue 生命周期分析 1) 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2) 更新状态: this. ...
Vue基础——生命周期基础指令组件技术
Vue 一. 创建vue项目 tianqideMBP:try-vue tianqizhao$ vue init webpack hello? Project name hello ? Project ...
教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
Vue的生命周期有哪些，第一次加载会触发哪些钩子函数
Vue的生命周期有哪些,第一次加载会触发哪些钩子函数 beforeCreate created 创建初始化数据事件 beforeMount mounted 载入 DOM渲染完成 beforeUpda ...
vue生命周期beforeCreate()前做了什么
概念当我们执行 new Vue()开始到被创建完成,vue需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了 ...
vue避免重新渲染_小白也能懂的VUE的生命周期探寻
Vue生命周期作为vue的核心之一,生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期,生命周期的内容,如何利用生命周期出发,做一些探究生命周期的理解官方:Vue 实例从创建到销毁的过 ...

vue之生命周期（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated）

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

vue之生命周期（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated）相关推荐

最新文章

热门文章