vue生命周期

2020-06-10 12:03:36 阅读：280 来源： 互联网

起因：在某次开发项目中，有个表单内容是根据表单中，radio条件来展示不同的输入项。这就导致当有校验信息时，切换radio条件，后面的表单内容已改变，但是校验提示信息还存在的问题，问题截图如下。

注意：这里不可用调用表单的clearValidate，而是要调用表单项的clearValidate。原因是这个表单内容的前两项是固定不变的，radio的切换，不应该影响清除这两个表单项的提示信息

方法一：考虑的el-radio的change事件，在radio绑定的数据变化后，使用清除表单项提示信息的办法：

　　this.$refs.modelFunctionStringLength.clearValidate() 　　失败了，原因是在radio数据变化之后，视图更新，已经找不到this.$refs.modelFunctionStringLength，打印得到是undefined。所以我应该在视图更新之前，去调用clearValidate，主体思路没有错，需要找到合适的调用时机。

方法二：考虑要在视图更新之前调用clearValidate，我想到生命周期，使用beforeUpdate就可以啦：

　　现实是虽然解决了当前问题，但是引入了新的问题。当选择radio字符串选项时，修改其他任何表单选项（如：描述）都会触发beforeUpdate，调用this.$refs.modelFunctionStringLength.clearValidate() ，而这不是我想要的。

方法三：watch方法，经测试发现：watch可以监听radio所绑定数据的变化，在视图更新之前就可以调用clearValidate，并且只收radio变化的影响 - - 成功解决问题

哈哈~~~由于上面的问题，所以想探究一下生命周期

一、提出问题：

生命周期是什么

生命周期中钩子函数的含义、以及调用顺序

watch/computed/beforeUpdate的调用顺序

二、探究（本文参考慕课网、vue官网2.0）

1、生命周期的定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。— 官方定义

Vue 生命周期是指 Vue 实例对象从创建之初到销毁的整个过程。在生命周期的不同阶段 Vue 提供了不同的钩子函数，让用户可以在不同的阶段执行自己的代码。— 慕课网定义

2、生命周期图示

3、生命周期的钩子（你不能使用箭头函数来定义一个生命周期方法 -- 官网注释）

从上面这幅图中，可以看到 vue 生命周期可以分为八个阶段：

（1）beforeCreate -- 创建前

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用，不能获得 DOM节点

（2）created -- 创建后

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

（3）beforeMount -- 载入前（该钩子在服务器端渲染期间不被调用）

在挂载开始之前被调用：相关的 render 函数首次被调用。-- 官网

在挂载开始之前被调用：这个过程是在模版已经在内存中编译完成， render 函数首次被调用，此时完成了虚拟 DOM 的构建，但并未被渲染。-- 慕课

（4）mounted -- 载入后（该钩子在服务器端渲染期间不被调用）

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick -- 官网

这个过程在模版挂载之后被调用，页面完成渲染，在这之后所以我们可以操作和访问 DOM 元素。-- 慕课

（5）beforeUpdate -- 更新前（该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行）

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

（6）updated -- 更新后（该钩子在服务器端渲染期间不被调用）

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick

（7）beforeDestroy -- 销毁前（该钩子在服务器端渲染期间不被调用）

实例销毁之前调用。在这一步，实例仍然完全可用。

（8）destroyed -- 销毁后（该钩子在服务器端渲染期间不被调用）
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

4、实例代码运行 -- 慕课

<!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">
    {{ name }}
    <button @click="updateName">更新</button>
    <button @click="destroy">销毁</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      name:'hello !'
    },
    methods : {
      updateName() {
        console.log('准备修改名字啦！')
        this.name = 'hello 慕课！'
      },
      destroy(){
        vm.$destroy()
      }
    },
    beforeCreate() {
      // 此时页面数据未初始化
      console.log('beforeCreate:' + this.name) // beforeCreate： undefined
    },
    created() {
      // 页面数据已经初始化
      console.log('created:' + this.name) // beforeCreate： hello !
    },
    beforeMount() {
      console.log('beforeMount:' + this.name) // beforeCreate： hello !
    },
    mounted() {
      console.log('mounted:' + this.name) // beforeCreate： hello !
    },
    // 点击更新按钮后会先触发 beforeUpdate
    beforeUpdate() {
      console.log('beforeUpdate:' + this.name) // beforeCreate： hello 慕课！
    },
    updated() {
      console.log('updated:' + this.name) // updated hello 慕课 !
    },
    // 点击销毁按钮后会先触发 beforeDestroy
    beforeDestroy(){
      console.log('beforeDestroy: before destroy') // beforeDestroy: before destroy
    },
    destroyed(){
      console.log('destroyed: success') // destroyed: success
      // 在这之后点击页面 更新 按钮将无任何效果
    }
  });
</script>
</html>

标签：生命周期,实例,DOM,钩子,调用,vue,radio
来源： https://www.cnblogs.com/zkpThink/p/13083252.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue生命周期