一、setup
生命周期
1、执行时机:会在beforeCreate之前执行,内部无法访问this
2、setup 包含的生命周期
onBeforeMount
——挂载开始前调用
onMount
——挂载后调用
onBeforeUpdate
——当响应数据改变,且重新渲染前调用
onUpdated
——重新渲染后调用
onBeforeUnmount
——Vue实例销毁前调用
onUnmounted
——实例销毁后调用
onActivated
——当keep-alive组件被激活时调用
onDeactivated
——当keep-alive组件取消激活时调用
onErrorCaptured
——从子组件中捕获错误时调用
export default { name: "hello", setup(msg) { console.log(msg); return { name:"Mr liu" }; }, };
}
二、数据绑定 / 响应式数据
在vue3中setup默认返回的普通数据不是响应的,如果希望数据是响应式的,有4种方式
1、ref
ref
一般用于简单类型数据。ref主要是用于定义基本数据类型的数据并保证响应式能力,也可以用于对象或数据
使用ref()
函数时,通常要注意两点:
1)在setup
中修改值和获取值的时候,需要.value
2)在模板中使用ref
申明的响应式数据,可以省略.value,模板使用{{变量}}取值
<template><div>{{ ebooks }}</div>
</template><script>
import { ref } from 'vue';
export default {name: 'App',setup(){const ebooks = ref();ebooks.value = 1;return{ebooks}}
}
</script>
2、reactive
reactive
是一个函数,可以用于定义一个复杂数据类型
// 定义数组 let list:any = reactive([])
import { reactive, toRef } from 'vue';
setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2:toRef(ebooks1,"books")}
}
3、toRef
当我们在模板中渲染数据时,不希望由前缀的时候可以使用组合-toRef()
toRef()
是函数,转换响应式对象中某个属性为单独响应式数据,并且值是关联的
<template><div>{{ ebooks }}{{ ebooks2 }} // books列表</div>
</template><script>
import { reactive, toRef } from 'vue';
export default {name: 'App',setup(){const ebooks1=reactive({books:[]})ebooks1.books= data.list;return{ebooks1: ebooks,ebooks2: toRef(ebooks1,"books")}}
}
4、toRefs
toRefs
函数可以定义转换响应式中所有属性为 响应式数据,通常用于结构reactive
定义的对象,转换响应式对象中所有属性(也可以是一部分)为单独响应式数据,对象成为普通对象,并且值是关联的
<template><div>{{ msg }}</div><div>{{ info }}</div>
</template><script>
import { reactive, toRefs } from 'vue'
export default {name: 'App',setup() {const obj = reactive({msg: 'hello',info: 'hi'})const { msg, info } = toRefs(obj)const hClick = () => {msg.value = 'nihao'info.vaule = 'hihi'}return { msg, info, hClick }}
}
</script>
对比:
- ref 和 reactive定义普通类型响应式数据,显然使用reactive比较麻烦,
- ref比较麻烦的是,使用变量的话,不管是获取还是使用的话都需要加上.value;
注意:
- 项目实际开发中必须统一,不能既使用
reactive
又使用ref
三、vue3 路由跳转
1、useRouter
import { useRouter } from ‘vue-router’
setup(){
const router = useRouter()
router.push(’/corporateTransfer’)
}
2、传参:
// 字符串
router.push(‘home’)
// 对象
router.push({ path: ‘home’ })
// 命名的路由
router.push({ name: ‘user’, params: { userId: ‘123’ }})
// 带查询参数,变成 /register?userId=123
const userId = ‘123’
router.push({ name: ‘user’, params: { userId }}) // -> /user/123
router.push({ path: /user/${userId}
}) // -> /user/123
// 这里的 params 不生效
router.push({ path: ‘/user’, params: { userId }}) // -> /user
————————————————
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;
注意:
- 如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path
- 上述规则同样适用于 router-link 组件的 to 属性
- 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化