vue的生命周期

最新推荐文章于 2022-09-03 23:53:31 发布

Amourlwh

最新推荐文章于 2022-09-03 23:53:31 发布

阅读量274

点赞数

分类专栏： vue 文章标签： vue生命周期

本文链接：https://blog.csdn.net/Amourlwh/article/details/83058510

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1个函数(所有的生命周期都是函数(function)类型)

所有生命周期的钩子函数都是自动绑定this的上下文实例中,所以在函数内可以访问vue数据操作vue属性

不能使用箭头函数定义生命周期的方法,箭头函数是绑定父级的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">{{msg}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    见下文
</script>
</body>
</html>

script内容如下

var vm=new Vue({
        el:"#app",
        data:{
            msg:123
        },
        beforeCreate:function () {
            console.log("beforeCreate")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
            this.$nextTick(function () {
                console.log(this.$data+"--------")
            })
        },
        created:function () {
            console.log("创建完成")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        beforeMount:function () {
            console.log("挂载前")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        mounted:function () {
            console.log("挂载")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        beforeUpdate:function () {
            console.log("更新")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        updated:function () {
            console.log("updated")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        activated:function(){
            console.log("激活组件")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        activated:function(){
            console.log("关闭组件")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        beforeDestroy:function () {
            console.log("销毁前")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        destroyed:function () {
            console.log("销毁")
            console.log(this.$el)
            console.log(this.$data)
            console.log(this.msg)
        },
        errorCaptured:function () {
            console.log("收集开发坏境中的错误，并且可以捕获到子组件的错误")
        }
    })

注：没有数据更新和销毁，所以只会执行到挂载

beforeCreate()
//     vue实例初始化之后，数据观测和事件配置之前被调用
//     数据没有监听，没有绑定到vue对象实例，没有挂载对象，更娶不到date中的数据
//     没有数据更新和销毁   只会执行到挂载

created：实例化完成后调用，这一步已经完成如下配置：
// 数据观测，属性和方法的运算，事件回调，但是挂载还没开始，所以$el属性在该阶段不可见
// 一般会在Created函数中调用ajax获取页面初始化所需的数据

beforeMount:挂载之前调用，相关的渲染函数还没有被调用，该函数在服务器渲染期间不会被调用，还没有放入Dom结构中（还没有挂载）

mounted:el被新创建的vm.$el所替换，并且挂载到实力上，如果root实例文档内元素，当挂在时候vm.$el也会在文档里

执行结束，this.￥el.元素就可以看到了

beforeupdate：数据更新的时候调用，发生在虚拟dom打补丁之前，用在更新之前访问现有dom

beforeupdate：数据更新的时候调用，发生在虚拟dom打补丁之前，用在更新之前访问现有dom // 如：手动移除事件监听器 // 该函数在服务器端渲染器件不会被调用，应为只有初次渲染才会在服务端进行

// updated:数据的改变导致虚拟dom会重新渲染并打补丁，在这之后就会调用该函数
// 在这个函数中通产可以做依赖于dom的操作
//
//     注意：update不能保证所有的子组件都会被更新重绘
//     如果需要所有的视图都重回，也可以使用$nextTick替换updated
//     updated:function () {
//         this.$nextTick(function(){
//             ...
//         })
//     }

activated:组件激活的时候调用，服务器渲染器件不会被调用

deactivated：组件停用的时候调用

beforeDestroy:在vue实例被销毁之前调用，在此阶段vue实例仍能使用

destroyed：调用vm.$destroy();

控制台输出

vue被销毁
// 事件监听移除，自实例也会被销毁

errorCaptured；vue.2.5+新增
// 当捕获子组件的错误时会被笑拥
//     接受到三个参数
//         错误对象：Error;  发生错误的组件，以及错误无信息
        // 如果该函数返回false，就可以阻止该错误向上继续传播

Amourlwh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的生命周期

1个函数(所有的生命周期都是函数(function)类型) 所有生命周期的钩子函数都是自动绑定this的上下文实例中,所以在函数内可以访问vue数据操作vue属性不能使用箭头函数定义生命周期的方法,箭头函数是绑定父级的&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta...
复制链接

扫一扫