X
XiaoSong
V1
2023/01/16阅读:23主题:默认主题
响应式
声明响应式
可以使用 reactive()
函数创建一个响应式对象或数组:
-
script
标签中:
<script>
import {reactive} from 'vue'
export default {
// `setup`用于组合式 API 的特殊钩子函数
setup() {
// 创建一个响应式数据
const state = reactive({number: 1})
// 改变响应式数据的函数
const add = () => {
state.number ++
}
// 暴露出去才可以在template中使用
return {
state,
add
}
}
}
</script>
-
html
标签中:
<template>
<div>
<!-- `@click`用来监听事件的方式 -->
<!-- 后续会讲到 -->
<button @click="add">
{{ state.number }}
</button>
</div>
</template>
运行效果:
每点击一次按钮数字加1
<script setup>
写法:
相比使用setup()函数简单了许多。改造后的代码如下:
<template>
<div>
<button @click="add">
{{ state.number }}
</button>
</div>
</template>
<script setup>
import {reactive} from 'vue'
const state = reactive({number: 1})
const add = () => {
state.number ++
}
</script>
使用reactive()
的局限性:
-
仅对引用类型有效(对象、数组、集合)等,对原始数据类型(string、number、boolean)无效。 -
将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,会失去响应性:
const state = reactive({ count: 0 })
// n 是一个局部变量
// 失去响应性连接
let n = state.count
// state不变,n改变
n++
// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++
// 该函数接收一个普通数字,并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)
如何解决以上问题,将在下一期讲
作者介绍
X
XiaoSong
V1