【vue3学习】vue3入门

目录

1、vue2选项式API

[2、Vue3 组合式 API](#2、Vue3 组合式 API)

[（1）setup 函数​](#（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 = '李四'; // 修改对象属性

---

响应式数据再次先做了解，一些细节将在下一篇博客仔细讲解。