文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue组件生命周期的三个阶段是什么

2023-07-04 19:24

关注

这篇文章主要介绍“Vue组件生命周期的三个阶段是什么”,在日常操作中,相信很多人在Vue组件生命周期的三个阶段是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue组件生命周期的三个阶段是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

组件生命周期

生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段。【相关推荐:vuejs视频教程、web前端开发】

生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。

Vue组件生命周期的三个阶段是什么

创建阶段

beforeCreate阶段

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

<script>export default {    props:['info'],    data(){        return {            message:'hello test'        }    },    methods:{        show(){            console.log('调用了 Test 组件的 show 方法');        }    },    // 创建阶段的第一个生命周期    beforeCreate(){        console.log(this.info); //props        console.log(this.message); //data        this.show() //methods    },}</script>

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

Vue组件生命周期的三个阶段是什么

created阶段

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

<script>export default {    props:['info'],    data(){        return {            message:'hello test'        }    },    methods:{        show(){            console.log('调用了 Test 组件的 show 方法');        }    },    // 创建阶段的第二个生命周期函数    created(){        console.log(this.info);        console.log(this.message);        this.show()    }}</script>

Vue组件生命周期的三个阶段是什么

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

<template>  <div>    <h3>test组件--{{nums.length}}</h3>  </div></template><script>export default {    props:['info'],    data(){        return {            message:'hello test',            nums:[]        }    },    methods:{        show(){            console.log('调用了 Test 组件的 show 方法');        },        initlist(){            const xhr = new XMLHttpRequest()            xhr.addEventListener('load',()=>{                const result = JSON.parse(xhr.responseText)                console.log(result);                this.nums = result.data            })            xhr.open('GET','请求的接口')            xhr.send()        }    },    created(){        this.initlist()    }}</script><style lang="less" scoped>    div{        background-color: #f00;    }</style>

beforeMount阶段

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

<template>  <div>    <h3 id="myid">test组件--{{nums.length}}</h3>  </div></template><script>export default {    props:['info'],    data(){},    methods:{},    beforeCreate(){},    created(){},    beforeMount(){        console.log('beforeMount');        const dom = document.querySelector('#myid')        console.log(dom);    }}</script>

Vue组件生命周期的三个阶段是什么

mounted阶段

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

<template>  <div>    <h3 id="myid">test组件--{{nums.length}}</h3>  </div></template><script>export default {    mounted(){        const dom = document.querySelector('#myid')        console.log(dom);    }}</script>

Vue组件生命周期的三个阶段是什么

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

<template>  <div>    <h3 :style="{opacity}">欢迎学习Vue</h3>  </div></template><script>export default {    data(){        return {            opacity:1        }    },    mounted(){        setInterval(()=>{            //我们在使用箭头函数时,this的指向mounted自动帮我们设置好是 vm 了            this.opacity-=0.01            if(this.opacity <= 0) this.opacity = 1        },6)    },}</script>

Vue组件生命周期的三个阶段是什么

运行阶段

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

beforeUpdate阶段:

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

<template>  <div>    <h3 id="myid">{{message}}</h3>    <button @click="message+='~'">点击修改message值</button>  </div></template><script>export default {    data(){        return {            message:'hello test',        }    },    beforeUpdate(){        console.log('beforeUpdate'); //说明:点击按钮修改data值才能触发这个函数        console.log(this.message); //打印修改后的值        const dom = document.querySelector('#myid')        console.log(dom.innerHTML); //打印整个文本,但并没有出现我们修改后的值,说明页面并没有重新渲染    }}</script>

Vue组件生命周期的三个阶段是什么

updated阶段

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

<template>  <div>    <h3 id="myid">{{message}}</h3>    <button @click="message+='~'">点击修改message值</button>  </div></template><script>export default {    props:['info'],    data(){        return {            message:'hello test',        }    },    updated(){        console.log('updated');         console.log(this.message); //打印修改后的值        const dom = document.querySelector('#myid')        console.log(dom.innerHTML); //打印整个文本,但出现了我们修改后的值,说明页面被重新渲染    }}</script>

销毁阶段

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

beforeDestroy阶段

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

<template>  <div>    <h3 id="myid">{{message}}</h3>    <button @click="message+='~'">点击修改message值</button>  </div></template><script>export default {    props:['info'],    data(){        return {            message:'hello test',        }    },    beforeDestroy(){        console.log('beforeDestroy');    }}

Vue组件生命周期的三个阶段是什么

destroyed阶段

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

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

<template>  <div>    <h3 :style="{opacity}">欢迎学习Vue</h3>    <button @click="opacity = 1">透明度设置为1</button>    <button @click="stop">点我停止变化</button>  </div></template><script>export default {    data(){        return {            opacity:1        }    },    methods:{        stop(){            // clearInterval(this.timer)            this.$destroy()        }    },    mounted(){        // const dom = document.querySelector('#myid')        // console.log(dom);        console.log('mounted',this);        this.timer = setInterval(()=>{            console.log('setInterval');            this.opacity-=0.01            if(this.opacity <= 0) this.opacity = 1        },6)    },    beforeDestroy(){        clearInterval(this.timer)        console.log('vm即将被销毁');    }}</script><style lang="less" scoped>    div{        // background-color: #f00;    }</style>

Vue组件生命周期的三个阶段是什么

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

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

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

到此,关于“Vue组件生命周期的三个阶段是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯