响应式

声明响应式

可以使用 reactive() 函数创建一个响应式对象或数组：

1. 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>

2. 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()的局限性:

1. 仅对引用类型有效(对象、数组、集合)等，对原始数据类型(string、number、boolean)无效。
2. 将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，会失去响应性：

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)

如何解决以上问题，将在下一期讲