vue2.0生命周期以及钩子函数使用规则及例子
2018-06-03 16:42
239 查看
vue是现在的热门前端框架之一，采用了虚拟dom，稍微介绍一下虚拟dom的概念。在使用原生js的时候，我们总数需要去获取dom元素，这样的话，每次要获取元素都要操作一次dom,我们就要执行一次，那么我们就要考虑如何减少操作的次数，虚拟dom就是为这个考虑而设计的。先简单介绍几个钩子函数，因为现在已经跟新到了vue2.0,因此，将主要介绍vue2.0的。beforeCreated:我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化是调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。created:在创建实例之后进行调用。mounted:我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery,所以也可以理解为jquery中的$(document).ready(function(){….}),相信讲解了这两个例子，也就理解了这个函数的功能了，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。beforeDestroy:该函数将在销毁实例前进行调用如下代码为6个Vue2.0钩子函数案例，直接可以打开使用<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script>
window.onload = function () {
new Vue({
el:'#box',
data:{
msg:'welcome to vue'
},
beforeCreate(){
console.log('组建实例刚刚被创建，属性都没有');
},
created(){
console.log('实例已经创建成功，属性已经绑定成功');
},
beforeMount(){
console.log('模版编译之前')
},
mounted(){
console.log('模版已经编译完成')
},
beforeUpdate(){
console.log('组建更新之前')
},
updated(){
console.log('组建更新之后')
},
beforeDestroy(){
console.log('组建销毁之前')
},
destroyed(){
console.log('组建销毁之后')
},
methods:{
update(){
this.msg = '大家好'
},
destroy(){
this.$destroy();
}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组建" @click="destroy">
{{msg}}
</div>
</body>
</html>
阅读更多
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue 2.0中生命周期与钩子函数的一些理解
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
- vue2.0+elementui 兼容ie以及使用部分内容没有渲染成功
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0生命周期和钩子函数的一些理解
- asp.net 2.0生命周期 以及Page_Load Page_Init方法使用原理
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路 ----- 生命周期和钩子函数
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23
- Vue2.0生命周期和钩子函数的一些理解