一文搞定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