一文搞定vue3.0新特性-常用函数的使用与生命周期

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

一.vue3常用函数的使用

• setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中

• ref 函数在temlate中用的变量需要用ref包装下

• return出去的数组和方法在模板中才可以使用

  setup() {
    const girls = ref(["小红", "小英", "晓红"]);
    const selectGirl = ref("");
    const selectGirlFun = (index) => {
      selectGirl.value = girls.value[index];
    };
    return {
      girls,
      selectGirl,
      selectGirlFun,
    };
  },

• reactive函数的用法,他的参数不是基本类型,而是一个object,这样就你不用在方法中写.value了,同时放回data就可以

 setup() {
    const data = reactive({
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });


    return {
      data
    };
  },

但是这样写,必须在template使用变量和方法的时候需要加上data.,这样显然是不符合我们开发的编码习惯的,
我们可以想到在return的时候将data解构使用...拓展运算符,但是这样解构后就成了普通变量,不再具有响应式的能力,
所以我们需要使用toRefs()函数

• toRefs函数的用法

setup() {
    const data = reactive({
      girls: ["a", "b", "c"],
      selectGirl: "",
      selectGirlFun: (index) => {
        console.log(1111)
        data.selectGirl = data.girls[index];
      },
    });
    const refData = toRefs(data);

    return {
      ...refData,
    };
  }

如何选择ref和reactive,两种方法都可以,他们都可以生成响应式对象,个人选择reactive

二.生命周期更新

对于vue的生命周期想必大家都非熟悉,在项目中非常常用

生命周期:伴随着生命周期，给用户使用的函数，操控生命周期，主要是操控钩子函数。

vue3的生命周期

• setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
• onBeforeMount() : 组件挂载到节点上之前执行的函数。
• onMounted() : 组件挂载完成后执行的函数。
• onBeforeUpdate(): 组件更新之前执行的函数。
• onUpdated(): 组件更新完成之后执行的函数。
• onBeforeUnmount(): 组件卸载之前执行的函数。
• onUnmounted(): 组件卸载完成后执行的函数
• onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
• onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
• onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

vue3生命周期与vue2生命周期对比理解

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

vue3的生命周期函数在使用前需要先引入

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";

setup() {
  onMounted(() => {
    console.log('mounted')
  })
  onUpdated(() => {
    console.log('updated')
  })
  onRenderTriggered((event) => {
    console.log(event)
  })
}

onRenderTracked 和onRenderTriggered 钩子函数的使用

onRenderTracked =>状态跟踪,他会跟踪页面上所有响应式变量和方法的状态,也就是我们return出去的值,
只要页面有update的情况,他就会跟踪,然后生成一个event对象,我们可以通过event对象来查找程序所存在的问题
同样需要先引入

import { .... ,onRenderTracked,} from "vue";

再在setup函数中使用

onRenderTracked((event) => {
  console.log("状态跟踪组件----------->");
  console.log(event);
});

onRenderTriggered=> 状态触发,不会跟踪每一个值,而是给你变化值的信息,并且新值和旧值都会明确的展示出来
如果把onRenderTracked是每个值都追踪,而onRenderTriggered是精准追踪,进行针对性调试
使用时我们同样需要导入

import { .... ,onRenderTriggered,} from "vue";
onRenderTriggered((event) => {
  console.log("状态触发组件--------------->");
  console.log(event);
});
- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数

这样看来onRenderTriggered跟watch有一丝丝像watch