写在前面
晚上好呀小伙伴们,最近一直都在写Vue3最最基础的函数,希望帮助到刚接触到Vue3的朋友们查阅。今天讲组合API里的reactive函数。
reactive函数
reactive是一个函数,它可以定义一个复杂数据类型,成为响应式数据。
示例代码:
<template>
<div>
<div>数据的响应式</div>
<hr>
<div>{{obj.msg}}</div>
<div>
<button @click='handleClick'>点击</button>
</div>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup () {
// 数据响应式:数据的变化导致视图自动变化
// let msg = 'hello'
// reactive方法包裹的对象中的数据都是响应式的
const obj = reactive({
msg: 'hello',
info: 'hi'
})
const handleClick = () => {
// msg = 'nihao'
// console.log(msg)
obj.msg = 'nihao'
}
return { obj, handleClick }
}
}
</script>
<style lang="less">
</style>
总结
1、setup默认返回的普通数据不是响应式的。
2、如果希望数据是响应式,有一种做法就是给数据包裹reactive方法即可。
写在最后
以上就是本期的所有内容啦,希望对萌新有所帮助~
道阻且长,行则将至。