</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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实例，得到ViewModel
var 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就表示实例已经被完全创建好了
//此时如果没有其他操作，这个实例就在内存中一动不动
//如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行。
//只要执行完了mounted，就表示整个Vue实例已经初始化完毕。
//此时组件已经脱离了创建阶段，进入到了运行阶段
},
//组件运行阶段的生命周期函数：beforeUpdate和updated，会根据data数据的改变，有选择性的触发0次到多次
beforeUpdate(){ //表示界面还没有被更新
console.log('界面上元素的内容:' + document.getElementById('h3').innerText)
console.log('data中的msg数据是: ' + this.msg)
//当执行beforeUpdate时，页面中显示的数据还是旧的，此时data数据最新的，页面尚未和data保持同步
}
//updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
//当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段；
//当执行beforeDestroy的时候，实例身上所有的data和methods，以及过滤器、指令……都处于可用状态，还没有真正执行销毁过程
});
</script>
</body>
</html>
VUE——生命周期函数组建运行和销毁
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
element-ui中的el-table-column加v-if不生效，表头错乱
項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"
Html Webpack Plugin: ReferenceError: process is not defined
修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>