Vue.js
文章目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kobpkweF-1600773457397)(assets/lifecycle.png)]
组件生命周期
组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法
基本生命周期函数有下面几个阶段：
- 创建阶段
- 挂载阶段
- 更新阶段
- 卸载阶段
每一个阶段都对应着 之前 和 之后 两个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{
{title}}</h1>
<button @click="show=!show">隐藏</button>
<hr>
<template v-if="hasError">
<h4>有错误发生了</h4>
</template>
<template v-else>
<kkb-component v-if="show" :t="title"></kkb-component>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const kkbComponent = {
props: ['t'],
template: `
<div>
<h1>kkbComponent - {
{t.a.b}}</h1>
</div>
`,
beforeCreate() {
console.log('kkbComponent:beforeCreate');
console.log('data', this.$data);
console.log('el', this.$el);
console.log('='.repeat(100));
},
created() {
console.log('kkbComponent:created');
console.log('data', this.$data);
console.log('el', this.$el);
console.
最低0.47元/天 解锁文章
1845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
