目录

响应式数据设计

引入import { computed, ref } from 'vue'

两种思路去使用计算属性

ref
computed
state：vuex

引用数据`ref`

TIP

组合式数据，在setup的语法糖下更改变量数据需要使用变量名.value进行，在template则直接使用变量名即可

`ref`的使用

typescript

import {...}
const number = ref(2)
const plusNumber = () => {
  number.value++
}

计算属性`computed`

vue

<script setup lang="ts">
const number = ref(2)
const randomNumber = computed({
  get: () => number.value,
  set: (val) => number.value = Math.floor(Math.random() * 10)
})
const getRandomNumber = () => {
  randomNumber.value++
}
</script>

<template>
	<button @click="getRandomNumber()">setList - 随机数为{{ number }}</button>
</template>