「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。
setup函数
setup是一个新的组件选项，作为组件中使用组合API的起点。
从生命周期来看，它的执行是在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中this还不是组件实例，此时的this是undefined。
在模板中需要用到的数据和函数，需要在setup中返回。
export default {
setup () {
console.log('setup执行了')
console.log(this)
// 定义数据和函数
const msg = 'hi vue3'
const say = () => {
console.log(msg)
}
return { msg , say}
},
beforeCreate() {
console.log('beforeCreate执行了')
console.log(this)
}
}
vue3生命周期
- setup 创建实例前
- onBeforeMount 挂载DOM前
- onMounted 挂载DOM后
- onBeforeUpdate 更新组件前
- onUpdated 更新组件后
- onBeforeUnmount 卸载销毁前
- onUnmounted 卸载销毁后
reactive函数
reactive是一个函数，它可以定义一个复杂数据类型，称为响应式数据。
<template>
<div>我是根组件</div>
<div>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<button @click="change">修改</button>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
setup() {
const user = reactive({
name: "zs",
age: 18,
});
const car = reactive({
brand: '宝马',
price: 100
})
const change = () => {
console.log('修改');
console.log(user);
user.name = 'ls'
}
return {
user,
car,
change
};
},
};
</script>
需要注意的是，reactive对象在解构的时候会丢失响应式的效果，赋值给新的变量也会丢失响应式效果。
ref函数
reactive函数将复杂数据类型的数据定义为响应式数据，那么ref函数将简单数据类型定义为响应式数据。
注意：
-
获取值，修改值的时候，需要.value
-
在模板中使用ref声明的响应式数据，可以省略.value
<template>
<div>我是根组件</div>
<div>
<p>{{money}}-{{user.name}}</p>
<button @click="change">修改</button>
<button @click="money++">修改2</button>
</div>
</template>
<script>
import { reactive, ref } from 'vue'
export default {
name: 'App',
setup() {
let money = ref(100)
let user = reactive({
name: 'zs',
age: 18
})
const change = () => {
// console.log(money);
money.value++
}
return {
money,
user,
change
}
}
}
</script>
toRef函数
toRef函数用来转换响应式对象中某个属性为单独的响应式数据，并且值是关联的。它用于有一个响应书数据，但是模板中只需要使用一项数据。
<template>
<div class="container">
{{name}} <button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 模板中只需要使用name数据
// 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
// let { name } = obj 不能直接解构，出来的是一个普通数据
const name = toRef(obj, 'name')
// console.log(name)
const updateName = () => {
console.log('updateName')
// toRef转换响应式数据包装成对象，value存放值的位置
name.value = 'zs'
}
return {name, updateName}
}
}
</script>
<style scoped lang="less"></style>
toRefs函数
toRefs函数用来定义转换响应式中数据的所有数据为响应式数据，通常用于解构或者展开reactive定义的对象。
<template>
<div class="container">
<div>{{name}}</div>
<div>{{age}}</div>
<button @click="updateName">修改数据</button>
</div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
name: 'App',
setup () {
// 1. 响应式数据对象
const obj = reactive({
name: 'ls',
age: 10
})
console.log(obj)
// 2. 解构或者展开响应式数据对象
// const {name,age} = obj
// console.log(name,age)
// const obj2 = {...obj}
// console.log(obj2)
// 以上方式导致数据就不是响应式数据了
const obj3 = toRefs(obj)
console.log(obj3)
const updateName = () => {
// obj3.name.value = 'zs'
obj.name = 'zs'
}
return {...obj3, updateName}
}
}
</script>
<style scoped lang="less"></style>
