Vue3的响应式

一、声明响应式状态

1.通过reactive()创建一个响应式对象或数组

<template>
  <div>
    <div>{
   
   { obj.count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  //在组将模板中使用响应式状态，需要在setup()函数中定义并返回
  setup(){
    const obj = reactive({count:0})
    function changCount(){
      obj.count++
    }
    return{
      obj,
      changCount
    }
  }
}
</script>

<style>

</style>

2.通过<script setup>简化代码

<template>
  <div>
    <div>{
   
   { obj.count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>

<!-- 通过<script setup>简化代码，可以不用手动的暴露大量的状态和方法，可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。 -->
<script setup>
import { reactive } from "vue";
//在组将模板中使用响应式状态，需要在setup()函数中定义并返回
const obj = reactive({ count: 0 });
function changCount() {
  obj.count++;
}
</script>

<style>
</style>

3.reactive()的局限性

<template>
  <div>
    <div>{
   
   { obj.count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>

<script setup>
import { reactive } from "vue";
// 1.仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。
// 2.因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，
// 2.因为这将导致对初始引用的响应性连接丢失：同时这也意味着当我们将响应式对象的属性赋值或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性
const obj = reactive({ count: 0 });
function changCount() {
  let item=obj.count
  item++
  console.log(item);
}
</script>

<style>
</style>

二、用 ref() 定义响应式变量

1.通过ref()定义响应式数据

<template>
  <div>
    <!-- 当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。 -->
    <div>{
   
   { count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
//ref()可以创建任何类型的响应式
//ref()将传入参数的值包装为一个带.value属性的ref对象
const count = ref(0);
const objref = ref({ count: 0 });
// 当值为对象类型时，会用 reactive() 自动转换它的 .value。 ref({count:0}).value=reactive({count:0})
console.log(objref.value); //
function changCount() {
  count.value++;
}
</script>

<style>
</style>