vue2.0 生命周期引出生命周期

最新推荐文章于 2024-06-13 23:47:14 发布

结城明日奈是我老婆

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量354

点赞数

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121957588

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

写一个欢迎学习Vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期_挂载流程</title>
    <link rel="stylesheet" href="indexCss.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--动态绑定，绑定后里面时一个对象，{opacity: opacity}重名简写-->
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            opacity: 1,
        }
    }
})

借助VsCode的Live Server插件用Open with Live Server(Alt + L Alt + o)运行这样你的Vue devtools插件才能识别本地运行不行,没法识别也没有Vue标识

打开控制台，进入Vue开发者工具把opacity改为0.5改变了透明度

那这样我们就知道了每隔一段时间透明度减小一点点(把定时器写在Vue实例的外面)

setInterval(()=>{
    opacity -= 0.01
},16)

写在外面有一个问题:我触碰不到vm实例里的opacity
这么写:

const vm = new Vue({
    el: '#root',
    data(){
        return{
            opacity: 1,
        }
    }
})

setInterval(()=>{
    vm.opacity -= 0.01
    if(vm.opacity === 0){vm.opacity = 1}
},16)

这么写if(vm.opacity === 0){vm.opacity = 1}很危险,因为js不擅长处理小数有可能上一秒它是正数下一秒就负数了越过了0所以得这么写:

setInterval(()=>{
    vm.opacity -= 0.01
    if(vm.opacity <= 0){vm.opacity = 1}
},16)

这样实现是实现了，但是写的不完美:

Vue实例(vm)和具体逻辑(setInterval)
基本上都是再Vue内部解决问题，所以在真正开发的时候很少会用到vm

new Vue({
    el: '#root',
    data(){
        return{
            opacity: 1,
        }
    },
    methods: {
        change(){
            setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <= 0){this.opacity = 1}
            },16)
        }
    },
})

这样子写change没有被调用

这里的change要么把它当成事件的回调
要么作为模板的插值语法去掉(在这里建议不要使用这样定时器会一直递归创建无数个定时器)
所以change写在methods里面没办法处理我们的请求

如果Vue拿到<h2 :style="{opacity}">欢迎学习Vue</h2>,解析成虚拟DOM,再转换成真实DOM最后再放入页面。这一系列最后一步干完后，把它放到页面的时候告诉我们一声，这个事一旦要是达成了，那它什么时候告诉我们，那我什么时候去开一个定时器就可以了，Vue给我提供了一个渠道:Vue把这些事干完的时候会调用一个函数，函数里面就可以写你的逻辑了，这个函数很特殊,跟methods平级, 名字叫mounted
mount:挂载
问题是什么是挂载?
Vue里面的挂载就是找到模板只解析虚拟DOM,然后往真实DOM去转,然后把这个真实的DOM元素放入到页面。放入官方一点的说法就是挂载

//Vue完成模板的解析并把初始的真实DOM元素放入页面后(完成挂载)调用mounted
    mounted(){

    }

Vue完成模板的解析并把初始的真实DOM元素放入页面后(完成挂载)调用mounted

mounted在vm的工作过程种它只调一次,

mounted(){
    console.log('mounted')
}

mounted

那就在这个函数里面开启你的定时器

mounted(){
    console.log('mounted')
    setInterval(()=>{
        this.opacity -= 0.01
        if(this.opacity <= 0){this.opacity = 1}
    },16)
}

所谓的生命周期指的就是这些特殊的函数mounted就是一个普普通通的函数，只不过这个函数是Vue在一个关键性的时刻帮我们调用的

但是Vue实例在干活的时候是分为很多步骤的，在mounted之前它都调用了很多函数,在mounted后面起了一俩个函数,我们把这么一堆函数称为Vue生命周期函数(因为在整个vm干活当中特殊的时间点去帮你调用的)

这里的this为什么是vm，箭头函数往外找,找到mounted的this，Vue在帮你调mounted的时候this已经帮你维护好了，就是vm

vm的生命周期指的就是vm的一生

总结

生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm或者组件实例对象

结城明日奈是我老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2.0 生命周期引出生命周期

引出Vue生命周期，有个Vue特殊时期的一个函数,叫mounted(挂载完成)
复制链接

扫一扫

专栏目录

vue2.0 生命周期 引出生命周期

总结

“相关推荐”对你有帮助么？

vue2.0 生命周期引出生命周期