首页 > 其他分享> 文章详细

Vue- 生命周期详解

2021-07-05 14:03:06 阅读：182 来源： 互联网

标签：生命周期 computed data watch value Vue 数据详解属性

一、理解

生命周期：从一个组件创建、数据初始化、编译模板、挂载Dom、渲染、更新、销毁。历经如下步骤

beforeCreate->watch->created->computed->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed

二、生命周期

生命周期图.png

1、new Vue()

实例化一个Vue实例。生命周期的钩子函数中的this，会默认指向vue的实例。

2、beforeCreate(){}

数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据

3、watch:{}

后续详细讲解

4、created(){}

完成了data 数据的初始化，el没有。以及能获取到methods下的方法了，所以在这里可以开始调用方法进行请求。

5、computed:{}

后续详细讲解

6、beforeMount(){}

也就是说实际从created到beforeMount之间，最主要的工作就是将模板或者el转换成render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。

所以挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

7、mounted(){}

数据和DOM都完成挂载（即模板完成了渲染），在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法

8、beforeUpdate(){}

实现原理：当调用时候，我们又重新生成一个新的虚拟dom(Vnode)，然后拿这个Vnode和原来的Vnode去做一个diff算，从而更新render函数中的最新数据，再讲更新后的render函数渲染成真实的dom。也就完成了我们的数据更新

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

9、updated(){}

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

10、beforeDestroy(){}

这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

11、destroyed(){}

销毁完成后

注意：

mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做

三、computed和watch

1、watch：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化。主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。其类似于监听机制+事件机制

2、computed：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性，是基于data中数据进行处理的，data数据变化，他也跟着变化。当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）

watch和computed区别：

1.watch擅长处理的场景：一个数据影响多个数据；不支持缓存，数据变，直接会触发相应的操作；watch支持异步，或者在高性能消耗操作上执行。

2.computed擅长处理的场景：一个数据受多个数据影响；支持缓存，只有依赖数据发生改变，才会重新进行计算；不支持异步；

1、watch的普通使用

<template>
  <div id="login">
    <div class="wrapper">
      <template>
        <div class="content">
          <h3>验证watch使用场景</h3>
          密码： <input v-model="nameValue" type="text" /> {{ tip }}
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nameValue: "",
      tip: "",
    };
  },
  watch: {
    // 数据变化时执行异步或开销较大的操作
     nameValue(value) { // 普通使用
       this.checkName(value);
     },
  },
  
  methods: {
    checkName(value) {
      const that = this;
      if (value === "admin") {
        that.tip = "12345";
      } else {
        that.tip = "abc123";
      }
    },
  },
};
</script>
<style>
@import "../assets/css/my.css";
</style>

2、watch高级用法

备注：上面的watch方法是当改变值时候，才会触发监听事件，但是我们刚进入页面时候，就触发监听事件，就要用handler()方法

2.1 handler()

当页面刚进入时，自动绑定watch事件，不需要进行触发

watch: {// 页面加载时，就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    }
  }
}

2.2 immediate属性：布尔值

immediate：true：首次加载、刷新、数据改变都会执行，缺点监听不到对象属性中发生改变。
immediate：false：只有发生改变才监听

  nameValue: {
      handler(value) {
        this.checkName(value);
        this.tip = "正在验证......";
      },
      immediate: true,
    },

2.3 deep:true；

是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

  nameValue: {
      handler(value) {
        this.checkName(value);
        this.tip = "正在验证......";
      },
      immediate: true,
      deep:true
    },

如果想要监听getParm里面某个值的变化，比如监听getParm对象的keyword的值，可以这么写（监听对象里的某个属性要加' '）：

watch:{
    'getParam.keyWord':{
      handler(newValue,oldValue){
        //getParam.keyWord改变，执行的函数
        ...
      },
      deep:true
    }
}

3、computed

在computed中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称直接当作属性来使用的；并不会把计算属性当作方法去调用；
注意

1、计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了；
2、只要计算属性，这个function内部，所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值；
3、计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则不会重新对计算属性求值；

<template>
  <div id="login">
    <div class="wrapper">
      <template>
        <div class="content">
          <h3>验证computed使用场景</h3>
          用户名：<span>{{ fullName }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "李",
      lastName: "四",
    };
  },
  computed: {
    fullName() {
      return this.firstName + " " + this.lastName;
    },
  },
};
</script>
<style>
@import "../assets/css/my.css";
</style>

标签：生命周期,computed,data,watch,value,Vue,数据,详解,属性
来源： https://blog.csdn.net/qq_33848658/article/details/118421017

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

ICode9