X

XiaoSong

V1

2023/01/16阅读:23主题:默认主题

响应式

声明响应式

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

  1. script标签中:
<script>
import {reactive} from 'vue'

export default { 
    // `setup`用于组合式 API 的特殊钩子函数
    setup() { 
        // 创建一个响应式数据
        const state = reactive({number1})

        // 改变响应式数据的函数
        const add = () => { 
            state.number ++ 
        }
        // 暴露出去才可以在template中使用
        return { 
            state,
            add
        }
    }
}
</script>
  1. 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({number1})
const add = () => { 
    state.number ++
}
</script>

使用reactive()的局限性:

  1. 仅对引用类型有效(对象、数组、集合)等,对原始数据类型(string、number、boolean)无效。
  2. 将响应式对象的属性赋值或解构至本地变量时,或是将该属性传入一个函数时,会失去响应性:
const state = reactive({ count0 })
// n 是一个局部变量
// 失去响应性连接
let n = state.count
// state不变,n改变
n++
// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字,并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)

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

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1