vue3概念

ref  和  reactive

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个函数。

1. ref 函数： ref 函数用于创建一个简单的响应式数据，它接受一个参数作为初始值，并返回一个包装后的响应式引用对象。这个引用对象有一个 .value 属性，通过读取和修改 .value 属性来访问和更新响应式数据。

import { ref } from 'vue'; const count = ref(0); // 创建一个响应式数据 console.log(count.value); // 访问响应式数据 
count.value++; // 修改响应式数据

1. reactive 函数： reactive 函数用于创建一个响应式对象，它接受一个普通对象作为参数，并返回一个代理后的响应式对象。返回的响应式对象会追踪其中属性的变化，并在变化时触发相应的更新。

import { reactive } from 'vue'; 
const state = reactive({ count: 0 }); // 创建一个响应式对象 
console.log(state.count); // 访问响应式对象的属性 
state.count++; // 修改响应式对象的属性

与 ref 不同，reactive 可以让你创建一个包含多个属性的响应式对象。你可以通过直接访问和修改对象的属性来操作响应式数据。

需要注意的是，在使用 ref 和 reactive 创建的响应式对象中，将数据传递给模板时，不需要再显示地访问 .value 属性。在模板中直接使用变量名即可，Vue 会自动进行解包。

watch

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

watch 函数有两种使用方式：基本用法和高级用法。

1. 基本用法： 可以通过传递两个参数来使用 watch 函数。

• 第一个参数是要监听的响应式数据或者计算属性。
• 第二个参数是一个回调函数，当被监听的数据发生变化时，回调函数会被触发。

import { watch, reactive } from 'vue';
 const state = reactive({ count: 0 });
 watch(() => state.count, (newValue, oldValue) => { console.log(`count 变为 ${newValue}，之前的值为 ${oldValue}`); }); // 修改 count 的值 state.count++; // 触发回调函数，输出 "count 变为 1，之前的值为 0"

1. 高级用法： 可以通过传递一个配置对象来使用 watch 函数，以便进行更详细的控制。

配置对象包括以下属性：

• immediate：布尔值，表示是否在初始渲染时立即执行回调函数，默认值为 false。
• deep：布尔值，表示是否深度监测被监听的数据，默认值为 false。
• flush：字符串，表示何时触发回调函数。可选值为 'pre'、'post' 和 'sync'，默认值为 'pre'。

import { watch, reactive } from 'vue'; 
const state = reactive({ count: 0 });
 watch( () => state.count, (newValue, oldValue) => { console.log(`count 变为 ${newValue}，之前的值为 ${oldValue}`); }, { immediate: true, deep: true, flush: 'post' } ); // 修改 count 的值 state.count++; // 触发回调函数，输出 "count 变为 1，之前的值为 0"

watch 函数还可以返回一个停止监听的函数。你可以在需要停止监听时调用该函数。

除了上述用法，Vue 3 还提供了 watchEffect 函数，它可以简化常见的副作用监听场景。

watchEffect

watchEffect 是一个新增的 API，用于在响应式数据被访问时自动追踪其依赖，并在依赖变化时执行回调函数。

watchEffect 函数有一个参数，即回调函数，该回调函数包含对响应式数据的访问操作。当响应式数据发生变化时，回调函数会被重新执行。

javascript
import { watchEffect, reactive } from 'vue';

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

watchEffect(() => {
  console.log(`count 的值为 ${state.count}`);
});

// 修改 count 的值
state.count++; // 触发回调函数，输出 "count 的值为 1"

与 watch 函数不同的是，watchEffect 不需要显式地指定要监听的数据，它可以自动追踪回调函数内部使用的响应式数据，并建立依赖关系。

在回调函数执行过程中，如果某个响应式数据被访问但未发生变化，则不会触发回调函数的重新执行。这种自动追踪依赖的能力可以帮助我们编写更简洁、更易维护的代码。

另外，与 watch 函数类似，watchEffect 也会返回一个停止监听的函数，您可以在需要停止监听时手动调用该函数。

vue3  生命周期

Vue3中可以继续使用Vue2中的生命周期钩子但是
Vue3 setup  取代了  Vue2 中的创建前后

        vue2  ======>  vue3
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeUnmount ==>onBeforeUnmount
        unmounted =====>onUnmounted