文章目录
setup()
setup()
函数是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API
新特性提供了统一的入口。
执行时机
setup 函数会在 beforeCreate 之后、created 之前执行
setup()的第一个形参props
父组件
<set-up p1="aaaa"></set-up>
子组件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()的第二个形参context
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()
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 })
定义响应式数据供 template 使用
-
按需导入
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()
函数用来根据给定的值创建一个响应式的数据对象,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
在 template 中访问 ref 创建的响应式数据
-
在
setup()
中创建响应式数据:import { ref } from 'vue' setup() { const count = ref(0) return { count, name: ref('zs') } }
-
在
template
中访问响应式数据:<template> <p>{{count}} --- {{name}}</p> </template>
在 reactive 对象中访问 ref 创建的响应式数据
当把 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()
isRef()
用来判断某个值是否为 ref()
创建出来的对象;应用场景:当需要展开某个可能为 ref()
创建出来的值的时候,例如:
import { isRef } from '@vue/composition-api'
const unwrapped = isRef(foo) ? foo.value : foo
toRefs()
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">+1</button>
</div>
</template>
总结:
- setup(props,context),props用来接收组件传来的内容,context用来代替setup()里的this
- reactive()用来接收一个对象,用于创建响应式数据对象,必须要return出去;(不建议使用)
- 使用的是接收对象里的属性
- ref()用来接收一个值,用于创建响应式数据对象,返回的是一个对象,必须要return出去。
- 在setup()内需通过
.value
就可以直接被访问; - 但是在template中会自动解析,不需要
.value
; - reactive对象中访问ref创建的响应式数据,也不需要
.value
;ref的对象会直接变成reactive的属性 - 新的 ref 会覆盖旧的 ref
- 在setup()内需通过