本文详细介绍了Vue.js组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等阶段，以及errorCaptured钩子。此外，还讨论了如何使用ref和$refs进行DOM操作，以及nextTick在确保视图更新后执行回调的用法。
组件生命周期
一、组件生命周期
组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，
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.log('='.repeat(100));
},
beforeMount() {
console.log('kkbComponent:beforeMount');
console.log('data', this.$data);
console.log('el', this.$el);
console.log('='.repeat(100));
},
mounted() {
console.log('kkbComponent:mounted');
console
最低0.47元/天 解锁文章
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
