vue3.0 新特性
Setupsetup函数是Composition API逻辑组织的入口。<template><div>{{ title }}</div></template><script>export default (setup() {const title = 'vue'return {title}})</script>Reactive
·
Setup
setup函数是Composition API逻辑组织的入口。
<template>
<div>{{ title }}</div>
</template>
<script>
export default (
setup() {
const title = 'vue'
return {
title
}
}
)
</script>
Reactive
reactive 相当于 Vue 2.x 中的 Vue.observable() API ,该 API 返回一个响应式的对象状态。
<template>
<div>标题: {{ state.title }}</div>
</template>
<script>
import { reactive } from "vue"
export default (
setup() {
const state = reactive({ title: 'vue' })
return {
state
}
}
)
</script>
Ref
该方法接收一个参数,可以是单个值,也可以是一个对象,并且都是响应式的数据。当传入一个对象时{},内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值,当使用模板渲染的时候可省去.value。
<template>
<div>数量: {{ count }}</div>
</template>
<script>
import { ref } from "vue"
export default (
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
)
</script>
toRefs
将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的ref。
使用 reactive 组合函数时必须始终保持对这个所返回对象的引用以保持响应性。这个对象不能被解构或展开,一旦被解构或者展开,返回的值将失去响应式。
toRefs API 用来提供解决此约束的办法——它将响应式对象的每个 property 都转成了相应的 ref。
<script>
import { reactive } from "vue"
export default (
setup() {
const state = reactive({ title: 'vue' })
const stateAsRefs = toRefs(state)
const { title } = stateAsRefs
return {
title
}
}
)
</script>
Computed
computed是一个函数,它接收一个回调函数作为参数,返回一个基于该值的响应式Ref对象。也可以接收一个对象形式(对象中只有set和get)作为参数。
<template>
<div>标题: {{ title }}</div>
</template>
<script>
import { ref } from "vue"
export default (
setup() {
const title = ref('vue')
let setTitle = computed({
get() {
return title.value
},
set(val) {
return title.value = val
}
})
return {
title,
setTitle
}
}
)
</script>
Watch
watch是一个函数,它不会立即执行,只有当监听源发生变化时才会执行。它可以监听多个数据
- 监听单个数据
<script>
import { ref, watch } from "vue"
export default (
setup() {
// 侦听一个ref
const count = ref(0)
watch(count , (newVal, oldVal) => {
console.log(newVal, oldVal) // 1, 0
})
// 侦听一个getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
setTimeout(() => {
count.value = 1
state.count ++
}, 1000)
}
)
</script>
- 监听多个数据
<script>
import { ref, watch } from "vue"
export default (
setup() {
const count = ref(0)
const title = ref('vue')
watch([count, title] , (newVal, oldVal) => {
console.log(newVal, oldVal) // [1,'前端'] [0, 'vue']
})
setTimeout(() => {
count.value = 1
title.value = '前端'
}, 1000)
return {
count,
title
}
}
)
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)