vue生命周期，组件，slot替换，tab切换，简易留言板

最新推荐文章于 2025-02-14 14:52:46 发布

郭豪杨

最新推荐文章于 2025-02-14 14:52:46 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/83744912

本文深入解析Vue.js的生命周期，从实例创建到销毁的全过程，详细介绍了各阶段的作用及应用场景，如数据初始化、DOM操作、状态处理等，为开发者提供实用指南。

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

data规范：

data:(){

return{

arr:[{ a: "wan1", b: "在线", c: 5000},
    { a: "wan2", b: "离线", c: 4000},
    { a: "wan3", b: "在线", c: 3000}],

cont:'0',

id_Active:'true'

}

vue里的生命周期是什么？
vue实例从创建到销毁的过程称之为vue的生命周期

vue的生命周期各阶段都做了什么？
beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的
created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el选项的DOM节点被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory：实例销毁之前调用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue生命周期在真实场景下的业务应用
created：进行ajax请求异步数据的获取、初始化数据
mounted：挂载元素内dom节点的获取
nextTick：针对单一事件更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理

各个函数的应用：

1：beforecreated:

在实例创建之前，数据还没有初始化dom结构还没有挂载

2：created：

实例已创建完成之后被调用，完成了属性和方法的运算，初始化完毕，dom结构依然没有挂载，

在这个函数里面可以执行一些函数自调用和一些数据的初始化

3：beforemount

在挂载开始之前被调用，初始化完毕，dom结构依然没有挂载

4：mounted

在挂载完成之后被调用，初始化完毕dom结构已经挂载，在这个钩子里面可以进行一些数据的交互

dom结构的操作

5：beforeupdate updated

更新时调用，以及更新完成时调用，这个放在一起来看；当然这里面我们添加一个事件，用来更改dom

结构中的文字

子组件：：

components:{
     'child':{
         data(){
             return{
                 cont:'0',
                 id_Active:'true'
             }
         },
         template: '<div><div :class="{clss:id_Active}">数据显示</div> <button @click="fn">{{cont}}</button></div>',
         methods:{
             fn:function () {
                 this.cont++
             }
         }
     }
}

style类名的添加确认：

data(){
    return{
        cont:'0',
        id_Active:'true'
    }
},

<div :class="{clss:id_Active}">数据显示</div>  如果是true的话元素显示false的话，不显示

子组件案例：：

components:{
     'child':{
         data(){
             return{
                 cont:'0',
                 id_Active:'true'
             }
         },
         template: '<div><div :class="{clss:id_Active}">数据显示</div> <button @click="fn">{{cont}}</button></div>',
         methods:{
             fn:function () {
                 this.cont++
             }
         }
     }
}

vue选项卡效果

<div id="jin_list">
<button v-for="(item,index) in str" :class="{active:index==msage}" @click="flis(index)">
    {{index+1}}
</button>

<div v-for="(item,index) in str" :class="{show:index==msage}">
    {{item}}
</div>
</div>

#jin_list>div{
    display: none;
}
.active{
    background: deeppink;
}
#jin_list>div.show{
    display: block;
}

new Vue({

el:'#app',

data(){

return{

msage:'0'

}

methods:{

flis:function(index){

this.msage=index

}

})

slot方法：

Vue.component('Tb',{
    template:'<div>头部内容</div>'
});

Vue.component('Db',{
    template:'<div>底部内容</div>'
});

Vue.component('page',{
    template:"<div><slot name='Tb'>没数据的时候显示slot</slot><slot name='Db'>没数据的时候显示slot</slot><h1>hello,我的朋友</h1></div>"
})

<page>
    <Td slot="Tb"></Td>
    <Db slot="Db"></Db>
</page>

简易留言板

new.Vue({

el:"#app",

data(){

return{

mas:null,
text_:null,
 con_arr:[],

}

methods:{
     del(index){
         this.con_arr.splice(index,1)
     },
     sub(){
         var obj={
             use:this.text_,
             name:this.mas
         };
         this.con_arr.push(obj);
     },

})

html

<h1>留言板</h1>

用户名 <input type="text" v-model="mas">

内容：<textarea v-model="text_"></textarea>

<button @click="sub">提交按钮</button>

显示内容：
<div v-for="(item,index) in con_arr">
    {{item.use}}<br>
    {{item.name}}
    <button @click="del(index)">删除按钮</button>
</div>