Vue 3 setup
【一】setup函数
setup函数的设计是为了使用vue3的组合式api,setup函数必须要有返回值,在里面定义的变量必须要返回出去才能在html里面使用
【1】定义变量
setup() {
// 1.定义变量 跟正常写js是一样的
let name = 'hqq'
let age = 18
// setup函数必须要有返回值,返回定义的对象后才能使用这个对象
return {name, age}
}
【2】定义函数
setup() {
// 2.定义函数
let handleAdd = () => {
age++
}
let handleChangeName = (n) => {
name = n
}
// setup函数必须要有返回值,返回定义的对象后才能使用这个对象
return {handleAdd, handleChangeName}
}
【二】实现响应式
上面定义的变量是没办法实现响应式的,如果要实现响应式,给变量用ref或者reactive函数包裹,使其变成对象,这时候他的值就存在了对象的value属性里面
【1】ref函数
setup() {
// 1.定义变量 跟正常写js是一样的
let name = ref('hqq')
let age = ref(18) //用ref包裹实现响应式
// 2.定义函数
let handleAdd = () => {
age.value++ // age用ref包裹之后就变成了一个对象,它的值在这个对象value里面,所以需要.value++
}
let handleChangeName = (n) => {
name.value = n
}
// setup函数必须要有返回值,返回定义的对象后才能使用这个对象
return {name, age, handleAdd, handleChangeName}
}
【2】recative函数
setup() {
// 1.定义对象 要想对象里面的内容实现响应式,就需要用reactive函数包裹起来对象
let userInfo = reactive({
name: 'hqq',
age: 18,
hobby: '运动'
})
// 2.定义函数
let handleAdd = () => {
userInfo.age++
}
return {userInfo, handleAdd}
}
【三】计算属性
计算属性computed,需要导入使用,computed函数包含一个对象,对象里面可以写两个函数,get和set,get用于获取值,必须要有返回值,返回值就是获取的值,set用于修改值,set函数有一个参数,就是修改后的值。
【1】get函数
setup() {
// 定义一个userName对象,里面定义firstname和lastname
let userName = reactive({
firstName: '',
lastName: ''
})
// 计算属性computed里面填写一个对象
// 对象里面可以写两个函数 get 和 set
userName.fullName = computed({
// get函数是用于获取值 必须要有返回值
get(){
return userName.firstName + userName.lastName
}
})
return {userName}
}
【2】set函数
setup() {
// 定义一个userName对象,里面定义firstname和lastname
let userName = reactive({
firstName: '',
lastName: ''
})
userName.fullName = computed({
get(){...},
// set函数用于修改值,可以传一个参数,这个参数就是修改后的值
set(value){
// 这里面可以写修改的逻辑
console.log(value)
}
})
return {userName}
}
【四】监听属性
【1】监听一个对象
setup() {
let age = ref(18)
let handleAdd = () => {
age.value++
}
// 监听一个对象
// 监听属性watch函数,第一个参数写监听的对象,
// 第二个参数是一个函数,函数的有两个参数,分别是修改后的数据和修改前的数据
watch(age, (newValue, oldValue) => {
console.log('新年龄' + newValue)
console.log('老年龄' + oldValue)
})
return {age, handleAdd}
}
【2】监听对象里的某个值
setup() {
// 定义一个对象
let person = reactive({
name: 'hqq',
age: 18,
hobby: '运动'
})
}
// 定义点击事件 点击对象的name变成吴彦祖
let handleChangeName = () => {
person.name = '吴彦祖'
}
// 监听对象的某个值
// watch函数的第一个参数也变成了一个函数,需要返回一个需要监听的值
// 第二个参数是一个函数,函数的有两个参数,分别是修改后的数据和修改前的数据
watch(() => person.name, (newValue, oldValue) => {
// 在这里可以写一些变化后的逻辑
console.log('变吴彦祖啦')
})
return {age, handleAdd, person, handleChangeName}
}
【五】生命周期
【六】toRefs
在Vue 3中,toRefs
函数是一个实用工具,用于将响应式对象转换为可被解构的引用对象。在Vue 2中,直接使用ref
或reactive
创建的响应式对象,如果直接解构或访问其属性,会导致丢失响应性。而toRefs
可以解决这个问题。
<template>
<main>
<p>姓名---{{name}}</p>
<p>年龄---{{age}}</p>
<p>爱好---{{ hobby}}</p>
</main>
</template>
<script>
import {toRefs} from "vue";
export default {
name: 'home',
setup() {
// 使用了toRefs包裹起来对象之后 person就变成了一个可被解构的响应式对象
let person = toRefs({
name: 'hqq',
age: 18,
hobby: '运动'
})
// 通过...展开,就可以直接在html中以键名获取对应的value
return {...person}
}
}
</script>