Vue3.0 生命周期变化
生命周期对比
如图是vue2.0到vue3.0的生命周期函数对比,vue3.0去掉了beforeCreate 和 created 函数,不同的是新增了一个setup函数。这些相对应的函数都在前面多增加了一个on,均可以在setup函数里使用。
beforeCreate 和 created 函数里的代码,这时候可以直接在setup函数里直接编写。
setup函数
引用
在每个组件的<script></script>
标签里面引用
import {reactive, watch, ref, watchEffect, toRef,
onBeforeUnmount, onMounted} from 'vue'
这里引用了很多vue的函数,包括生明周期的各种钩子函数,
我们输入一个on开头 会看到很多函数,就是我们上面提到的各种钩子函数。这些都是需要先引入才能在setup函数中使用。 所以在后面我们就可以声明setup函数,如下图
export default {
name: 'Home',
setup(){
let name = '测试name'
let tip=ref('这是name的值')
let data=reactive({
job:'总经理',
infoList:["测试","运营","开发"]
})
function changeData() {
data.job="我是测试经理"
}
//方法
function changeTip(){
tip.value="改变了tip的值"
}
//返回一个对象
return {
name,
tip,
changeTip,
changeData
}
}
}
</script>
需要注意的是,在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用。 当然如果只是简单的声明一个值,这并不是响应式的写法。如果我们想要做到数据响应式,需要用到ref。
<template>
<div>tip:{{tip}}</div>
<div>data:{{data.job}}</div>
<div>infoList:{{infoList}}</div>
<button @click="changeTip">改变tip</button>
<button @click="changeData">改变data</button>
<button @click="goNext">跳转下个页面</button>
</template>
如果在组件模版页面,用上我们setup函数里声明的值,我们在changeTip改变了我们的tip的值,先把页面跑起来
默认如图,接下来我们点击 改变tip按钮
可以看到tip的值已经改变了。 用ref包裹的对象,改变值的时候记得用.value。 但是如果存在很多值,我们不可能一个个用ref声明,vue3.0还有一个 reactive函数,这个可以声明一个对象,通过对象.字段拿到对应的值,并且不用多加一个.value。 点击改变data里字段的值,可以看到data的值改变了。
总结
总的来看,vue3.0函数比较重要的就是一个setup函数,我们定义好需要的响应式数据,在我们的模版上使用就行,掌握好setup函数使用很重要。
转载自:https://juejin.cn/post/7102239954209619999