Vue3.0 —— 生命周期函数与setup

1、Vue3.0 生命周期函数变更

Vue2.x	Vue3.0
beforeCreate	setup
created	setup
beforeMount(挂载前)	onBeforeMount
mounted(挂载后)	onMounted
beforeUpdate(数据更新前)	onBeforeUpdate
updated(数据更新后)	onUpdated
beforeDestroy(销毁前)	onBeforeUnmount
destroyed(销毁后)	onUnmounted

2、setup

在Vue2.x中，我们实现一个功能，需要在data中新增数据，在methods/computed/watch中新增业务逻辑，数据和业务逻辑是分离的，不利于管理，为了解决这个弊端，Vue3.0推出了Composition API（组合API），也叫做注入API，实际上setup中定义的数据和业务逻辑，会注入到data和methods中

setup()是组合API的入口函数，可以直接在里面定义变量和方法（数据和业务逻辑），通过对象的形式返回暴露出去

执行时机

setup执行顺序是在beforeCreate之前的，网上很多说是在beforeCreate和create之间，其实是错误的

setup中使用生命周期函数

从vue中引入生命周期函数后，在setup入口函数中使用

<script>
	// 1、引入
	import { onMounted } from 'vue';
	export default {
		setup() {
			// 2、 setup入口函数中使用
			onMounted(() => {
            	console.log(11)
        	})
		},	// !! 也可以结合vue2.x的写法
		beforeMount() {
        	console.log(22);
    	}
	}
</script>

响应式数据

1、简单数据类型（String、Number等）推荐使用ref

• 引入： import { ref } from 'vue'
• 使用：let count = ref(1);
• 后面想改变或获取值，通过count.value进行

2、复杂数据类型（Array、Object）推荐使用reactive

• 引入： import { reactive } from 'vue'
• 使用： let arr = reactive({ age：18 })，传入一个对象，vue会封装成Proxy对象，使用里面的方法实现响应式数据

注意：如果不需要做响应式的数据，比如从接口获取的数据，直接声明变量存放即可，不需要调用ref或者reactive

参数

setup()可以接收两个参数

• 参数一props，可以拿到组件props属性中的数据

export default {
	props: ['content'],	// 父组件传来的content数据
	setup(props) {
		alert(props.content)
	}
}

• 参数二context
• context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：具体用法百度
  
  

注意点

• 因为setup()是在beforeCreated生命周期函数之前，data、methods还未初始化，所以在setup中无法使用
• setup函数只能是同步的