vue3开发实践笔记-CFANZ编程社区

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