CSDN|不来看看这些 VUE 的生命周期钩子函数？ | 原力计划( 二 )
本文插图
2、beforeMount与mounted实例②：<div id="box"> <div ref='demo'>demo</div></div><script> new Vue({ el:"#box", data:{ a:666 }, mounted{ console.log('mounted',this.a); console.log(this.$refs.demo); }, beforeMount{ console.log('beforeMount',this.a); } })</script>结果：
本文插图
3、beforeMount与mounted实例③：（节点挂载后 ， 文本框自动获取焦点）<div id="box"> <input type="text" ref='txt'></div><script> new Vue({ el:"#box", data:{ a:666, }, mounted{ console.log('mounted',this.a); this.$refs.txt.focus; }, beforeMount{ console.log('beforeMount',this.a); } })</script>结果：
本文插图
以上两个实例 ， 更加有力的说明： beforeMount执行在真实的dom节点挂载之前 ， 此时没有节点 ， 所以拿不到节点 。 mounted执行时真实的dom节点已经挂载到页面上了 ， 所以能拿到节点 。例：beforeCreate、created、beforeMount、mounted执行顺序差别演示： （因为 它们此时都是对象 ， 所以它们代码的摆放位置是不影响结果的 。 ）<div id="box"></div><script> new Vue({ el:"#box", data:{ a:666, }, created{ console.log("created",this.a); }, beforeCreate{ console.log('beforeCreate',this.a); }, mounted{ console.log('mounted',this.a); }, beforeMount{ console.log('beforeMount',this.a); } })</script>结果：
本文插图
BeforeUpdate该函数在数据更新时调用 ， 发生在虚拟 DOM 打补丁之前 ， 在有特殊需求的情况下 ， 可以将更新之前的数据存起来 ， 放到后面去使用 。这里适合在更新之前访问现有的 DOM ， 比如手动移除已添加的事件监听器 。该钩子在服务器端渲染期间不被调用 ， 因为只有初次渲染会在服务端进行 。Updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁 ， 在这之后会调用该钩子 ， 在数据更新之后做一些处理 ， 即监控数据的变化 。当这个钩子被调用时 ， 组件 DOM 已经更新 ， 所以你现在可以执行依赖于 DOM 的操作 。 然而在大多数情况下 ， 你应该避免在此期间更改状态 。 如果要相应状态改变 ， 通常最好使用计算属性或 watcher 取而代之 。注意 ：updated 不会保证所有的子组件也都一起被重绘 。 如果你希望等到整个视图都重绘完毕 ， 可以在 updated 里使用 vm.$nextTick：updated: function { this.$nextTick(function { // Code that will run only after the // entire view has been re-rendered })}注意：watch是监控特定数据的变化 ， 而updated是监控组件里所有数据的变化 。例：beforeUpdate与updated执行演示：<body><div id="box"> <input type="range" min="1" max="100" v-model="n" /><Com :n="n"></Com></div><script> var Com = { props:["n"], template: `<div>{{n}}</div>`, //这两个钩子会在数据更新时被调用 beforeUpdate{ console.log("beforeUpdate") }, updated{ console.log("updated") } }; new Vue({ el: '#box', components: { Com, }, data:{ n:1 } });</script>结果：
本文插图
BeforeDestroy该函数在实例销毁之前调用 ， 这里的 ref 依旧可以操作 ， 实例仍然完全可用 ， 可以在这里做清除定时器的操作 ， 防止内存泄漏 。该钩子在服务器端渲染期间不被调用 。Destroyed该函数在组件销毁的时候执行 ， 即实例销毁后调用 ， 这里的 ref 不存在 。该钩子被调用后 ， 对应 Vue 实例的所有指令都被解绑 ， 所有的事件监听器被移除 ， 所有的子实例也都被销毁 。该钩子在服务器端渲染期间不被调用 。例：beforeDestroy与destroyed执行演示： （this.$destroy可以销毁组件）<div id="box"> <Com></Com></div><script> var Com = { template: `<div><button @click="kill">kill</button> </div>`, mounted { this.timer = setInterval(=>{ console.log("hello"); },1000) }, beforeDestroy{ clearInterval(this.timer); console.log("beforeDestory") }, destroyed{ console.log("destoryed") }, methods:{ kill{ //销毁组件 this.$destroy } } }; new Vue({ el: '#box', components: { Com, }, });</script>结果：
推荐阅读
- 群众网|微信中6个设置不关闭，个人信息或被“窃取”，看看你关了吗？
- CSDN|由 Apache 说开，中国开源项目已经走向世界！
- 情况|担心自己被“监听”？快看看手机有没有出现这3种情况，赶快自查
- 刘付罗金|随便看看 视频号又多一个新入口 微信再更新功能
- CSDN|软件对于英特尔意味着什么？
- 声音|监控系统接入音频摄像机没声音，看看是不是这几点没设置
- 电脑使用技巧|监控系统接入音频摄像机没声音，看看是不是这几点没设置
- CSDN|中国首家苹果零售店重开业，苹果CEO库克发文揭幕；“携号转网”服务用户破千万；GitHub 完成北极源代码存档|极客头条
- 手机使用技巧|这6种信号，只要出现2种以上说明你手机中病毒了，抓紧去看看！
- 青年|女生暗恋的表现在哪些方面，我们看看下面的看法，看看你暗恋的女生是不是也在暗恋你