共计 2469 个字符,预计需要花费 7 分钟才能阅读完成。
什么是生命周期?
每个 Vue 实例在被创建时都经过了一系列的初始化过程
- 设置数据监听
- 编译模板
- 将实例挂载到 DOM
- 数据变化时更新 DOM
在这一系列过程中,也会运行一些「生命周期钩子」的函数,用在给开发者在不同阶段添加自己的代码的机会。
「created」钩子,在一个实例被创建后执行代码
new Vue({
data: {a: 1},
created: function () {
// `this` 指向 vm 实例
console.log('a is:' + this.a)
}
})
// => "a is: 1"
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
参考 Vue 实例
通俗的讲:就是在.Vue 从加载前到销毁后,这一些系列过程中,有特定的阶段 fn 可以提供我们开发者来进行操作。
阶段
钩子函数方法 | 触发阶段 | 操作 |
---|---|---|
beforeCreate | 创建前 | 组件实例刚被创建,组件属性计算前,数据对象 data 都未定义,未初始化 |
created | 创建后 | 组件实例创建完成,属性已经绑定,数据对象 data 已经定义存在,DOM 没为生成,$el 未存在 |
beforeMount | 挂载前 | Vue 实例的 $el 和 data 都已经初始化完成,挂在前为虚拟的 dom 节点,模板还没有渲染到 HTML 页面上去,data.message 未替换。 |
mounted | 挂载后 | Vue 实例挂载完成,模板已经渲染到 HTML 中,dota.message 成功渲染。这个阶段可以做一些 ajax 请求操作,mounted 在周期中只会执行一次。 |
beforeUpdate | 更新前 | 当 dota 更新之前,会触发 beforeUpdate 方法。 |
updated | 更新后 | 当 data 更新完成后,触发 updated 方法。 |
beforeDestory | 销毁前 | Vue 组件实例销毁前执行的方法。 |
destroyed | 销毁后 | 组件销毁后,调用的方法,对 data 的改变不会再触发函数周,vue 实例已经解除事件监听和 dom 绑定,但 dom 结构依然存在。 |
示例
import Axios from 'axios' // 这是一个轻量级的 ajax 库,import 是 es6 模块导入的语法。export default { // 这是一个 vue 的模块,后面讲奥。name: 'app',
components: { },
data: function () {
return {list: []
}
},
mounted: function () { // 挂在完成后的生命周期钩子注册。this.$nextTick(function () { // 等待下一次更新完成后执行业务处理代码。Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新
params: {}}).then(function (res) {this.list = res.data}.bind(this))
})
}
}
Vue 实例的全局配置
-
silent
- 类型:boolean
- 默认值:false
- 用法:
Vue.config.silent = true // 取消 Vue 所有的日志与警告
-
optionMergeStrategies
- 类型:{[key: string]: Function }
- 默认值:{}
- 用法:
Vue.config.optionMergeStrategies._my_option=function(parent,child,vm){return child+1} const Profile = Vue.extend({_my_option: 1}) Profile.options._my_option = 2 // 自定义合并策略选项 // 合并策略选项分别接受第一个参数作为父实例,第二个参数为子实例,Vue 实例上下文被作为第三个参数传入。
-
devtools
- 类型:boolean
- 默认值:true
- 用法:
// 务必在加载 Vue 之后,立即同步设置以下内容 Vue.config.devtools = true // 配置是否允许 vue-devtools 检查代码。开发版本默认为 true,生产版本默认为 false。生产版本设为 true 可以启用检查。
Vue 的全局 API
- Vue.nextTick
语法:Vue.nextTick([callback, context])
{Function}[callback]
{Object}[callback]
用法:
在下次 DOM 更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
// 修改数据
vm.msg = 'msg'
// DOM 未更新
Vue.nexTick(function() {
// DOM 更新了
// 执行操作
})
- Vue.set
语法:Vue.set(object, key, value)
参数:
{Object} object
{String} key
{any} value
用法:
设置对象数据。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新,这个方法主要用于避开 Vue 不能检测属性被添加的限制。注意对象不能使 Vue 示例,或者 Vue 实例的根数据对象。
- Vue.complie
语法:Vue.compile(template)
参数:
{string} template
用法:
// 在 render 函数中编译模板字符串
// 在独立构建时有效
var res = Vue.Compile(`<div><span>{{ msg}}</span></div>`)
new Vuew({
data:{msg:'hello'},
render:res.render,
staticRenderFns:res.staticRenderFns
})
更多的 API 和用法请看 -> API-Vue