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

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

news 2024/9/25 20:48:37

生命周期

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

生命周期是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 = falsenew Vue({el:"#root",data:{opacity:1},//Vue完成模板的解析并把初始的真实的DOM元素放入页面后（完成挂载）调用mountedmounted(){setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0)this.opacity = 1},20)}})</script>
</html>

常用的生命周期钩子：

created：发送初始ajax请求
mounted：启动定时器、绑定自定义事件、订阅消息等（初始化工作）
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.mrgr.cn/news/36079.html