【自学笔记】Vue基础知识点总览-持续更新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

Vue重点知识点总览

一、Vue基础

1. Vue简介

• Vue.js（读音 /vjuː/，类似于 view）是一个构建用户界面的渐进式JavaScript框架。
• 基于标准HTML、CSS和JavaScript构建，提供了一套声明式的、组件化的编程模型。

2. MVVM设计思想

• Model：数据模型，数据和业务逻辑都在Model层中定义。
• View：UI视图，负责数据的展示。
• ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。Model和View并无直接关联，而是通过ViewModel来进行联系。

3. 响应式数据绑定

• Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。
• 通过Object.defineProperty()或Proxy实现数据劫持，从而在数据变化时发布消息给订阅者，触发相应的监听回调。

4. 组件化开发

• Vue允许将应用分解成独立、可复用的组件，每个组件都包含自己的逻辑、模板和样式。
• 单文件组件：.vue文件包含了模板、脚本和样式，便于组织和管理。
• 父子组件通信：通过props和事件机制实现组件之间的数据传递和通信。

二、Vue核心特性

1. 虚拟DOM

• 虚拟DOM是对真实DOM的抽象表示，它会在数据变化时通过diff算法计算最小的变动，然后批量更新真实DOM。
• 提高了渲染效率，避免了频繁的DOM操作。

2. 模板语法

• Vue提供了直观的模板语法，可以直接在HTML中使用指令（如v-if, v-for等）来绑定数据和事件。
• 模板会被编译成虚拟DOM渲染函数，实现高效的视图更新。

3. 计算属性与监听属性

• 计算属性（computed）：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变时才会重新计算。
• 监听属性（watch）：监视数据变化，实现响应式更新。支持异步监听，监听的函数接收两个参数：最新的值和变化之前的值。

三、Vue高级特性

1. 路由管理（vue-router）

• 用于构建单页应用（SPA）的路由管理。
• 允许开发者在不刷新页面的情况下切换视图，并支持嵌套路由和动态路由。

2. 状态管理（vuex）

• 用于管理共享状态。
• 提供了集中式的存储和管理应用中的所有组件状态，使得状态变更可预测且易于调试。

3. 插件与指令

• 插件：通过Vue.use()安装插件，扩展Vue功能。
• 自定义指令：通过Vue.directive定义自定义指令，扩展Vue的功能。

四、Vue调试技巧

1. 使用debugger语句

• 在JS代码中插入debugger语句，项目运行后打开浏览器按F12进入调试模式，设置断点进行调试。

2. Vue.js devtools

• 针对Chrome浏览器的开源调试工具，可以方便地调试Vue项目。

3. VS Code插件Debugger for Chrome

• 在VS Code中下载Debugger for Chrome插件，配置launch.json文件后进行调试。

五、其他重要知识点

1. 异步组件与动态组件

• 异步组件：按需加载组件，提升性能。
• 动态组件：根据条件切换组件，实现页面逻辑。

2. 递归组件与函数式组件

• 递归组件：自我调用的组件，用于复杂结构的渲染。
• 函数式组件：无状态、无实例的轻量级组件。

3. 全局与局部注册组件

• 使用components和Vue.component方法进行全局和局部注册组件。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，自学记录Vue基础知识点总览。