Vue3基础

Vue.js 3是一种现代化的JavaScript框架，用于构建交互式用户界面。它是Vue.js框架的最新版本，相比于Vue.js 2，它带来了许多新的功能和改进，旨在提供更好的开发体验和性能。

Vue3目录

- src/
  - assets/             // 存放静态资源文件，如图片、样式等
  - components/         // 存放可复用的Vue组件
  - views/              // 存放页面级的Vue组件
  - router/             // 存放Vue Router的路由配置文件
  - store/              // 存放Vuex的状态管理文件
  - services/           // 存放与后端API交互的服务文件
  - utils/              // 存放通用的工具函数文件
  - App.vue             // 应用的根组件
  - main.js             // Vue应用的入口文件
- public/
  - index.html          // 应用的入口HTML文件
- package.json          // 项目的配置信息和依赖项管理文件

2.新增了setup函数

setup执行的时机是在beforeCreate生命函数之前执行，只执行一次，因此在这个函数中是不能通过this来获取实例的
setup是一个函数，接受两个参数（props和context)

• props就是组件的props
• context

3.新增了ref与reactive
ref和reactive一样,也是用来实现响应式数据的方法,ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.

区别：

1. 值类型 vs 引用类型：

   • ref：ref用于创建一个包装了值类型的响应式引用。它接受一个初始值作为参数，并返回一个对象，其中value属性包含了初始值。可以通过value属性获取或修改值。
   • reactive：reactive用于创建引用类型的响应式对象。它接受一个普通对象或数组作为参数，并返回一个响应式代理对象。可以直接通过访问或修改属性来操作数据。

2. 自动解包 vs 手动解包：

   • ref：ref对象的值可以通过value属性直接访问或修改。当在模板中使用ref时，它会自动解包，不需要额外的操作。
   • reactive：reactive对象的属性需要手动解包，即使用.value来访问或修改。这是因为reactive对象本身是一个代理，所以需要显式解包。

3. 适用场景：

   • ref：适用于基本类型数据（如字符串、数字、布尔值等）或只需要单一值的场景。例如计数器、开关状态等。
   • reactive：适用于复杂的对象或需要多个属性的场景。例如表单数据、组件状态等。

5.响应式原理发生了变化
在vue2中，是通过Object.defineProperty()里面的set与get函数来实现响应式的，数据劫持其实就是vue的核心
在vue3中，是通过es6新增的代理对象Proxy来实现响应式的，也是利用是数据劫持，并通过reflect操作源对象内部的数据

6.新增组合式

以下是组合式API的一些关键特性和用法：

1. setup 函数：在组件中使用组合式API时，你需要在组件选项中添加一个名为setup的函数。setup函数是组件的入口点，它在组件实例被创建之前执行，并且可以接收组件的属性（props）和上下文（context）作为参数。

2. reactive API：可以使用reactive函数创建响应式的数据对象。与Vue 2中的data选项类似，你可以使用reactive来创建响应式的数据对象，并在组件中使用。

3. ref API：ref函数则用于创建一个包装了单一值的响应式引用。在某些情况下，你可能只想要一个简单的容器来存储和观察数据的变化。

4. computed 和 watch API：你可以使用computed函数创建计算属性，并使用watch函数来观察数据的变化。

5. 生命周期钩子：组合式API支持使用onXxx的方式来定义生命周期钩子函数。例如，你可以使用onMounted来在组件挂载后执行逻辑。

6. 自定义逻辑复用：使用组合式API，你可以将逻辑关注点划分为更小的函数，以便在多个组件中进行复用。

7.生命周期

Vue.js 3在生命周期方面对Vue.js 2进行了一些调整和改进，以提供更加一致且灵活的使用体验。通过引入新的生命周期钩子函数和使用setup函数作为Vue组件的入口点，Vue.js 3提供了更直观和清晰的生命周期管理方式。

 

8.计算属性与监视
1，watchEffect函数

watch：既要指明监视的属性，也要指明监视的回调。
watchEffect：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect跟computed类似，区别有：
computed注重的计算出来的结果（回调函数的返回值），所以必须要return;
而watchEffect更注重的是过程（回调函数的函数体）,所以不用return;