Vue学习09--生命周期

Vue学习09–生命周期

生命周期 – 钩子函数

生命周期实际上是指虚拟dom的整个生命周期

关于生命周期

指一个组件从创建到销毁的整个过程

划分为四个阶段：

创建 --> 挂载 --> 更新 --> 销毁
​

每一个阶段会划分为两个小阶段：xxx之前，xxx之后

一二阶段

创建和挂载：create、mount
创建：之前 -> beforeCreate，之后 -> created
挂载：之前 -> beforeMount，之后 -> mounted
​

beforeCreate：啥也干不了，节点也拿不到，赋值也拿不到赋值的对象
created： 创建后生命周期 – 非常重要，以后页面的初始赋值都应该在这个生命周期完成，在其中赋值不会触发更新生命周期
beforeMount：挂载前生命周期
mounted：挂载后生命周期 – 非常重要，可以获取到页面的节点，在其中赋值回引起页面更新
​

三四阶段

更新：之前 -> beforeUpdate，之后 -> updated
销毁：之前 -> beforeDestroy，之后 -> destroy
​

beforeUpdate：只有数据与Vdom进行关联后，数据变化才会引起更新这个生命周期，获取属性是更改了的，获取节点的值是变化之前的
updated：获取属性和节点的值都是变化之后的
beforeDestroy：销毁前生命周期 – 非常重要，因为这个生命周期可以获取到dom节点 使用它来实现事件注销、销毁定时器
destroy：销毁之后生命周期，啥都获取不到了，啥都处理不了
​

面试题：

1、生命周期在初始化的时候，哪些生命周期常用？
答：创建之后，挂载之后，销毁之前三个最常用。
​

2、created和mounted有什么区别？
答：created不能获取dom节点，mounted能获取到dom节点。
​

3、什么时候用created、mounted？
答：如果不需要对dom进行操作用created，反之用mounted；并且mounted中的数据更新会引起更新生命周期，created不会引起更新生命周期。
​

Vue的部分规则：

​

1、在vue中有一个规则，如果注册组件的时候，有大写字母，在使用的时候可以把大写字母写为小写字母，
从第二个字符开始，如果是大写字母，需要在这个字母之前添加一个"-"之后，把大写改为小写
即：
​

2、在vue中，不能直接使用id或则其它选择器来获取dom节点，因为获取的dom是有可能会发生变化的，因此需要使用一个关联方法来获取
第一步：在需要使用的dom对象添加一个关联属性 -> 在标签内添加属性 ref=“名字”
第二步：需要使用一个$refs方法来获取dom对象->this.$refs.名字
​

3、如果是赋值这样简单的代码，可以直接在 @xxx 中进行编写
​

规则使用示例：

<template>
    <div>
        <!-- 第一步：在需要使用的dom对象添加一个关联属性 -> ref -->
        <h4 ref="myNode">This is componnet!</h4>

        <hr/>
        <!-- 如果是赋值这样简单的代码，可以直接在click中进行编写 -->
        <button @click="show = !show">{{show ? '隐藏' : '显示'}}组件</button>
        <child-node v-if="show"/>
      
    </div>
</template>
<script>
  import ChildNode from './Child.vue'
  
  exports default{
       beforeDestroy() {
            // 第二步：需要使用一个$refs方法来获取dom对象
            console.log('获取dom节点为：', this.$refs.myNode)
        }，
        components: {
            ChildNode
        },
        // 定义数据
        data() {
            return {
                show: false
            }
        },
  }
</script>