vue3 的setup和生命周期

vue3 的setup和生命周期

许多文章认为setup执行时间在beforeCreate 和created 之间,但是通过实际测试发现setup调用在beforecreate之前。

export default {
	beforeCreate() {
        console.log('beforeCreate running....');
    },
    created() {
        console.log("created running");
    },
    mounted() {
        console.log("mounted running");
    },
    setup() {
        let info = ref(0);
        const ins = getCurrentInstance();
        console.log('setup running....');
        return{}
        }
}

执行结果:
vue3 的setup和生命周期_第1张图片
setup确确实实是最先执行了。
在vue3中setup代替了beforeCreate和created,函数里面无法使用data和methods方法中的数据。setup是集成性api,setup中定义的变量和方法,如在template模板中使用,变量需要使用ref或者reactive关键字定义,并且将使用到的方法和变量return出去,不然页面没有效果还报错的。

  • ref 用于定义基本数据加粗样式类型,比如string、number、boolean等。ref的本质其实还是reactive,当我们给ref函数传递一个值之后,ref函数会自动的转化成{value: xx},只是中间自动帮我们套了一层value。const name = ref(1) => name: {value: 1}
  • reactive用于定义复杂数据类型,比如数组、对象等。

在setup 中,有9个旧的生命周期钩子可以访问:

beforeCreate -> use setup()
created -> use setup()
其中setup函数是整合 created跟 beforeCreat
beforeMount ->onBeforeMount (挂载前)
mounted -> onMounted (挂载后)
beforeUpdate -> onBeforeUpdate**(更新前)**
updated -> onUpdated (更新后)
beforeDestroy -> onBeforeUnmount ( 销毁前)
destroyed ->onUnmounted ( 销毁后)

通过解构赋值的方式即可引入:

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

setup 函数将接收两个参数,props&context

注意:setup函数里面是没有this对象的,使用它的话会报 undefined。

  • setup 函数将接收两个参数,props&context
    第一个参数props,主要是用来获取属性传值,在使用之前必须现在Vue的props属性中先声明,才能在setup函数的第一个参数中获取到。
<template>
  <ButtonClick :name="'MyButton'" />123
</template>
import { getCurrentInstance, ref } from 'vue'

export default {
    props: {
        name: String
    },
    setup(props,ctx) {
        let info = ref(0);
        const ins = getCurrentInstance();
        console.log("props.name",props.name)
        return {
            info, handleClick, secondClick, thirdClick
        }

    }
}

vue3 的setup和生命周期_第2张图片

- 第二个参数:context
和props一样的用法, 但是不写也可以用,context参数是一个普通的javascript对象,它对组件暴露三个属性:attrs、slots、emit。
attrs和slots是有状态的对象,它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构,并始终以attrs.x或slots.x的方式引用property。attrs和slots是非响应式的。应该在onUpdated生命周期钩子中执行此操作。

attrs:当父组件传递数据给子组件时,子组件不通过props接收,那么父组件传递的数据就到了 setup中的context的attrs属性。
slots:用于接收渲染父组件传递的插槽内容。
emit:向父组件触发事件。

你可能感兴趣的:(vue.js,javascript,ecmascript)