setup()
函数是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API
新特性提供了统一的入口。
setup 函数会在 beforeCreate 之后、created 之前执行
父组件
子组件set-up
// 在props中定义当前组件允许外界传递过来的参数名称:
props: {
p1: String
},
// 通过setup函数的第一个形参,接收props数据:
setup(props) {
console.log(props.p1)
}
在vue2中子组件是这样写
props: {
p1: String
}
// 为了让p1不仅可读,还可写,赋值给data
data(){
return{
p1:this.p1
}
}
区别就是vue3将data和props的数据都写在了一起
setup
函数的第二个形参是一个上下文对象,这个上下文对象中包含了一些有用的属性,这些属性在 vue 2.x
中需要通过 this
才能访问到,在 vue 3.x
中,它们的访问方式如下:
const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.parent
context.root
context.emit
context.refs
}
}
注意:在
setup()
函数中无法访问到this
reactive()
函数接收一个普通对象,返回一个响应式的数据对象。
等价于 vue 2.x
中的 Vue.observable()
函数,vue 3.x
中提供了 reactive()
函数,用来创建响应式的数据对象,基本代码示例如下:
import { reactive } from '@vue/composition-api'
// 创建响应式数据对象,得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })
按需导入 reactive
函数:
import { reactive } from 'vue'
在 setup()
函数中调用 reactive()
函数,创建响应式数据对象:
setup() {
// 创建响应式数据对象
const state = reactive({count: 0})
// setup 函数中将响应式数据对象 return 出去,供 template 使用
return state
}
注意:必须return才能在界面上用,reactive()里面必须是对象
在 template
中访问响应式数据:
<p>当前的 count 值为:{{count}}p>
vue2的响应式则相对简单,直接在data中定义即可
ref()
函数用来根据给定的值创建一个响应式的数据对象,ref()
函数调用的返回值是一个对象,这个对象上只包含一个 .value
属性:
import { ref } from 'vue'
// 创建响应式数据对象 count,初始值为 0
const count = ref(0)
// 如果要访问 ref() 创建出来的响应式数据对象的值,必须通过 .value 属性才可以
console.log(count.value) // 输出 0
// 让 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 输出 1
在 setup()
中创建响应式数据:
import { ref } from 'vue'
setup() {
const count = ref(0)
return {
count,
name: ref('zs')
}
}
在 template
中访问响应式数据:
<template>
<p>{{count}} --- {{name}}p>
template>
当把 ref()
创建出来的响应式数据对象,挂载到 reactive()
上时,会自动把响应式数据对象展开为原始的值,不需通过 .value
就可以直接被访问,例如:
const count = ref(0)
const state = reactive({
count
})
console.log(state.count) // 输出 0
state.count++ // 此处不需要通过 .value 就能直接访问原始值
console.log(count) // 输出 1
注意:新的 ref 会覆盖旧的 ref,示例代码如下:
// 创建 ref 并挂载到 reactive 中
const c1 = ref(0)
const state = reactive({
c1
})
// 再次创建 ref,命名为 c2
const c2 = ref(9)
// 将 旧 ref c1 替换为 新 ref c2
state.c1 = c2
state.c1++
console.log(state.c1) // 输出 10
console.log(c2.value) // 输出 10
console.log(c1.value) // 输出 0
isRef()
用来判断某个值是否为 ref()
创建出来的对象;应用场景:当需要展开某个可能为 ref()
创建出来的值的时候,例如:
import { isRef } from '@vue/composition-api'
const unwrapped = isRef(foo) ? foo.value : foo
toRefs()
函数可以将 reactive()
创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref()
类型的响应式数据,最常见的应用场景如下:
import { toRefs } from 'vue'
setup() {
// 定义响应式数据对象
const state = reactive({
count: 0
})
// 定义页面上可用的事件处理函数
const increment = () => {
state.count++
}
// 在 setup 中返回一个对象供页面使用
// 这个对象中可以包含响应式的数据,也可以包含事件处理函数
return {
// 将state上的每个属性,都转化为ref形式的响应式数据
// ...是展开运算符
...toRefs(state),
// 自增的事件处理函数
increment
}
}
页面上可以直接访问 setup()
中 return 出来的响应式数据:
<template>
<div>
<p>当前的count值为:{{count}}p>
<button @click="increment">+1button>
div>
template>
总结:
.value
就可以直接被访问;.value
;.value
;ref的对象会直接变成reactive的属性