对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果，我们必须知晓vue的生命周期，才能愉快的玩耍，知道我们写的东西应该挂载到哪里，vue官方给出的api讲解的那叫一个简单啊，如下：
所有的生命周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此this与你期待的 Vue 实例不同，this.fetchTodos的行为未定义。
下面附加一张生命周期图示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<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: "this is a test"
},
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>
生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
详解：
beforeCreate
官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；beforeCreate() {
console.log(this.page); // undefined
console.log{this.showPage); // undefined
},
data() {
return {
page: 123
}
},
methods: {
showPage() {
console.log(this.page);
}
}
created
官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
解释说明： 这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；created() {
console.log(this.page); // 123
console.log{this.showPage); // ...
$('select').select2(); // jQuery插件需要操作相关dom，不会起作用
},
data() {
return {
page: 123
}
},
methods: {
showPage() {
console.log(this.page);
}
}
beforeMounte
官方说明：在挂载开始之前被调用：相关的 render 函数首次被调用。mounted
官方说明：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
解释说明：挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行mounted() {
$('select').select2(); // jQuery插件可以正常使用
},
这时初始化插件没有问题，插件能正常运行，但是这并不代表万事大吉；下面思考一个问题：
图中的select的option都是通过异步请求得到的，然后通过v-for渲染进去，到此一切看起来很正常。还有一个需求是当页面刷新后要保留上次一查询的条件。我通过vue-router来给select指定一个默认选项；
<template v-for='(item, index) in agentList.name' >
<option v-if='item == name' :key='index' selected :value="item">{{item}}</option>
<option v-else :key='index' :value="item">{{item}}</option>
</template>
那么问题就来了，option的获得是一个异步请求，那这个请求完成的时刻和mounted的顺序是什么？如果mounted在请求成功之前执行，那将很遗憾——默认选项会设置失败
什么时候执行$('select').select2()，是解决这个问题的关键。大家肯定猜到了，mounted的确是在请求成功之前执行的，所以这时的办法就是将$('select').select2()的执行放到请求成功的回调里执行：
$.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
const a = this.agentList,
d = res.data;
a.id = d.orgIds;
a.name = d.orgNames;
a.city = d.cityMap;
$('select').select2()；
});
本以为这样就完美解决了，但是发现还是会出现和上图一样的效果；如何是好？这时轮到vm.$nextTick登场了：
说明： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
官方示例代码：
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
所以我的解决办法如下：
$.getJSON(urls.agentAndCity, {pageType: this.pageType}, (res) => {
const a = this.agentList,
d = res.data;
a.id = d.orgIds;
a.name = d.orgNames;
a.city = d.cityMap;
this.$nextTick(() => {
$('select').select2();
});
});
至此这个问题才算比较满意的解决
对vue生命周期/钩子函数的理解的更多相关文章
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- Vue生命周期钩子函数加载顺序的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- vue生命周期钩子函数详解
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...
- vue生命周期钩子函数
<template> <div> <h2>this is from C.vue</h2> </div> </template> ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
随机推荐
- 【亲测】自动构建多个指定的class并发执行：Jenkins+Maven+Testng框架
要解决的问题:jenkins在自动构建maven项目时如何并发执行多个指定的class类 预置条件:testngXXX.xml文件已指定了多个class类 解决步骤:1.在maven项目中新建指定te ...
- Asp.Net Core 中无法使用 ConfigurationManager.AppSettings
刚刚接触.net core ,准备把之前的一些技术常用工具先移植到.net Standard上面来, 方便以后使用,结果用到ConfigurationManager 的 AppSettings 就出现 ...
- 输入三个整数x、y、z，请把这三个数由小到大输出
题目:输入三个整数x,y,z,请把这三个数由小到大输出. 程序分析:我们想办法把最小的数放到x上,先将x与y进行比较,如果x> y则将x与y的值进行交换,然后再用x与z进行比较,如果x> ...
- 玩玩微信公众号Java版之五：获取关注用户信息
在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...
- 读Zepto源码之Callbacks模块
Callbacks 模块并不是必备的模块,其作用是管理回调函数,为 Defferred 模块提供支持,Defferred 模块又为 Ajax 模块的 promise 风格提供支持,接下来很快就会分析到 ...
- 基于jenkins搭建一个持续集成服务器
1 引言 1.1 编写目的 指导质量管理部,业务测试组同事进行Jenkins环境部署,通过Jenkins解决测试环境不可控,开发测试环境不一致等问题. 1.2 使用对象 质量管理部.基础研发部,集成部 ...
- Pivot Table系列之切片器 (Slicer)
1. 遇到的问题: 在Excel中,用PivotTable来做数据报告展示: 问题1:在同一个Sheet页里,多个PivotTable如何实现同步刷新? 问题2:在不同Sheet页之间,多个Pivot ...
- javac.exe、 java.exe、 java虚拟机三者之间的区别与联系
JDK中 javac:Java编译器,将Java源代码换成字节代: java:Java解释器,直接从类文件执行Java应用程序代码: 先编译 *.java文件――――>*.class文件 运行 ...
- 浅析python 的import 模块（转）
摘要: 学习python有几天了,对import一直不是很清楚,和C里面的include是否一样,重复引入有问题么?搜索路径是怎样的?整理解决下我的疑问. 一 模块的搜索路径 模块的搜索路径都放在了s ...
- 说一说Jquery中的empty()与remove()的区别和用法
今天在改一个新人写的代码,好吧,我承认改代码比自己写代码要来的痛苦. 主要是在测试一个table.table中有一列是删除操作.我的删除功能是 这样的,当点击删除的时候,判断这个table中的tr行是 ...