支持组合式 API

setup（）
在Vue 3中，setup() 函数是 Composition API 的核心，它作为组件中使用 Composition API 的入口点。setup() 函数在组件创建之前被调用，即在 beforeCreate 和 created 生命周期钩子之前。这是 Vue 3 引入的一个重大变化，旨在提供更灵活、更强大的代码组织和复用方式。

setup() 函数的特点

1. 调用时机：在组件实例创建之前调用，此时组件的 props 和 context（上下文）已经可用，但组件的 DOM 尚未挂载。

2. 参数：setup() 函数接收两个参数：

   • props：一个包含了组件外部传入的所有 props 的对象。

   • context：一个普通的 JavaScript 对象，包含了 attrs（非 prop 特性）、slots（插槽）、emit（触发事件的方法）和 expose（用于显式声明哪些属性或方法应被暴露给模板或 <script setup> 中的其他组件）。

3. 返回值：setup() 函数的返回值会暴露给模板以及组件的其余选项（如 computed、methods 等）。你可以返回一个对象，其中包含需要在模板中使用的响应式状态、计算属性、方法等。

4. 响应式状态：在 setup() 函数中，你通常会使用 Vue 3 的响应式 API（如 ref 和 reactive）来定义响应式状态。这些状态可以在模板中直接使用，并且当它们变化时，视图会自动更新。

5. <template>  
     <div>{{ count }} <button @click="increment">Increment</button></div>  
   </template>  
     
   <script>  
   import { ref } from 'vue';  
     
   export default {  
     setup(props, { emit }) {  
       const count = ref(0);  
     
       function increment() {  
         count.value++;  
       }  
     
       // 暴露给模板  
       return {  
         count,  
         increment  
       };  
     }  
   };  
   </script>

reactive

基本用法

reactive是Vue 3中用于创建响应式对象的函数。它接受一个普通的JavaScript对象作为参数，并返回一个响应式对象。这个响应式对象的所有属性都会变成响应式的，即当这些属性的值发生变化时，会自动触发视图更新。

import { reactive } from 'vue';  
  
const state = reactive({  
  count: 0,  
  name: 'Vue'  
});  
  
// 访问响应式对象的属性  
console.log(state.count); // 输出 0  
console.log(state.name); // 输出 'Vue'  
  
// 修改响应式对象的属性  
state.count++;  
state.name = 'Vue 3';  
  
// Vue 3会自动检测到这些变化并更新视图

特点

1. 适用于复杂对象：reactive最适合用于创建包含多个属性的复杂对象。

2. 性能开销：由于reactive需要跟踪对象中的所有属性变化，因此其性能开销可能相对较大，尤其是在处理大量数据或复杂逻辑时。

3. 直接修改属性：你可以直接修改reactive创建的响应式对象的属性，无需额外的API。

4. 嵌套响应式对象：如果响应式对象中的属性也是对象，它们也会被自动转换为响应式对象。

ref

基本用法ref是Vue 3中用于创建响应式引用的函数。它接受一个初始值作为参数，并返回一个响应式引用对象。这个引用对象具有一个名为value的属性，用于存储和访问响应式数据的值。

import { ref } from 'vue';  
  
const count = ref(0);  
const person = ref({ name: 'John', age: 30 });  
  
// 访问响应式数据的值  
console.log(count.value); // 输出 0  
console.log(person.value.name); // 输出 'John'  
  
// 修改响应式数据的值  
count.value++;  
person.value.age = 31;  
  
// Vue 3会自动检测到这些变化并更新视图

特点

      适用于基本类型和对象：ref可以用于创建任何类型的响应式数据，包括基本类型（如数字、字符串、布尔值）和对象、数组等。但是，对于对象或数组，ref实际上是将它们包装在一个响应式引用对象中，因此你需要通过.value属性来访问或修改它们的值。

      性能开销较小：与reactive相比，ref的性能开销较小，因为它只跟踪一个值的变化，而不是对象中的所有属性。

      不可变引用：ref返回的响应式引用对象是不可变的，即你不能将新的值赋给整个引用对象，而只能通过.value属性来修改内部的值。

        watch

     watch侦听属性在Vue.js中是一个非常有用的功能，它允许开发者观察Vue实例中的数据变动，并在数据变化时执行相应的逻辑。以下是对watch侦听属性的详细介绍：

 基本概念

       侦听属性（Watchers）：Vue.js中的侦听属性是用于观察Vue实例中数据变动的一种机制。当数据变化时，可以自动调用一个回调函数来处理这些变化。

 主要特点

无缓存性：页面重新渲染时，即使值没有变化，只要数据变化就会触发响应的操作。

一对多：一个数据的变化可能会影响多个数据的变化。

基本用法：

在Vue实例的watch选项中定义需要侦听的属性及其回调函数。例如：

new Vue({  
  data: {  
    value: 0  
  },  
  watch: {  
    value(newValue, oldValue) {  
      console.log('value 发生变化了:', newValue, oldValue);  
    }  
  }  
});

 深度监听：对于对象或数组，如果需要监听其内部值的变化，需要设置deep为true。例如：

new Vue({  
  data: {  
    obj: {  
      nested: {  
        value: 'initial'  
      }  
    }  
  },  
  watch: {  
    obj: {  
      handler(newValue, oldValue) {  
        console.log('obj 发生变化了:', newValue, oldValue);  
      },  
      deep: true  
    }  
  }  
});