Vue.js 生命周期
来源:互联网 发布:centos 解压tar.gz 编辑:程序博客网 时间:2024/05/16 09:38
生命周期示意图:
beforeCreate
在实例初始化之后,数据观测(dataobserver)和event/watcher 事件配置之前调用
created
实例已经创建完成之后被调用,在这一步,实例已经完成以下的配置:
>数据观测(data observer)
>属性和方法运算
>watch/event 事件回调
beforeMount
在挂载开始之前被调用,相关的render 函数首次被调用
该钩子在服务器端渲染期间不被调用
mounted
el 被新创建的vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时vm.$el 也在文档内。
该钩子在服务器端渲染期间不被调用。
beforeUpdate
数据更新时调用,发生在虚拟DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
该钩子在服务器端渲染期间不被调用。
updated
由于数据更改导致的虚拟DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件DOM 已经更新,所以你现在可以执行依赖于 DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
activated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactivated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
destroyed
Vue实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
监听数据变化
vm.$watch(expOrFn,callBack, [options])
参数:
expOrFn
callBack
options
用法:
观察 Vue实例变化的一个表达式或计算属性函数,回调函数得到的参数为新值和旧值,表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定deep: true 。注意监听数组的变动不需要这么做。
vm.$watch(‘someObject‘,callback, { deep: true})vm.someObject.nestedValue = 123// callback is fired
选项:immediate
在选项参数中指定immediate: true 将立即以表达式的当前值触发回调:
vm.$watch(‘a‘,callback, { immediate: true})// 立即以 `a` 的当前值触发回调
本文出自 “dapengtalk”博客,请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1880350
- Vue.js 生命周期
- react vue的生命周期
- Vue.js的生命周期
- vue.js生命周期
- Vue.js的生命周期
- vue.js之生命周期
- vue.js 生命周期代码详解
- 【06】vue.js — 生命周期
- vue.js生命周期的理解
- vue.js生命周期钩子详解
- vue js 的生命周期和钩子函数
- vue.js生命周期钩子函数及缓存
- Vue.js知识总结——生命周期
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
- Vue生命周期
- vue生命周期
- Vue生命周期
- 浏览器访问网页的时候会自动使用co…
- js 字符串和数组反转
- html行内元素 和 块状元素 总结
- react vue的生命周期
- JavaScript 数据类型
- Vue.js 生命周期
- webpack.config.js
- package.json
- 恢复 git reset -hard 的误操作
- HTML5十五大新特性
- HTML5十五大新特性(二)
- jquery的bind跟on绑定事件的区别
- 光栅化的深入理解
- HTML DOM innerHTML和wr…