vue中的钩子函数的理解
接下来我们对几个钩子函数进行解释 beforeCreated：这个钩子函数实在vue实例创建后，触发的。这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函数中是调用事件，那么这个数据监听和事件初始化就是在beforeCreated之前和created之后进行的。 beforeMount 这个进行模板编译，编译模板但是没有元素挂载，无法获取dom mounted 元素挂载结束，可以获取dom 元素 beforeUpdata 组件更新前调用 updataed 组件更新后调用 beforedestory vue实例销毁前执行 destoryed vue实例销毁之后执行 vue实例销毁后，dom元素还存在但是数据双向绑定，vue的功能就没有了，比如数据双向绑定。
下面有一段代码，大家可以copy过去在控制台上打印看一看，加深对这几个钩子函数的理解 ，
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body> <div id="app">
<p>{{ message }}</p>
</div> <script type="text/javascript"> var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
vue中的钩子函数的理解的更多相关文章
- 【转】vue中的钩子函数。。
前言 在vue开发SPA应用的过程中,多数情况下我们需要解决一个问题 就是在路由跳转的过程中需要更新你SPA应用的 title , 这一节不说其他,就展示如何使用 vue-router 的 导航钩子 ...
- vue中的钩子函数
什么是vue的钩子函数? Vue 实例在被创建时,会经过一系列的初始化过程,初始化过程中会运行一些函数,叫做生命周期钩子函数,通过运用钩子函数,用户在可以在Vue实例初始化的不同阶段添加自己的代码,以 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- VUE生命周期中的钩子函数及父子组件的执行顺序
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- Vue生命周期钩子函数加载顺序的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue 组件中的钩子函数 不能直接写this
export default { data(){ return { num: 18 } }, beforeRouteEnter(to, from, next){ next(vm=>{ vm.nu ...
随机推荐
- golang垃圾回收和SetFinalizer
golang自带内存回收机制--GC.GC通过独立的进程执行,它会搜索不再使用的变量,并释放.需要注意的是,进行GC会占用机器资源. GC是自动进行的.如果要手动进行GC,可以调用runtime.GC ...
- 关于DDR3控制器的使用
关于DDR3控制器的使用 mig_7series_0 u_mig_7series_0 ( // Memory interface ports .ddr3_addr (ddr3_addr), // ou ...
- 【python】numpy中的shape用法
转自 https://blog.csdn.net/u010758410/article/details/71554224# shape函数是numpy.core.fromnumeric中的函数,它的功 ...
- tinycc update VERSION to 0.9.27
TinyCC全称为Tiny C Compiler, 是微型c编译器,可在linux/win/平台上编译使用. 在用代码里面使用tcc当脚本,性能比lua还快,目前已有网游服务端使用TCC脚本提高性能. ...
- autoit3编辑器SCITE字体设置
选项→打开全局设置文件,就是SciTEGlobal.properties,修改下面的部分即可,保存之后立刻生效.如果不行,就打开用户设置文件SciTEUser.properties进行修改: font ...
- ado.net调用返回多结果集的存储过程
- 涂抹mysql笔记-mysql管理工具
五花八门的mysql管理工具<>mysql提供的命令行工具 mysql_install_db:mysql建库工具,在源码安装mysql环节我们使用过. mysql_safe:mysql启动 ...
- 用PS做圆角图片
ps: Adobe Photoshop CS2 如果图片被锁定,请“双击”图层中“背景”解锁,如果没有图层菜单,在最上面导航栏中:窗口—图层.如下图: 点“确定”,解锁. 选用“圆角矩形工具”. ...
- vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...
- 导入数据库时报错1067 – Invalid default value for ‘字段名’
最近把mysql升级到5.7了,wordpress导数据报错 Invalid default value for 'comment_date' 原因出在类似这样的语句 DROP TABLE IF EX ...