学习记录-vue篇

vue的生命周期

Vue 的生命周期分为三个主要阶段：创建阶段、更新阶段 和 销毁阶段。每个阶段都有相应的生命周期钩子。

1. 创建阶段（Creation）

• beforeCreate：实例化后、数据观察和事件/侦听器设置之前调用。此时数据、事件、计算属性等还未初始化。
• created：实例化完成后，数据观测、计算属性、方法、事件/侦听器设置完成，但 DOM 尚未挂载。可以在此阶段进行数据初始化和 API 请求等操作。

2. 挂载阶段（Mounting）

• beforeMount：在挂载开始之前被调用。此时 DOM 元素还没有被渲染。$el 还没有被设置。
• mounted：挂载完成后调用。此时，模板已经渲染为真实的 DOM 元素并插入到页面中。通常在这个钩子中执行与 DOM 相关的操作，例如获取 DOM 元素的尺寸、执行第三方库的初始化等。

3. 更新阶段（Updating）

• beforeUpdate：数据更新后，DOM 更新之前调用。你可以在这个阶段访问更新前的数据和 DOM。
• updated：数据更新并且 DOM 重新渲染完成后调用。此时，你可以访问更新后的 DOM，并进行一些操作，如处理 UI 动画等。

4. 销毁阶段（Destroying）

• beforeDestroy：在销毁实例之前调用。你可以在这个阶段进行一些清理工作，如销毁定时器、取消事件监听等。
• destroyed：销毁实例之后调用。此时，组件的所有数据、事件和 DOM 元素都已被销毁。你可以在这里进行一些清理操作，例如解除对外部资源的引用等。

vue3对比vue2有哪些改变

特性	Vue 2	Vue 3

API 风格	使用 Options API	引入 Composition API，使用 setup() 函数

性能	使用 Object.defineProperty 实现响应式	使用 Proxy 提升响应式性能

Tree Shaking 支持	不支持彻底的 Tree Shaking	完全支持 Tree Shaking，减小打包文件大小

Fragment 支持	不支持多个根节点	支持 Fragment，允许组件有多个根节点

Teleport	不支持	支持 Teleport，将组件内容渲染到其他位置

TypeScript 支持	支持较差，需通过外部库增强	原生支持 TypeScript，类型推导和类型检查

v-model	只能绑定 value 属性	支持多个 v-model，通过 modelValue 和 update:modelValue

Suspense	不支持	支持 Suspense，处理异步组件的加载状态

自定义渲染器	无法轻松创建自定义渲染器	支持自定义渲染器，支持多平台渲染（如 Web Components）

生命周期钩子	beforeCreate、created、mounted 等	使用 onBeforeMount、onMounted 等组合式 API 生命周期函数

异步组件支持	使用 Vue.component 实现懒加载	支持与 Suspense 配合的异步组件，更强大的异步加载支持

API 改动	使用 new Vue() 创建实例，Vue.observable	使用 createApp() 创建实例，Vue.observable 被移除

响应式系统	基于 Object.defineProperty	基于 Proxy，提升性能和灵活性

v-model和:的区别

特性	v-model	:（v-bind）
功能	实现双向数据绑定。通常用于表单元素或组件之间的绑定。	单向数据流，用于绑定元素或组件的属性。
用法	主要用于表单元素和自定义组件的双向绑定。	主要用于绑定元素属性或组件 props。
语法	v-model="value"	:attribute="value" 或 v-bind:attribute="value"
数据流方向	双向绑定：父子组件或表单控件和数据之间的值会互相更新。	单向绑定：从父组件向子组件传递数据，或者从父元素到子元素。
触发事件	默认触发 update:modelValue 事件（自定义组件中）。	没有事件触发机制，数据更新由父组件直接传递。