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

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

article 2024/9/24 7:11:34

生命周期

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

生命周期是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/news/317166.html