vue2(5)-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62520946/article/details/126422577

本文深入探讨了Vue组件的生命周期，包括mounted和beforeDestroy等关键钩子，以及组件的模块化思想。通过实例展示了非单文件组件的创建、注册和使用，解释了为何data要用对象式。同时，介绍了组件嵌套和单文件组件的特点。最后，阐述了VueComponent的构造函数原理及组件实例与Vue原型的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期

this.$el是真实DOM

常用的生命周期钩子：

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

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何消息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为i即便操作数据，也不会再触发更新流程

对组件的理解

模块：

定义：向外提供特定功能的js程序，一般就是一个js文件
为什么要用？js文件很多很复杂
作用：复用js，简化js的编写，提高js运行效率

组件：

理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image...)
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率

模块化：

当应用的js都以模块来编写的，那这个应用就是一个模块化的应用

组件化：

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

非单文件组件

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

定义组件（创建组件）
注册组件
使用组件（写组件标签）

1.如何定义一个组件？

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

el不要写，为什么？——最终所有的组件都要结果一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系

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

2.如何注册组件？

局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component('组件名’，组件)

3.编写组件标签：

<school></school>

非单文件组件和单文件组件的区别：

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

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

为什么data要用对象式？

// 当data用对象式式
    let data={
        a:1,
        b:2
    }
    const x1=data
    const x2=data

function data(){
        return{
            a:1,
            b:2
        }
    }
    const x1=data()
    const x2=data()

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <hello></hello>
        <hr>
        <!-- 第三步，编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
// 第一步，创建school组件
    const school=Vue.extend({
        template:`
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
        </div>
        `,
        data(){
            return{
                schoolName:'尚硅谷',
                address:'北京',
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    const student=Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data(){
            return{
                studentName:'a',
                age:18
            }
        }
    })

    const hello=Vue.extend({
        template:`
        <div>
            <h2>你好呀！{{name}}</h2>
        </div>
        `,
        data(){
            return{
                name:'田园犬'
            }
        }
    })
    
    // 第二步，全局注册组件
    Vue.component('hello',hello)
    // 创建vm
    new Vue({
        el:'#root',
        // 第二步，注册组件（局部注册）
        components:{
            school,
            student
        }

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

几个注意点

1.关于组件名：

一个单词组成：

首字母小写：school
首字母大写：School

多个单词组成：

kebab-case命名：my-school
CamelCase命名：Myschool（需要Vue脚手架支持）

备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2，H2都不行
可以使用name配置指定组件在开发者工具中呈现的名字

2.关于组件标签

第一种写法：<school></school>
第二种写法：</school>

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

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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <h1>{{msg}}</h1>
        <my-school></my-school>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    // 简写
    const s={
        template:`
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
        `,
        data(){
            return{
                name:'atguigu',
                address:'北京'
            }
        }

    }
    new Vue({
        el:'#root',
        data:{
            msg:'你好呀'
        },
        components:{
            'my-school':s
        }

    })

</script>
</html>

组件嵌套

<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="root">
        <app></app>
    </div>
</body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    // 定义student组件
    const student=Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data(){
            return{
                name:'a',
                age:18
            }
        }
    })
    // 定义school组件
    const school={
        template:`
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
            <student></student>
        </div>
        `,
        data(){
            return{
                name:'atguigu',
                address:'北京'
            }
        },
        components:{
            student
        }
    }
    // 定义hello组件
    const hello=Vue.extend({
        template:`<h1>{{msg}}</h1>`,
        data(){
            return{
                msg:'欢迎来到尚硅谷学习！'
            }
        }
    })
    // 定义app组件
    const app=Vue.extend({
        template:`
        <div>
            <hello></hello>
            <school></school>
        </div>
        `,
        components:{
            school,
            hello
        }
    })
    
    new Vue({
        template:`<app></app>`,
        el:'#root',
        // 注册组件
        components:{
            app,
        }
    })
</script>
</html>

VueCompomponent

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

2.我们只需要写<school></school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的:new VueComponent(options)

3.特别注意：每次调用Vue.extend,返回的都是一个个新的VueComponent

4.关于this的指向：

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数、它们的this均是Vue实例对象

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象），Vue的实例对象，简称vm

一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法

单文件组件

index.html

<!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>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <script src="./vue.js"></script>
    <script src="./153.main.js"></script>

</body>
</html>

main.js

import App from './152.App.vue'

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

App.vue

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 引入组件
import School from './150.School.vue'
import Student from './151.Student.vue'
    export default {
    name:'App',
    components:{
        School,
        Student
    }
    }
</script>

School.vue

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 引入组件
import School from './150.School.vue'
import Student from './151.Student.vue'
    export default {
    name:'App',
    components:{
        School,
        Student
    }
    }
</script>

Student.vue

<template>
<!-- 组件的结构 -->
<div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
</div>
</template>

<script>
// 组件交互相关的代码（数据、方法等）
// 分别暴露、统一暴露   在school前加export
export default{
    name:'Student',
    data(){
        return{
            name:'张三',
            age:18
        }
    }
}
</script>