简繁网站怎么做,个人注册公司费用,重庆建设工程信息网证书查询官网,网络推广关键词优化公司文章目录 引出生命周期实现方式一#xff1a;通过外部的定时器实现实现方式二#xff1a;methods实现方式三#xff1a;生命周期mounted 分析生命周期总结生命周期 引出生命周期
实现一个透明度来回变化的效果。
实现方式一#xff1a;通过外部的定时器实现
缺点#x… 文章目录 引出生命周期实现方式一通过外部的定时器实现实现方式二methods实现方式三生命周期mounted 分析生命周期总结生命周期 引出生命周期
实现一个透明度来回变化的效果。
实现方式一通过外部的定时器实现
缺点代码有点割裂代码尽量写在Vue实例里面全局配置可以写在外面。
!DOCTYPE html
html langen
headmeta charsetUTF-8title引出生命周期/titlescript src../js/vue.js/script
/head
bodydiv idrooth2 :style{opacity}欢迎学习Vue/h2!-- button clickfang点我变化透明度/button --/div
/body
scriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{opacity:1,},})// 通过外部的定时器实现setInterval((){vm.opacity - 0.01if(vm.opacity 0) vm.opacity1},16)
/script
/html实现方式二methods
methods中使用事件回调不可取不符合需求。 此时data中数据变化重新解析模板每个重新解析又会再次调用开启定时器如此一来会极大消耗资源并且屏幕出现鬼畜效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uakwmN2-1659269367736)(2022-07-31-18-15-12.png)]
!DOCTYPE html
html langen
headmeta charsetUTF-8title引出生命周期/titlescript src../js/vue.js/script
/head
bodydiv idrooth2 :style{opacity}欢迎学习Vue/h2{{change()}}/div
/body
scriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{opacity:1,},methods:{change(){setInterval((){console.log(change)this.opacity - 0.01if(this.opacity 0) vm.opacity1},16)}}})
/script
/html实现方式三生命周期mounted
Vue完成模板的解析并把初始的真实DOM元素放入雅页面后挂在完毕调用 mounted只调用了一次开启了一个定时器。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSD7FoWV-1659269367739)(2022-07-31-18-20-12.png)]
!DOCTYPE html
html langen
headmeta charsetUTF-8title引出生命周期/titlescript src../js/vue.js/script
/head
bodydiv idrooth2 :style{opacity}欢迎学习Vue/h2/div
/body
scriptVue.config.productionTip falseconst vm new Vue({el:#root,data:{opacity:1,},// Vue完成模板的解析并把初始的真实DOM元素放入雅页面后挂在完毕调用 mountedmounted(){console.log(mounted)setInterval((){this.opacity - 0.01if(this.opacity 0) vm.opacity1},16)},})
/script/html总结
生命周期
又名生命周期回调函数、生命周期函数、生命周期钩子。是什么Vue在关键时刻帮我们调用的一些特殊名称的函数。生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的。生命周期函数中的this执行是vm 或 组件实例对象。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ETs206ms-1659269367740)(./lifecycle.png)]
分析生命周期
vm销毁后 原生回调好使
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUUDH71A-1659269367742)(2022-07-31-18-30-09.png)]
!DOCTYPE html
html langen
headmeta charsetUTF-8title分析生命周期/titlescript src../js/vue.js/script
/head
bodydiv idrooth2当前的n值是{{n}}/h2button clickadd点我n1/buttonbutton clickbye点我销毁vm/button/div
/body
scriptVue.config.productionTip falseconst vm new Vue({el:#root,// // template全部替换el指向元素的有一个根元素// template:// div// h2当前的n值是{{n}}/h2// button clickadd点我n1/button// /div// ,data:{n:1},methods:{add(){this.n},bye(){ // vm销毁后 原生回调好使console.log(bye)this.$destroy()}},beforeCreate() {// 此时vue中没有数据还没绑定vm实例中没有_data和nconsole.log(beforeCreate)// console.log(this) // Vue// debugger},created() {// 此时vue实例上有了_data和n及其getsetconsole.log(created)// console.log(this)// debugger},beforeMount() {// 这里边操作DOM无效console.log(beforeMount)// console.log(this)// // debugger// document.querySelector(h2).innerText 哈哈},mounted() {console.log(mounted)// console.log(this)// // 对DOM操作有效// document.querySelector(h2).innerText 哈哈// debugger},beforeUpdate() { //页面和数据未同步console.log(beforeUpdate)// console.log(this.n)// debugger},updated() { //页面和数据同步console.log(updated)// console.log(this.n)// debugger},beforeDestroy() { // 到了这个阶段 设计数据更新不会再起到效果console.log(beforeDestroy)},destroyed() {console.log(destroyed)},})
/script
/htmlbeforeUpdate//页面和数据未同步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RlAKU0vZ-1659269367744)(2022-07-28-11-20-30.png)]
updated//页面和数据同步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9xAhfevZ-1659269367747)(2022-07-28-11-24-41.png)]
总结生命周期
vm的一生vm的生命周期:
将要创建 调用beforeCreate函数。创建完毕 调用created函数。将要挂载 调用beforeMount函数。重要挂载完毕 调用mounted函数。 【重要的钩子】将要更新 调用beforeUpdate函数。更新完毕 调用updated函数。重要将要销毁 调用beforeDestory函数。 【重要的钩子】销毁完毕 调用destoryed函数。
常用的生命周期钩子及常用功能
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy: 清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】 关于销毁Vue实例销毁后借助Vue开发者工具看不到任何信息销毁后自定义事件会失效但原生DOM事件依然有效 ory函数。 【重要的钩子】销毁完毕 调用destoryed函数。
常用的生命周期钩子及常用功能
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy: 清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】 关于销毁Vue实例销毁后借助Vue开发者工具看不到任何信息销毁后自定义事件会失效但原生DOM事件依然有效一般不会再beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了
