vue3响应式编程

响应式编程和setup函数

响应式数据：再数据变化时，vue框架会将变量最新的值跟新到dom树中，页面数据就是实时最新的
非响应式数据：在数据变化时，vue框架不会将变量最新的值更新到dom树中，页面数据就不是实时最新的

vue2中，数据不做特殊处理，默认是响应式的
vue3中，数据要经过ref/reactive函数的处理才是响应式的
ref/reactive函数是vue框架中给我们提供的方法
ref处理的响应式数据，在操作时需要注意
在script标签中，操作ref的响应式数据需要通过.value的形式操作
在template标签中，操作ref的响应式数据，无需使用.value
当我们使用setup语法糖时，在script标签中就只用导入ref还有编写方法名和变量，不用再写返回值，setup()方法，export

<script setup>
  import {ref} from 'vue';

    let num = ref(3);
    function add(){
      num.value +=1;
    };
    function sub(){
      num.value-=1;
    };

</script>
<template>
<div>
  <button @click="add">+</button>
  <span>{{ num }}</span>
  <button @click="sub">-</button>
</div>
</template>

<style>

</style>

响应式基础

此处的响应式是指：数据模型发生变化时，自动更新DOM树内容，页面上显示的内容会进行同步变化，vue3的数据模型不是自动响应式的，需要我们做一些特殊的处理。

• 注意事项：
  • ref函数更适合单个变量
    • 在script标签中操作ref响应式数据要通过.value
    • 在template中操作ref响应式数据则无需.value
  • reactive函数更适合操作对象
    • 在script template操作reactive响应式数据都直接使用对象名.属性名的方式即可

1. 创建响应式数据
   在 Vue 3 中，可以使用 ref 和 reactive 来创建响应式数据。
   ref适合单个变量，reactive适合对象

使用 ref 来创建一个简单的响应式数据：

import { ref } from 'vue';

const count = ref(0);

使用 reactive 来创建一个包含多个属性的响应式对象：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});

2. 访问响应式数据
   可以直接访问响应式数据的属性，Vue 3 会自动追踪属性的依赖关系，并在数据变化时更新相关的视图。

在script标签中操作ref响应式数据需要使用.value
在template中操作ref响应式数据不需要使用.value

// 访问 ref 创建的响应式数据
console.log(count.value);

// 访问 reactive 创建的响应式对象
console.log(state.count);
console.log(state.message);

3. 更新响应式数据
   可以通过简单地给响应式数据赋新值来更新数据，Vue 3 会自动更新相关的视图。

// 更新 ref 创建的响应式数据
count.value += 1;

// 更新 reactive 创建的响应式对象
state.count += 1;
state.message = 'Vue 3 is awesome!';

4. 响应式数据的自动追踪
   Vue 3 会自动追踪数据的依赖关系，当响应式数据被使用在模板中时，Vue 3 将建立数据与视图之间的关联，从而实现数据驱动视图的更新。

5. 响应式数据的销毁
   在组件销毁时，Vue 3 会自动清理数据的依赖关系，以避免内存泄露。

响应式数据的处理模式

在Vue 3中，应用程序的响应式数据处理方式与Vue 2相比有一些变化。Vue 3引入了Composition API，这使得在处理数据时更加灵活和可维护。下面是Vue 3中处理应式数据的主要方式：

1. Composition API
   Composition API是Vue 3中引入的一种新的 API 风格，它允许开发者根据逻辑功能来组织代码，而不是将代码按照选项（data、methods、computed等）来组织。通过Composition API，可以更好地组织和重用代码。

2. reactive
   Vue 3中的reactive函数可以用来创建一个响应式的对象。当对象的属性发生变化时，相关的视图会自动更新。这一点与Vue 2中的data选项类似，但在Vue 3中更加灵活。

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

3. ref
   ref函数用于创建一个响应式的基本数据类型，比如数字、字符串等。需要注意的是，如果要访问基本数据类型的属性，需要使用.value。

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0

4. computed
   computed函数用于创建一个计算属性，它会根据依赖的响应式数据自动计算返回一个新的值。

import { computed } from 'vue';

const doubleCount = computed(() => count.value * 2);

5. watch
   watch函数用于监听响应式数据的变化，并在数据变化时执行相应的操作。

import { watch } from 'vue';

watch(() => count.value, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});

双向绑定

• 单向绑定：响应式数据的变化会更新dom树，但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据
• 双向绑定：响应式数据的变化会更新dom树，但是dom树上用户的操作造成的数据改变会同步更新到响应式数据
  • 用户通过表单标签才能够输入数据，所以双向绑定都是应用到表单标签上的，其他标签不行
  • v-model专门用于双向绑定表单标签的value属性，语法为v-model=''
  • v-model还可以用于各种不同类型的输入，、元素

<template>
  <div>
    <input v-model="message" placeholder="Enter a message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    return {
      message
    };
  }
};
</script>

计算属性

在Vue 3中，可以使用computed属性来创建计算属性。computed属性可以依赖于其他响应式属性，并在这些属性发生变化时自动重新计算。这使得可以方便地创建派生属性，而无需手动管理其更新。

import { ref, computed } from 'vue';

const count = ref(1);

const squared = computed(() => {
  return count.value * count.value;
});

// 在模板中访问computed属性
console.log(squared.value); // 输出：1

// 当count值发生变化时，squared会自动更新
count.value = 2;
console.log(squared.value); // 输出：4