一、支持组合式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函数 语法糖
更多内容请看下一章...