Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1、每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
2、本篇将介绍组件创建期间的4个钩子函数，分别为：
①：beforeCreate，这是我们遇到的第一个生命周期函数，其在实例未被创建出来之前执行。此时Vue实例中的date和methods属性数据还未被初始化。
②：created，其执行的时候，Vue实例中的date和methods属性数据已被初始化完成。
③：beforeMount，其执行的时候，模板已经在内存中编辑完成了，但是还未渲染在页面中。
④：mounted，其执行的时候，内存中的模板已经挂载到了页面中，用户可以在浏览器中看到渲染好的页面了。
下面我们来逐个验证一下。
3、beforeCreate
<body>
<div id="app"></div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : '生命周期'
},
methods : {
show(){
console.log('show函数被执行');
}
},
beforeCreate(){
console.log(this.msg);
this.show();
}
});
</script>
执行结果如下：
从浏览器控制台可以看出，data里的msg值为undefined，methods里的show函数找不到，说明钩子函数beforeCreate执行的时候，data和methods还未被初始化。
4、created
<body>
<div id="app"></div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : '生命周期'
},
methods : {
show(){
console.log('show函数被执行');
}
},
created(){
console.log(this.msg);
this.show();
}
});
</script>
</body>
运行结果如下：
从结果可以看出data里msg值已经获取，methods里的show函数也被执行，说明钩子函数created执行的时候，data和methods已被初始化。
5、beforeMount
<body>
<div id="app">
{{ msg }}
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : '生命周期'
},
methods : {},
beforeMount(){
console.log(document.getElementById("app").innerText);
}
});
</script>
</body>
运行结果如下：
这里我们在钩子函数beforeMount里输出了div的文本内容，从结果可以看出页面展示了正确内容，但是控制台只是输出了原样字符串，说明执行此函数的时候，Vue模板数据并没有渲染到页面中。
6、mounted
<body>
<div id="app">
{{ msg }}
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : '生命周期'
},
methods : {},
mounted(){
console.log(document.getElementById("app").innerText);
}
});
</script>
</body>
运行结果如下：
控制台输出的内容和页面展示的内容一致，说明钩子函数mounted执行的时候，Vue模板数据已经渲染到了页面中。至此，Vue实例已经初始化完毕，即组件创建阶段完成，即将进入运行阶段。
本篇只是介绍了组件创建期间的4个钩子函数，下篇会继续介绍Vue周期中组件运行阶段的钩子函数。
每天进步一点点！
Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数的更多相关文章
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第二篇：插值表达式
要开始写Vue的功能了,是不是很激动呢!开始吧! 1.首先建立一个html页面,导入Vue js包 <script type="text/javascript" src=&q ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
随机推荐
- [RxJS 6] The Catch and Rethrow RxJs Error Handling Strategy and the finalize Operator
Sometime we want to set a default or fallback value when network request failed. http$ .pipe( map(re ...
- 霸气側漏的HTML5--之--强大的form表单
今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...
- 您必须先调用“WebSecurity.InitializeDatabaseConnection”方法。。。
有如下代码: [Authorize] public ActionResult Index() { ViewBag.ShowList = ShowList.GetShowList(WebSecurity ...
- Android+Jquery Mobile学习系列(9)-总结和代码分享
经过一个多月的边学习边练手,学会了Android基于Web开发的毛皮,其实开发过程中用Android原生API不是很多,更多的是HTML/Javascript/Css. 个人觉得基于WebView的J ...
- 洛谷 P1032 [ NOIP 2002 ] 字串变换 —— 字符串+bfs
题目:https://www.luogu.org/problemnew/show/P1032 字符串好复杂...先写了个 dfs ,RE一个点TLE一个点,不知该怎么改了... #include< ...
- bzoj 1053 [ HAOI 2007 ] 反素数ant ——暴搜
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1053 试图打表找规律,但无果... 看TJ了,暴搜: 注意参数 w 是 long long. ...
- CPPCMS库在Windows下的使用
标题:CPPCMS库在Windows下的使用时间:2012-7作者:Kagula 环境:[1]WinXP SP3[2]VisualStudio2008 SP1[3]ZLib 1.2.7[4]PCRE ...
- Blue Jeans（串）
http://poj.org/problem?id=3080 寻找最长公共子串..暴搜的.. #include<stdio.h> #include<string.h> int ...
- C#中动态读取配置
有些时候,文件修改需要及时的响应,这个时候就需要实时读取文件,预先想的是写一个计时器,每隔多久运行一次,但是不能实时响应,所以采用监听文件的方式实现读取数据 C#监听文件变化 /// <summ ...
- python 7：del 列表指定元素、list.pop(索引)、list.remove(元素值)（删除列表指定元素，且不可再使用；默认索引-1，弹出指定列表元素，可再使用；移除列表指定第一个元素）
bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) del bicycles[0] #删除指定列表元 ...