Proxy - JavaScript | MDN (mozilla.org) 响应式的基本概念解释

基本概念

一个简单的例子

reactive

<template></template>
 
<script setup>
import { reactive } from 'vue';
const state = reactive({
  count: 0
});
 
// 答应响应式数据内容
console.log(state)
</script>

ref

<template>
  <div class="app">
    <div class="text">Count: {{count}}</div>
    <button class="btn" @click="onClick">Add</button>
  </div>
</template>
 
<script setup>
  import { ref } from 'vue';
  const count = ref(0);
  const onClick = () => {
    count.value ++;
  }
</script>

Vue.js 3 提供了两个重要的响应式 API，reactive 和 ref，他们都可以生成响应式数据，而且 ref 可以接收基础类型和对象类型数据，但是 reactive 只能接收对象类型数据。