Vue 生命周期总结与思考实验

最新推荐文章于 2022-10-25 10:44:41 发布

performer丶

最新推荐文章于 2022-10-25 10:44:41 发布

阅读量421

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/publicv/article/details/83759083

版权

Vue学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

生命周期函数就是 Vue 实例在某一个时间点自动执行的函数

先上图，一步一步讲解

建议边看生命周期图边看最下面的步骤一步一步的走，有不理解的地方看看注释。并且在事件中多实验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">hello Vue</div>
    <script>

        //  生命周期函数就是 Vue 实例在某一个时间点自动执行的函数
        //  总共有11个生命周期钩子   图上有8个生命周期钩子

        
       /**
         * 1：首先它会去 初始化事件 和 生命周期相关的一些内容 最基础的初始化完成
         *    在图中就是 Init  Events & Lifecycle
         * 2：Vue 会自动的执行  beforeCreate 生命周期函数
         * 3：Vue 会继续的处理一些外部的注入包括双向的一些绑定相关的内容，
         *    当这部分的初始化也完成了之后，实例的一些初始化也都完成了。
         * 4:在这个节点上会自动的执行 created生命周期函数, Vue的初始化基本上已经结束
         * 5:然后会去判断我这个实例上是否有  el属性，如果有就会走Yes这条线。
         * 6:紧接着又会询问 我这个实例上是否有  template  这个属性
         * 6-1:如果没有tempate 就会去走右侧的分支，就是把el 本身及子元素当做模板来进行渲染
         * 6-2:如果有 template 属性就会去走左边的分支，把templaet 属性值进行渲染。el就被否定了

         * 7:我们有了模板和数据之后并没有直接去进行渲染，在渲染之前呢 会自动的执行  beforeMount 生命周期函数，也就是模板和数据相结合 ，即将挂载到页面上去之前的时候回执行

         * 8:当挂载渲染到页面之上后 执行  mounted 生命周期函数
         *
         * beforeDestroy 生命周期函数   即将被销毁执行
         * destroyed 生命周期函数       被销毁之后执行
         * 会在 这个Vue 实例  调用  $destroy() 方法会被执行这两个方法
         *
         * beforeUpdate 生命周期函数   在数据发生改变还没被渲染之前执行
         * updated 生命周期函数        在重新渲染之后 会被执行
         * 会在 Vue 的数据发生改变执行
         */

        var vm = new Vue({
            el:'#app',
            data:{
              message:"this is Vue life cycle"
            },
            // template:"<div>如果有template 属性则执行template 进行渲染DOM</div>",
            template:"<div>{{message}}</div>",
            //  在创建Vue 实例之前执行的函数
            beforeCreate:function () {
                console.log('beforeCreate');
            },
            //  创建Vue  实例成功之后执行的函数
            created:function () {
                console.log('created');
            },
            //  如果有template 模板属性 则将模板编译渲染DOM
            //  如果没有template  编译el 的DOM 包含元素本身及内部的
            //  在挂载之前执行 也就是在真正渲染前执行
            beforeMount:function () {
                console.log(this.$el);
                console.log('beforeMount');
            },
            // 渲染完成执行的方法 
            mounted:function () {
                 console.log(this.$el);
                 console.log('mounted');
            },
            // 当数据发生变化时
            beforeUpdate:function () {
                console.log('beforeUpdate');
            },
            //  虚拟DOM 重新渲染 修改
            updated:function () {
                console.log('updated');
            },
            //  当执行这个Vue实例的  $destroy()  方法时执行
            beforeDestroy:function () {
                console.log(this.message);
            },
            //  当删除了Vue实例时执行的方法
            destroyed:function () {
                console.log(this.message);
            }
        })
    </script>
</body>
</html>

补充这个当时遇到没想明白，现在理解了的问题分享：

//  我们的数据对象
var data = { a: 1};

//  该对象被加入到一个 Vue 实例中
var vm = new Vue({
    data: data
});

1:打开页面，到控制台 Console 页面

data.a   
vm.a   
//    查看双方的值

2:现在改变 data.a 的值该为 520 查看vm.a 的值是否改变。是否是双向绑定

data.a = 520
vm.a

结果发现确实是如我们所料，数据是双向绑定的是引用同一个内存地址
官方文档是这么说的：

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的

但是虽然好像似懂非懂，但是不知道怎么去测试。

3:在控制台声明的新变量 dd = 888 ,并且去绑定到 vm的 data数据中

dd = 888
vm.b = dd
vm.b

4:这时候改变 vm.b = 999，去查看下 dd 结果发现 dd的值还是 888 那么对 b 的改动将不会触发任何视图的更新

5:这时候在去测试下 vm.a = 555 在去看 data.a 发现还是双向绑定的

然后，在去看文档的这句话:

如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

明白了，只有当实例被创建时 `data` 中存在的属性才是响应式的到此结束！！

performer丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 生命周期总结与思考实验

生命周期函数就是 Vue 实例在某一个时间点自动执行的函数

建议边看生命周期图 边看最下面的步骤一步一步的走，有不理解的地方看看注释。并且在事件中多实验。

补充这个当时遇到没想明白，现在理解了的问题 分享：