前端知识点概览x.pdfVIP

Vue知识点概览

1Vue实例

创建实例：

使用`newVue({})`创建Vue实例，通常在应用的入口文件中。

数据绑定：

`data`属性定义响应式数据，Vue会自动追踪其变化并更新视图。

2模板语法

插值：

使用`{{}}`进行数据插值，支持表达式。

指令：

以`v-`开头的特殊属性，用于处理DOM，包括属性绑定、条件渲染、列表

渲染和表单双向绑定。

过滤器：

用于格式化数据，适合简单的数据处理。

3计算属性与侦听器

计算属性：

通过`computed`定义的属性，依赖于数据变化自动更新，适合复杂计算。

侦听器：

通过`watch`监控数据变化，执行异步或开销较大的操作，适合处理API请

求。

4路由

VueRouter：

用于管理应用路由，支持嵌套路由，适合构建单页面应用（SPA）。

路由定义：

定义路由路径与组件的映射。

动态路由：

使用动态路径参数。

导航守卫：

用于控制路由访问的钩子，包括全局守卫和路由独享守卫。

5生命周期

生命周期钩子：

包含多个事件，如创建、挂载、更新和销毁，适合在不同阶段执行特定操作，

如请求数据、清理资源等。

·beforeCreate：实例刚创建，数据未初始化。

·created：实例已创建，数据已初始化，适合发起API请求。

·beforeMount：DOM渲染前调用。

·mounted：DOM已渲染，适合进行DOM操作。

·beforeUpdate：数据变化，DOM更新前调用。

·updated：DOM更新后调用，适合处理依赖于DOM的逻辑。

·beforeDestroy：实例销毁前调用，适合清理定时器、事件监听等。

·destroyed：实例已销毁，所有事件和数据绑定都被解除。

6状态管理

Vuex：

用于集中管理应用状态，适合大型应用，提供状态、获取器、突变和动作。

状态：

存储应用的状态，响应式更新。

获取器：

计算属性，获取状态的派生数据。

突变：

同步修改状态的方法，确保状态管理的可追溯性。

动作：

异步操作，提交突变，支持批量操作。

7资源管理

Axios：

常用的HTTP请求库，集成到Vue项目中，支持Promise。

拦截器：

支持请求和响应的拦截，适合添加全局的请求头或处理错误。

异步请求：

支持Promise，结合`async/await`语法实现更清晰的异步逻辑。

Axios与Vue结合使用时，通常在Vue组件的生命周期钩子中发起请求，如

mounted或created。

8自定义指令

指令：

使用`Vue.directive()`定义自定义指令，适合复杂的DOM操作。

钩子：

定义指令的生命周期钩子，如`bind`、`inserted`、`update`、

`componentUpdated`、`unbind`。

9事件处理

事件绑定：

使用`v-on`绑定事件，支持事件修饰符，简化事件处理。

修饰符：

如`.stop`、`.prevent`、`.capture`等用于修饰事件行为，便于处理事件。

10组件

10.1定义组件：

使用`Vponent()`定义全局组件，或使用单文件组件（`.vue`文件）定

义局部组件。

10.2注册组件：

可以全局注册或局部注册组件。

10.3组件生命周期：

组件的生命周期钩子与实例相似，包括创建、挂载、更新和销毁等。

10.4组件通信

Props：

父