知名网站建设定制Vue--》详解Vue组件生命周期的三个阶段

目录

知名网站建设定制组件生命周期

生命周期(Life Cycle)知名网站建设定制是指一个组件从 创建 -> 运行 -> 销毁 知名网站建设定制的整个阶段，知名网站建设定制强调的是一个时间段。

知名网站建设定制生命周期函数：是由 vue 知名网站建设定制框架提供的，知名网站建设定制会伴随着组件的生命周期，知名网站建设定制自动按次序执行。

创建阶段

beforeCreate阶段：

我们在初始化事件和生命周期函数时，组件的 props/data/methods尚未被创建，都处于不可用状态。

  1. <script>
  2. export default {
  3.     props:['info'],
  4.     data(){
  5.         return {
  6.             message:'hello test'
  7.         }
  8.     },
  9.     methods:{
  10.         show(){
  11.             console.log('调用了 Test 组件的 show 方法');
  12.         }
  13.     },
  14.     // 创建阶段的第一个生命周期
  15.     beforeCreate(){
  16.         console.log(this.info); //props
  17.         console.log(this.message); //data
  18.         this.show() //methods
  19.     },
  20. }
  21. </script>

 因为不能使用 props/data/methods 但是我调用了，所有控制台报错。

created阶段：

我们已经初始化好 props、data、methods了，组件的 props/data/methods已创建好。都处于可用状态，但是组件的模板结构尚未完成！

  1. <script>
  2. export default {
  3.     props:['info'],
  4.     data(){
  5.         return {
  6.             message:'hello test'
  7.         }
  8.     },
  9.     methods:{
  10.         show(){
  11.             console.log('调用了 Test 组件的 show 方法');
  12.         }
  13.     },
  14.     // 创建阶段的第二个生命周期函数
  15.     created(){
  16.         console.log(this.info);
  17.         console.log(this.message);
  18.         this.show()
  19.     }
  20. }
  21. </script>

created生命周期函数非常常用，在日常项目开发中经常在它里面调用 methods 中的方法，请求服务器的数据，并且把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！

  1. <template>
  2.   <div>
  3.     <h2>test组件--{{nums.length}}</h2>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.     props:['info'],
  9.     data(){
  10.         return {
  11.             message:'hello test',
  12.             nums:[]
  13.         }
  14.     },
  15.     methods:{
  16.         show(){
  17.             console.log('调用了 Test 组件的 show 方法');
  18.         },
  19.         initlist(){
  20.             const xhr = new XMLHttpRequest()
  21.             xhr.addEventListener('load',()=>{
  22.                 const result = JSON.parse(xhr.responseText)
  23.                 console.log(result);
  24.                 this.nums = result.data
  25.             })
  26.             xhr.open('GET','请求的接口')
  27.             xhr.send()
  28.         }
  29.     },
  30.     created(){
  31.         this.initlist()
  32.     }
  33. }
  34. </script>
  35. <style lang="less" scoped>
  36.     div{
  37.         background-color: #f00;
  38.  
  39.     }
  40. </style>

beforeMount阶段：

基于数据和模板，在内存中编译生成HTML结构。将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。

  1. <template>
  2.   <div>
  3.     <h2 id="myid">test组件--{{nums.length}}</h2>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.     props:['info'],
  9.     data(){},
  10.     methods:{},
  11.     beforeCreate(){}，
  12.     created(){},
  13.     beforeMount(){
  14.         console.log('beforeMount');
  15.         const dom = document.querySelector('#myid')
  16.         console.log(dom);
  17.     }
  18. }
  19. </script>

mounted阶段：

用内存中编译生成的HTML结构替换掉el属性指定的DOM元素，已经把内存中的HTML结构，成功渲染到了浏览器之中，此时浏览器中已经包含了当前组件的DOM结构。

  1. <template>
  2.   <div>
  3.     <h2 id="myid">test组件--{{nums.length}}</h2>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.     mounted(){
  9.         const dom = document.querySelector('#myid')
  10.         console.log(dom);
  11.     }
  12. }
  13. </script>

vue完成模板解析并把初识的真实DOM元素放在页面后(挂载完毕)调用 mounted。

  1. <template>
  2.   <div>
  3.     <h2 :style="{opacity}">欢迎学习Vue</h2>
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.     data(){
  9.         return {
  10.             opacity:1
  11.         }
  12.     },
  13.     mounted(){
  14.         setInterval(()=>{
  15.             //我们在使用箭头函数时，this的指向mounted自动帮我们设置好是 vm 了
  16.             this.opacity-=0.01
  17.             if(this.opacity <= 0) this.opacity = 1
  18.         },6)
  19.     },
  20. }
  21. </script>

运行阶段

所谓运行阶段就是用户与组件产生交互

beforeUpdate阶段：

这个函数的触发的必要前提是，我们修改了 data 里面的数据。将要（注意：仅仅是将要，还没有呢）根据变化过后最新的数据，重新渲染组件的模板结构。

  1. <template>
  2.   <div>
  3.     <h2 id="myid">{{message}}</h2>
  4.     <button @click="message+='~'">点击修改message值</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.     data(){
  10.         return {
  11.             message:'hello test',
  12.         }
  13.     },
  14.     beforeUpdate(){
  15.         console.log('beforeUpdate'); //说明：点击按钮修改data值才能触发这个函数
  16.         console.log(this.message); //打印修改后的值
  17.         const dom = document.querySelector('#myid')
  18.         console.log(dom.innerHTML); //打印整个文本，但并没有出现我们修改后的值，说明页面并没有重新渲染
  19.     }
  20. }
  21. </script>

updated阶段：

已经根据最新的数据，完成了组件的DOM结构的重新渲染。注意：当数据变化之后，为了能操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中。

  1. <template>
  2.   <div>
  3.     <h2 id="myid">{{message}}</h2>
  4.     <button @click="message+='~'">点击修改message值</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.     props:['info'],
  10.     data(){
  11.         return {
  12.             message:'hello test',
  13.         }
  14.     },
  15.     updated(){
  16.         console.log('updated'); 
  17.         console.log(this.message); //打印修改后的值
  18.         const dom = document.querySelector('#myid')
  19.         console.log(dom.innerHTML); //打印整个文本，但出现了我们修改后的值，说明页面被重新渲染
  20.     }
  21. }
  22. </script>

销毁阶段

完全销毁一个实例。清理它(vm)与其它实例的连接，接绑它的全部指令及事件监听器。

beforeDestroy阶段：

将要销毁此组件，此时尚未销毁，组件还处于正常工作状态。在这阶段一般做一些首尾工作。

  1. <template>
  2.   <div>
  3.     <h2 id="myid">{{message}}</h2>
  4.     <button @click="message+='~'">点击修改message值</button>
  5.   </div>
  6. </template>
  7. <script>
  8. export default {
  9.     props:['info'],
  10.     data(){
  11.         return {
  12.             message:'hello test',
  13.         }
  14.     },
  15.     beforeDestroy(){
  16.         console.log('beforeDestroy');
  17.     }
  18. }

destroyed阶段：

销毁当前组件的数据侦听器、子组件、事件监听等，组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除！

直接暴力的将vm干掉，页面就不能再进行交互。设置透明的按钮也就作废了。

  1. <template>
  2.   <div>
  3.     <h2 :style="{opacity}">欢迎学习Vue</h2>
  4.     <button @click="opacity = 1">透明度设置为1</button>
  5.     <button @click="stop">点我停止变化</button>
  6.   </div>
  7. </template>
  8. <script>
  9. export default {
  10.     data(){
  11.         return {
  12.             opacity:1
  13.         }
  14.     },
  15.     methods:{
  16.         stop(){
  17.             // clearInterval(this.timer)
  18.             this.$destroy()
  19.         }
  20.     },
  21.     mounted(){
  22.         // const dom = document.querySelector('#myid')
  23.         // console.log(dom);
  24.         console.log('mounted',this);
  25.         this.timer = setInterval(()=>{
  26.             console.log('setInterval');
  27.             this.opacity-=0.01
  28.             if(this.opacity <= 0) this.opacity = 1
  29.         },6)
  30.     },
  31.     beforeDestroy(){
  32.         clearInterval(this.timer)
  33.         console.log('vm即将被销毁');
  34.     }
  35. }
  36. </script>
  37. <style lang="less" scoped>
  38.     div{
  39.         // background-color: #f00;
  40.  
  41.     }
  42. </style>

1）销毁后借助Vue开发者工具看不到任何信息。

2）销毁后自定义事件会失效，但原生的DOM事件依然有效

3）一般不会在操作数据，因为即使操作数据，也不会再触发更新流程了

总结

生命周期：

1）又称：生命周期回调函数、生命周期函数、生命周期钩子。

2）含义：vue在关键时刻帮助我们调用一些特殊名称的函数。

3）生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4）生命周期函数中的this指向是 vm 或 组件实例对象。

常用的生命周期钩子：

1）mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)

2）beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发