vue3 setup函数和ref()在使用方式、性能方面以及与组件传值的配合方面的不同之处

 

Vue 3 中的 setup 函数是在组件创建过程中执行的一个新选项。它接收两个参数：props 和 context。在 setup 函数中，我们可以处理组件的响应式数据、组件生命周期钩子函数、计算属性等。

与 Vue 2.x 中的 data、computed、methods 等选项相比，setup 函数的使用方式有以下几个不同之处：

1. 响应式数据：在 setup 函数中，我们可以使用 ref()、reactive() 等函数来创建响应式数据。与 Vue 2.x 直接在 data 中声明数据不同，Vue 3 中的响应式数据需要通过 ref() 或 reactive() 包装。

   例如，使用 ref() 包装一个变量：

   import { ref } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
   
       return {
         count
       };
     }
   };
   

2. 组件传值：在 setup 函数中，我们可以通过 props 参数来接收父组件传递过来的属性。props 是一个响应式对象，可以直接在 setup 函数中使用。

   例如，接收一个名为 message 的属性：

   import { ref } from 'vue';
   
   export default {
     props: {
       message: String
     },
   
     setup(props) {
       const text = ref('');
   
       // 使用 props.message
       console.log(props.message);
   
       return {
         text
       };
     }
   };
   

3. 性能优化：Vue 3 中的 setup 函数可以利用 JavaScript 的作用域和闭包来避免不必要的重新渲染。每次组件重新渲染时，setup 函数会重新执行，但只要返回的响应式数据没有发生改变，Vue 3 会复用之前的响应式数据，从而提升性能。

   例如，在 setup 函数中创建一个计算属性：

   import { ref, computed } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
       const doubleCount = computed(() => count.value * 2);
   
       return {
         count,
         doubleCount
       };
     }
   };
   

总结来说，Vue 3 中的 setup 函数通过 ref() 创建响应式数据、通过 props 参数接收组件传值，并且利用 JavaScript 的作用域和闭包来优化性能。这些变化使得代码更加简洁、清晰，并且提升了开发效率和性能。