vue3开发实践笔记

一、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 来响应这个变化