Vue(Vue2+Vue3)——22.生命周期、23.对组件的理解

简介: Vue(Vue2+Vue3)——22.生命周期、23.对组件的理解

22 生命周期


又名:生命周期回调函数,生命周期函数,生命周期钩子

所谓的生命周期就是指vue的一些特殊的函数,只不过这些函数vue会在关键的时刻去调用


22.1 引出生命周期


生命周期图示


想要学习研究最完整的生命周期,应该参考vue官网提供的生命周期图,

虽然图很长,但是需要我们用到的钩子就那几个


编写案例


通过案例引入说明

需求:展示一串文字,初始化的时候透明度为1,随后透明度越来越低


js定时器实现


首先使用js定时器实现

虽然实现了效果,但是不完美

为什么不完美呢?因为现在的代码好像被割裂开一样,不能被vue全部使用,而是在vue外面又写了定时器控制vue元素

这时候就要说下mounted(挂载)函数了


mounted(挂载)函数


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

vue默认维护mounted中的this是vue实例对象或者组件实例对象

加入mounted函数后继续查看效果,也是没问题的

相关代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- style绑定,需要写入键值对的格式,如果键值一样,可以只写键 -->
        <h2 :style="{opacity}">欢迎学习vue</h2>
    </div>
</body> 
<script type="text/javascript">
     const vm=  new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods:{
        },
        // 调用时机:vue完成模板的解析并且把初识的真实DOM元素放入页面后(挂载完毕)调用mounted
        mounted() {
            setInterval(() => {
            // 视觉美观设置的参数
            vm.opacity-=0.01
            // 如果透明度消失了就重新设置为1
            if(this.opacity<=0){
                this.opacity=1
            }
         }, 16);
        },
    })
</script>
</html>


总结


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




22.2 生命周期总结


挂载流程是整个生命周期最长的流程

哪个钩子中会导致生命周期和数据尚未保持同步:beforeUpdate函数

vue有8个生命周期,也可以说4对生命周期

1 beforeCreate,created(创建之前,创建完毕)这里的初始化不是指的vm实例,而是数据检测,数据代理

2 beforeMount,mounted(挂载之前,挂载完毕)

3 beforeUpdate,updated(修改之前,修改完毕))

4 beforeDestory,destoryed(销毁之前,销毁完毕)):销毁的时候就要做一些收尾的事情,比如关闭定时器,取消订阅等


23 对组件的理解


在vue中,组件是有两种编写格式的,第一种格式叫非单文本组件,第二种格式叫单文本组件

非单文本组件:一个文件中含有多个组件,也叫多文本组件,比如demo.html里面包含js,css...

单文本组件(使用较多):一个文件中只有1个组件,一个文件只有一个组件,是一一对应的,比如demo.vue


组件的本质就是构造函数


理解:用来实现局部(特定)功能效果的代码集合(js,css,html,image,mp3,zip...)

为什么:一个界面的功能很复杂

作用:复用编码。简化项目编码,提供运行效率

相关文章
|
24天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
127 1
|
3天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
27 8
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
165 64
|
4天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
26 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
62 8
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
59 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
55 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
47 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
41 1
vue学习第7章(循环)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等