生命周期【Vue】

最新推荐文章于 2024-06-28 18:39:53 发布

人工智能有点

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量139

点赞数

分类专栏： Web开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44417441/article/details/126089836

版权

Web开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

文章目录

引出生命周期
分析生命周期
总结生命周期

引出生命周期

实现一个透明度来回变化的效果。

实现方式一：通过外部的定时器实现

缺点：代码有点割裂，代码尽量写在Vue实例里面，全局配置可以写在外面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <!-- <button @click="fang">点我变化透明度</button> -->
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
    })
    // 通过外部的定时器实现
    setInterval(()=>{
        vm.opacity -= 0.01
        if(vm.opacity <= 0) vm.opacity=1
    },16)
</script>
</html>

实现方式二：methods

methods中使用事件回调不可取，不符合需求。
此时，data中数据变化，重新解析模板，每个重新解析，又会再次调用开启定时器，如此一来，会极大消耗资源，并且屏幕出现鬼畜效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7uakwmN2-1659269367736)(2022-07-31-18-15-12.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        {{change()}}
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
        methods:{
            change(){
                setInterval(()=>{
                    console.log("change")
                    this.opacity -= 0.01
                    if(this.opacity <= 0) vm.opacity=1
                },16)
            }
        }
    })
</script>
</html>

实现方式三：生命周期mounted

Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted，只调用了一次，开启了一个定时器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YSD7FoWV-1659269367739)(2022-07-31-18-20-12.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1,
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入雅页面后（挂在完毕）调用 mounted
        mounted(){
            console.log("mounted")
            setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <= 0) vm.opacity=1
            },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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h2>当前的n值是{{n}}</h2>
       <button @click="add">点我n+1</button>
       <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        // // template全部替换el指向元素，的有一个根元素
        // template:`
        // <div>
        //     <h2>当前的n值是{{n}}</h2>
        //     <button @click="add">点我n+1</button>
        // </div>
        // `,
        data:{
            n:1
        },
        methods:{
            add(){
                this.n++
            },
            bye(){ // vm销毁后 原生回调好使
                console.log("bye")
                this.$destroy()
            }
        },
        beforeCreate() {
            // 此时vue中没有数据，还没绑定，vm实例中没有_data和n
            console.log("beforeCreate")
            // console.log(this)  // Vue
            // debugger
        },
        created() {
            // 此时vue实例上有了_data和n及其getset
            console.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>
</html>

beforeUpdate//页面和数据未同步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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操作数据，因为即便操作数据，也不会再触发更新流程了

人工智能有点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生命周期【Vue】

将要创建 ===> 调用beforeCreate函数。创建完毕 ===> 调用created函数。将要挂载 ===> 调用beforeMount函数。（重要）挂载完毕 ===> 调用mounted函数。======> 【重要的钩子】将要更新 ===> 调用beforeUpdate函数。更新完毕 ===> 调用updated函数。（重要）将要销毁 ===> 调用beforeDestory函数。======> 【重要的钩子】
复制链接

扫一扫