网站备案必须做吗百度号码认证平台首页
目录
1、vue2选项式API
2、Vue3 组合式 API
（1）setup 函数
基本实现编辑
补充方法
setup语法糖
（2）响应式数据
ref
reactive：
大家好啊，我是jstart千语。好久没更新咯，因为最近一直忙找实习的原因，跑来跑去的，耽搁很多时间。这段时间呢想把自己的项目先上线了，所以对vue3进行了一个学习打算把前端做了一起部署上线。
vue2中使用的选项式API，而vue3用的是选项式API。而我更喜欢vue3这种风格，它们具体是什么呢，请继续往下看：
选项式 API 通过定义 data、methods、computed 等选项来组织组件逻辑，而组合式 API 基于函数，让开发者能够更灵活地组织和复用代码。此外，Vue3 还对模板语法、生命周期钩子等进行了调整和优化。
1、vue2选项式API
// Vue2组件示例
export default {data() {return {count: 0};},methods: {increment() {this.count++;}},mounted() {console.log('组件挂载完成');}
};然而，当组件变得复杂时，选项式 API 的弊端就会显现出来。相关的逻辑可能分散在不同的选项中，例如一个涉及数据更新、方法调用和生命周期钩子的功能，需要在多个选项中查找和维护代码，导致代码组织和复用变得困难。
2、Vue3 组合式 API
（1）setup 函数
setup 函数是组合式 API 的入口，它在组件的 beforeCreate 生命周期钩子之前执行，是组合式 API 中定义组件逻辑的主要场所。setup 函数接收两个参数：props 和 context。props 是父组件传递过来的属性，context 包含了 attrs、slots、emit 等组件实例的上下文信息。
基本实现
返回值简写：
当返回值的key和value都相同时，触发对象的简写形式：可以直接写成一个单值
即return{name:name,age:age} 简写成：return{name,age}
补充方法
绑定事件：
事件执行的方法：
setup语法糖
原写法：
修改后：
（2）响应式数据
ref
用于创建一个响应式的引用，适用于基本数据类型（如字符串、数字、布尔值等）。ref 函数返回一个对象，通过.value 属性来访问和修改其值，并且当值发生变化时，相关的依赖会被触发更新。
import { ref } from 'vue';const count = ref(0);
count.value++; // 修改值reactive：
用于创建一个响应式的对象，适用于对象和数组等复杂数据类型。reactive 函数接收一个普通对象，返回一个代理对象，对该对象属性的修改会被响应式跟踪。
import { reactive } from 'vue';const state = reactive({user: {name: '张三',age: 20}
});
state.user.name = '李四'; // 修改对象属性响应式数据再次先做了解，一些细节将在下一篇博客仔细讲解。