VUE3新特征

一、支持组合式api

1.1、setup()程序的入口

        在 Vue 3 中，setup() 函数是一个新的组件选项，作为使用 Composition API 的入口点。这个函数是在组件被创建之前被调用，它是 beforeCreate 和 created 生命周期钩子之前被执行的地方。它使得逻辑复用和代码组织变得更加容易和直观，尤其是当你想要在你的组件中编写更加复杂的逻辑时。

        注意事项

• 在 setup() 函数中不能直接使用 this，因为它还没有绑定到组件实例上。

<script setup>
//   setup(){
    console.log('调用了setup')
    const username = 'Tom'
    const getUsername=()=>{
      console.log("调用了getUsername")
    }
    // return{
    //   username,
    //   getUsername
    // }
//   },
//   beforeCreate(){//在页面文件加载之前调用(预加载)
//     console.log('调用了beforeCreate')
//   }
// }
</script>

<template>
  <button @click="getUsername">{{ count }}</button>
  {{ username }}
</template>

1.1.1、 reactive和ref存放数据的函数，可实现数据绑定

        ①、reactive存放对象类型数据，可以返回该对象，该对象是一种显示的响应式对象

        ②、ref：存放简单类型或对象类型的数据，返回一个对象

    总结    

        共同点：两者都可以实现对象绑定，用于创建响应式的数据，当数据变化时。视图能够自动更新。

        不同点：ref用于包装JavaScript基本类型(如字符串、数字、布尔值等)，以及对象和数组。reactive专门用于处理JavaScript对象和数组等复杂数据的响应式问题，仅支持对象或数组类型的数据。reactive可以直接访问或修改响应式对象的属性或方法，不需要额外的.value值。ref需要通过.value属性访问或修改响应式数据的实际值。在模板中，如果ref位于顶层，Vue会自动解包，不不需要.value；但如果ref作为对象的属性被嵌套，则在模板中访问时需要.value。

        ③、computed：计算属性

在vue3中“<style scoped>

                </style>”语法格式中的scoped当前的样式只作用于只作用于当前文件

<script setup> 构建setup函数 语法糖       

更多内容请看下一章...