当前位置： 首页 > article >正文

Vue学习（五）生命周期、组件

article 2024/11/15 11:15:08

生命周期

生命周期，又名生命周期回调函数、生命周期函数、生命周期钩子。

生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数。

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

生命周期中的this指向的是vm或者组件实例对象

Vue生命周期图示：

详细图示2：

例：mounted生命钩子的使用，使得相应的文字的透明度呈现闪烁效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../vue.js"></script>
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:"#root",
        data:{
            opacity:1
        },
        //Vue完成模板的解析并把初始的真实的DOM元素放入页面后（完成挂载）调用mounted
        mounted(){
            setInterval(() => {
            this.opacity -= 0.01
                if (this.opacity <= 0)
                this.opacity = 1
            },20)
        }
    })

</script>
</html>

常用的生命周期钩子：

  • mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等 （初始化工作）
  • beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等 （收尾工作）

关于销毁Vue实例：

  • 销毁后自定义事件会失效，但是原生DOM事件依然有效。
  • 一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

组件

组件的定义：实现组件应用中局部功能代码和资源的集合。

组件的作用是复用编码，简化项目编码，提高运行效率。

组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文件组件

非单文件组件即一个文件中包含有n个组件。

步骤：

  • 定义组件：使用Vue.extend(option)函数创建，组件内容option和new Vue(option)时传入的那个option大致，但是有一些不同：
    • 不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    • data在组件中要写做函数的格式,data的数据写作对象的形式return返回，避免组件被复用，数据存在引用关系
    • 组件的html结构写在template属性中（见案例）
    • 其他的属性比如methods、computed等写法一致
  • 注册组件：
    • 局部注册：new Vue的时候传入components选项，其中属性使用 组件名:组件定义时对应的变量名 的kv格式，如果组件名和组件定义时的变量名相同，可以只写一个组件名（见下案例）
  • 编写组件标签：
    • 组件标签写作一个双标签，标签名为组件名

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../vue.js"></script>
    <link rel="icon" href="../favicon.ico">
    <title>非单文件组件</title>
</head>
<body>
    <div id="root">
        <!-- 编写组件标签 -->
        <xuexiao></xuexiao>
        <hr><hr>
        <!-- 编写组件标签 -->
        <student></student>
        <hr><hr>
        <hello></hello>
    </div>
    <br><br>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script>

    //创建组件
    const school = Vue.extend({
        //不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){//data在组件中要写做函数的格式,data的数据写作对象的形式return返回
           return {
            name:'井冈山大学',
            address:'北京昌平',
            }
        },
        template:`
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
        </div>
        `,
        methods:{
            showName(){
                alert(this.name)
            }
        }
    })

        //创建组件
    const student = Vue.extend({
        //不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){//data在组件中要写做函数的格式,data的数据写作对象的形式return返回
           return {
            name:'李二狗',
            age:20,
            }
        },
        template:`
        <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `
    })

    const hello = Vue.extend({
        data(){
            return{
                name:'二狗'
            }
        },
        template:`
        <div>
            <h2>你好呀，{{name}}</h2>
        </div>
        `
    })

    //全局注册
    Vue.component('hello',hello)

    new Vue({
        el:'#root',
        components:{
            xuexiao:school,
            student
        }
    })

    new Vue({
        el:'#root2'
    })
</script>
</html>

组件定义简写方式：

const school = Vue.extend(options) 可以简写为 const school = options

组件的嵌套

如果想要在一个组件中包含其他组件，则其子组件要在父组件的components属性配置项中进行注册，要注意子组件要在父组件之前定义。例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../vue.js"></script>
    <link rel="icon" href="../favicon.ico">
    <title>非单文件组件</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>

    //创建子组件,这个子组件要放在父组件之前定义
    const student = Vue.extend({
    //不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data(){//data在组件中要写做函数的格式,data的数据写作对象的形式return返回
        return {
        name:'熊mao',
        age:20,
        }
    },
    template:`
    <div>
        <h2>学生名称：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
    `
    })

    //创建组件
    const school = Vue.extend({
    //不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
    data(){//data在组件中要写做函数的格式,data的数据写作对象的形式return返回
        return {
        name:'井冈山大学',
        address:'北京昌平',
        }
    },
    template:`
    <div>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <student></student>
    </div>
    `,components:{
        student
    }
    })

    const hello = Vue.extend({
        data(){
            return{
                name:'二狗'
            }
        },
        template:`
        <div>
            <h2>你好呀，{{name}}</h2>
        </div>
        `
    })

    //定义app组件
    const app = Vue.extend({
        components:{
            school,
            hello
        },template:`
        <div>
            <hello></hello>
            <school></school>
        </div>
        `
    })

    new Vue({
        el:'#root',
        components:{
            app
        },template:`
        <app></app>
        `
    })
</script>
</html>

关于VueComponent：

  • school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，而是由Vue.extend生成的。编写组件标签后Vue解析时会帮我们创建school组件的实例对象，帮我们执行new VueComponent(options)。
  • 在组件中，data、methods中的函数、watch中的函数、computed中的函数，它们的this均是该组件的VueComponent实例对象（简称vc）
  • VueComponent和Vue有一个内置关系：VueComponent.prototype.proto === Vue.prototype，让组件实例对象vc可以访问到Vue原型上的属性、方法。

单文件组件

单文件组件的案例：

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default {
        name:"School",
        //不要写el属性，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){//data在组件中要写做函数的格式,data的数据写作对象的形式return返回
           return {
            name:'井冈山大学',
            address:'北京昌平',
            }
        },
        methods:{
            showName(){
                alert(this.name)
            }
        }
    }
    
</script>

<style>
    .demo{
        background-color: orange;
    }
</style>

单文件组件中：

  • template标签是用于写组件的html结构。
  • script中定义vue实例对象，写交互逻辑，其中的export default { option }就是在创建vue实例并默认向外暴露，option中就是new Vue({option})中的option的内容。
  • style标签用于写组件要使用的样式。

Vue脚手架

Vue脚手架的结构：（src下）

  • node_modules：各种依赖的存放
  • public：
    • favicon.ico：页签图标
    • index.html：主页面
  • src
    • assets：用于存放静态资源
    • components：用于存放各个单文件组件
    • App.vue：用于汇集各个组件到一起，为父组件，最后会渲染到脚手架的public目录下的index.html上
    • main.js：配置vm信息，且是程序的入口
  • vue.config.js配置文件：配置一些vue中的参数

http://www.kler.cn/a/317166.html

相关文章：

  • 鸿蒙HarmonyOS 地图不显示解决方案
  • Linux基础1
  • 【练习案例】30个 CSS Javascript 加载器动画效果
  • 中文书籍对《人月神话》的引用（161-210本）：微软的秘密
  • Ue5 umg学习（一）
  • 后端接口返回二进制文件，前端 window.opent预览展示
  • IT行业的现状与未来发展趋势
  • 数据库主备副本物理复制和逻辑复制对比
  • 除猫毛用粘毛器还是宠物空气净化器?希喂/米家/352/范罗士/有哈空气净化器对比
  • vue3＜script setup＞中computed
  • ELK环境部署
  • Codeforces Round 971 (Div. 4) G1. Yunli‘s Subarray Queries (easy version)
  • 2024年中国科技核心期刊目录（科普卷）
  • 快速理解TCP协议（三）——TCP协议的三次握手与四次挥手
  • 苍穹外卖学习笔记(九)
  • 【Webpack--012】提取单独的CSS文件压缩CSS文件
  • leetcode：验证回文串
  • 综合时如何计算net delay？
  • 【最基础最直观的排序 —— 冒泡排序算法】
  • 公安局党建平台建设方案和必要性-———未来之窗行业应用跨平台架构
  • 电动车车牌识别系统源码分享
  • 【LIO-SAM】LIO-SAM论文翻译（2020年）
  • 【揭秘Java】线程安全中的有序性之谜
  • 【Hive 运维】JDBC使用Hive UDF：Hive UDF打通hiveserver2
  • idea多模块启动
  • uniapp 动态修改input样式