vue——生命周期、组件、

最新推荐文章于 2025-08-18 16:40:12 发布

原创最新推荐文章于 2025-08-18 16:40:12 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #组件化 #javascript

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

Vue

87 篇文章

订阅专栏

es6

73 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期函数及其应用，如mounted用于初始化操作，beforeDestroy用于清理工作。同时，文章讲解了Vue组件的创建、注册与使用，强调了组件的复用性和重要性，并提到了组件名的规范。此外，还探讨了VueComponent实例对象的this指向及组件内函数的上下文。

生命周期

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

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 属性名opacity和属性值opacity一致，可简写 -->
        <h2 :style="{opacity}">欢迎学习vue</h2>
    </div>
    <script>
        const vm = new Vue({
                el: '#root',
                data: {
                    opacity: 1
                },
                // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
                mounted() {
                    setInterval(() => {
                        vm.opacity -= 0.01
                        if (vm.opacity <= 0) {
                            vm.opacity = 1
                        }
                    }, 16);
                },
            })
            /* setInterval(() => {
                vm.opacity -= 0.01
                if (vm.opacity <= 0) {
                    vm.opacity = 1
                }
            }, 16); */
    </script>
</body>

</html>

常用的生命周期钩子：

1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作

2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作

关于销毁vue实例：

1.销毁后借助vue开发工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎你来到VUE世界</h2>
        <button @click="stop">点我停止变换</button>
    </div>
    <script>
        // 生命周期函数中的this都是指向vm
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1,
                timer: ''
            },
            beforeCreate() {

            },
            created() {

            },
            beforeMount() {

            },
            mounted() {
                // 开启定时器
                this.timer = setInterval(() => {
                    this.opacity -= 0.05
                    if (this.opacity <= 0) {
                        this.opacity = 1
                    }
                }, 160)
            },
            beforeDestroy() {
                // 清除定时器
                clearInterval(this.timer)
            },
            destroyed() {

            },
            methods: {
                stop() {
                    // 清除定时器
                    // clearInterval(this.timer)
                    // $destroy()：会触发销毁阶段的两个钩子函数
                    this.$destroy()
                }
            },
        })
    </script>
</body>

</html>

组件

组件：用来实现应用中局部功能代码和资源的一个集合

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

模块：向外提供特定功能的js程序，一般就是一个js文件

模块的作用：复用js，简化js的编写，提高js运行效率

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

单文件组件：一个文件中只包含有一个组件

vue中使用组件的三大步骤：

1.定义组件（创建组件）

2.注册组件

3.使用组件（写组件标签）

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有一定的区别：

区别如下：

1.1 el配置项不需要写——最终所有的组件都要通过一个vm管理，由vm中的el决定服务于哪个容器

2.1 data必须写成函数——避免组件被复用时，数据存在引用关系

备注：使用template可以配置组件结构

二、如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component（‘组件名’,组件）

三、编写组件标签

<组件名></组件名>或<组件名 />

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <h2>学校名称：{{schoolName}}</h2>
        <h3>学校地址：{{schoolAddress}}</h3>
        <hr>
        <p>学生姓名：{{studentName}}</p>
        <p>学生年龄：{{studentAge}}</p> -->
        <!-- 3.编写组件标签 -->
        <xuexiao></xuexiao>
        <xuesheng></xuesheng>
    </div>
    <div id="app">
        <hello />
    </div>
</body>
<script>
    // 1.创建school组件
    const school = Vue.extend({
        // el: '#root',不需要写el配置项，因为最终所有的组件都会被一个vm管理，由vm决定服务于那个容器
        // data要用函数形式
        data() {
            return {
                schoolName: '相思湖学院',
                schoolAddress: '南宁市西乡塘区',
            }
        },
        template: `<div>
            <h2>学校名称：{{schoolName}}</h2>
        <h3>学校地址：{{schoolAddress}}</h3>
            </div>`
    });
    //1.创建student组件
    const student = Vue.extend({
        data() {
            return {
                studentName: '某某某',
                studentAge: 20
            }
        },
        template: `<div>
            <p>学生姓名：{{studentName}}</p>
        <p>学生年龄：{{studentAge}}</p>
            </div>`
    });
    const hello = Vue.extend({
            template: `<div>
            <h5>你好啊!{{name}}</h5>
            </div>`,
            data() {
                return {
                    name: '打工人'
                }
            },
        })
        // 全局注册
    Vue.component('hello', hello)
    new Vue({
        el: '#root',
        /* data() {
            return {
                schoolName: '相思湖学院',
                schoolAddress: '南宁市西乡塘区',
                studentName: '某某某',
                studentAge: 20
            }
        }, */
        // 注册组件（局部注册）
        components: {
            xuexiao: school,
            xuesheng: student
        }
    })
    new Vue({
        el: '#app',
    })
</script>

</html>

组件的注意点

1.关于组件名：

1.1 一个单词组成：

1.1.1 首字母小写：school

1.1.2 首字母大写：School

1.2 多个单词组成：

1.2.1 kebab-case：my-school

1.2.2 CameCase：MySchool（在脚手架中使用）

1.3 备注：

1.3.1 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行

1.3.2 可以使用name配置项指定组件在开发者工具中呈现的名字

2.关于组件标签：

2.1

2.2

备注：不使用脚手架时，会导致后续的组件不能渲染

3.简写方式：

const school = Vue.extend(options) <==> const school = options

<!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>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>{{msg}}</h2>
        <school>
        </school>

    </div>
    <script>
        const student = Vue.extend({
            name: 'stu',
            template: `<div>
            <p>学生姓名：{{name}}</p>
            <p>学生年龄：{{age}}</p>
            </div>`,
            data() {
                return {
                    name: '相思湖学院',
                    age: 22
                }
            },
        });
        // 组件嵌套：在组件内注册组件，使组件内的模板使用组件
        const school = Vue.extend({
            // 在vue开发者工具中显示的
            name: 'sch',
            template: `<div>
            <p>学校名称：{{name}}</p>
            <p>学校地址：{{address}}</p>
        <student></student>
            </div>`,
            data() {
                return {
                    name: '相思湖学院',
                    address: '南宁市西乡塘区'
                }
            },
            components: {
                student

            }
        });

        new Vue({
            el: '#root',
            data: {
                msg: '欢迎大家'
            },
            components: {
                school
            }
        })
    </script>
</body>

</html>

关于VueComponent：

1.组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

我们只需要写了组件标签，Vue解析时会帮我们创建对应组件的实例对象，即vue会帮我们执行的：new VueComponent(options)
特别注意：每次调用vue.extend,返回的都是一个全新的VueComponent
关于this指向：

4.1 组件配置项：

data函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是VueComponent实例对象

4.2 new Vue()配置项：

data函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是Vue实例对象

5. VueComponent的实例对象，以后简称vc；Vue的实例对象简称vm