Vue 生命钩子函数
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 生命钩子函数相关的知识，希望对你有一定的参考价值。
参考技术A <body><script src="../libs/vue.js"></script>
<div id="app">
message
<h3 id="h3">message</h3>
<button @click="message = 'No'">改变数据</button>
</div>
<script>
var app = new Vue(
el: '#app',
data:
message: 'ok',
,
methods:
show()
console.log("-----show-----被调用")
,
//第一个生命周期钩子函数：在实例完全初始化之前，data，methods初始化之前调用
beforeCreate ()
console.log('=====beforeCreate=====')
// console.log(this.message)
// this.show()
,
//初始化data，和初始化methods
//第二个生命周期钩子函数： 是data methods初始化完成之后调用的函数
created ()
console.log('=====created=====')
// console.log(this.message)
// this.show()
,
//vue开始编译模板，vue指令开始执行，此时，在内存中渲染了模板，没有挂载到页面上。
//第三个生命周期钩子函数：模板已经在内存中渲染了，但是还没有挂载到页面上
beforeMount ()
console.log('=====beforeMount=====')
//通过Id查找某个元素
//innerText 拿到标签中的全部文本内容
// var text = document.getElementById('h3').innerText
// console.log('beforeMount',text)
,
//内存中的模板，替换到了页面中
//第四个生命周期钩子函数：已经挂载到页面上
mounted ()
console.log('=====mounted=====')
// var text = document.getElementById('h3').innerText
// console.log('mounted',text)
,
//创建阶段：1,2,3,4（4个钩子函数）
//mounted执行完之后，Vue实例已经创建完成。创建的最后一个生命周期钩子是mounted
//运行阶段：5,6（两个钩子函数）
//最少执行0次，最多执行无数次
//第五个生命周期钩子函数： 页面还没有更新，，数据已经更新了
beforeUpdate ()
console.log('=====beforeUpdate=====')
// var text = document.getElementById('h3').innerText
// console.log('text',text)
//
// console.log('message',this.message)
,
//现根据data中的新数据，重新渲染内存中的DOM，在渲染到页面
//第六个生命周期钩子函数：页面和数据都已经更新了
updated ()
console.log('=====updated=====')
var text = document.getElementById('h3').innerText
console.log('text', text)
console.log('message', this.message)
,
//销毁阶段：7,8
//第七个生命周期钩子函数：Vue实例进步销毁阶段，所有的data和methods、指令。。。都处于可用的状态
//没有执行真正的销毁过程
beforeDestroy ()
console.log('=====beforeDestory=====')
,
//第八个生命周期函数：组件已经被销毁，所有的data、methods、指令都已经不可以
destroyed ()
console.log('=====destroyed=====')
//练习： 创建Vue执行什么生命周期钩子函数
// =====beforeCreate=====
// =====created=====
// =====beforeMount=====
// =====mounted=====
// 修改data里的数据都执行什么生命周期钩子函数
// =====beforeUpdate=====
// =====updated=====
)
</script>
</body>
Vue生命周期及钩子函数
参考技术A 其实生命周期就是指Vue实例创建的过程，从开始到销毁的过程。在这个过程中呢又分:开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列...在这个过程中呐，有一些方法（函数）会被触发执行，也就是给了我们可以去编写逻辑的机会。下面附一张Vue生命周期图
Vue生命周期一共有11个钩子函数，图中一共有8个钩子函数。在Vue实例被创建之后，Vue挂载元素阶段会有4个钩子函数，它们是自动执行的且只执行一次，数据更新阶段有2个钩子函数会被执行，销毁阶段有2个钩子会被执行，下面我们来详细看一看这8个钩子函数。
在实例初始化之后，数据观测 (dataobserver) 和 event/watcher 事件配置之前被调用。访问不到数据
在实例创建完成后被立即调用 可以获取数据 (常用作发送异步请求获取数据)
在挂载开始之前被调用可以访问数据编译模板结束，虚拟dom已经存在
可以拿到节点和数据 常用实例被挂载后调用.
注意: mounted 不会 保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 Vue实例 .$nextTick ：在Vue实例上有一个方法，它会延迟执行，直到Dom加载完成.
补充:ref表示节点this.$refs.ref的标识 就可以拿到节点了
数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
常用的监控数据的变化由于数据更改导致的虚拟DOM重新渲染和打补丁
补充:watch是监控特定数据的变化，updated是监控组件里所有数据的变化
实例销毁之前调用，在这一步，实例仍然完全可用。 常用于清理资源，防止内存的泄露
实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
被keep-alive 缓存的组件激活时调用。
被keep-alive 缓存的组件停用时调用。
当捕获一个来自子孙组件的错误时被调用。
此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
那么Vue的11个声明周期函数就给大家简单介绍完毕了！你学会了嘛！！！
【详情请参照】 https://cn.vuejs.org
以上是关于Vue 生命钩子函数的主要内容，如果未能解决你的问题，请参考以下文章