Vue学习笔记

一、DOM

DOM是JS操作网页的编程接口，作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。

• 文档– 文档表示的就是整个的HTML网页文档
• 对象– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型– 使用模型来表示对象之间的关系，这样方便我们获取对象

DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。

要改变页面的某个东西，JS就需要获得对网页中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。

浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，DOM 4。

严格地说，DOM不属于JS，但是操作DOM是JS最常见的任务，而JS也是最常用于DOM操作的语言。DOM是浏览器厂商提供的js操作html的api，不同的浏览器厂商提供的api可能不同，所以dom存在兼容性问题（少部分）

什么是DOM（超详细解释，建议收藏！！！）-CSDN博客

二、Vue的组件

2.1 组件

组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等

2.2 根组件App.vue

在 Vue 应用程序中，根组件 App.vue 不是绝对必须存在的，但它通常是推荐的起点，特别是在使用 Vue CLI 创建的项目中。根组件 App.vue 有几个重要的作用：

1. 入口组件：在 Vue 应用中，App.vue 通常作为整个应用的入口点。它是一个顶级组件，其他所有的组件都是它的子组件。
2. 模板容器：App.vue 的模板部分通常用作其他视图和组件的容器。它提供了一个基础的 HTML 结构，其他组件可以被插入到这个结构中。
3. 全局样式和资源：在 App.vue 中，你可以定义全局的样式和资源，这些样式和资源会被应用到所有的子组件中。
4. 路由出口：如果你的应用使用了 Vue Router，App.vue 通常会包含 <router-view> 元素，这是路由出口，用于渲染匹配到的路由组件。

2.3 组件文件

以.vue结尾，每个组件文件有三个部分组成：

• <template>：模板部分，用于生成HTML代码
• <script>：JS代码，用于控制模板的数据来源和行为
• <style>：CSS样式部分代码

2.4 Vue实例对象

Vue 实例对象是通过调用 new Vue() 创建的，它是一个 Vue 应用的入口点。当你创建一个新的 Vue 实例时，你需要提供一个配置对象，该对象可以包含以下选项：

• data：定义响应式数据对象。
• methods：定义可由模板调用的方法。
• computed：定义计算属性。
• watch：定义数据的观察者。
• el：指定 Vue 实例要挂载的 DOM 元素。
• template：定义组件的模板。
• components：注册子组件。

创建实例后，Vue 会对实例进行初始化，包括数据的响应式转换、事件监听、指令解析等。

2.5 组件实例对象

组件是 Vue 的核心概念之一，它们是可复用的 Vue 实例。组件实例对象是 Vue 实例的特化，它们通过 Vue.extend 或在 Vue.component 注册时创建。

组件实例对象可以包含以下内容：

• props：接收来自父组件的数据。
• data：组件内部的响应式数据。
• methods：组件的方法。
• computed：组件的计算属性。
• watch：组件的数据观察者。
• template：组件的模板。
• components：组件内部注册的子组件。

组件实例对象可以包含自己的视图和逻辑，并且可以嵌套使用其他组件。

2.6 Vue实例对象和组件实例对象的区别和联系

在一个 Vue 项目中，通常只实例化一个根 Vue 实例，但它可以包含多个 Vue 组件实例。表现为在main.js文件——程序的入口文件中，只会调用一次new vue{}来创建一次Vue实例对象。

根实例在技术上可以被视为一个特殊的组件，因为它使用了许多与组件相同的概念和选项，但在日常开发中，我们通常将根实例视为整个应用的起点和管理者。组件则被视为根实例的子部分，用于构建和组织 UI。

• 作用范围：Vue 实例对象通常用于创建整个应用的根实例，而组件实例对象用于创建可复用的子组件。
• 生命周期：Vue 实例和组件实例都有自己的生命周期钩子，但组件实例有更多与组件相关的生命周期钩子，如 created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。
• 功能：Vue 实例对象负责整个应用的启动和管理，而组件实例对象负责管理组件的渲染和更新。
• 复用性：组件实例对象设计为可复用的，可以在不同的父组件中使用，而 Vue 实例对象通常是唯一的。

三、插值表达式

Vue插值表达式及常用指令-CSDN博客

data中的数据都会被劫持： Vue 通过劫持技术来实现其响应式特性，确保当数据变化时，视图能够自动更新。

劫持依赖的技术——“响应式系统”

💡

响应式系统的工作原理：

1. 劫持（劫持）：Vue 通过特定的方法（如 Object.defineProperty）劫持 data 中的每个属性。这意味着 Vue 可以监控这些属性的读取和设置操作。

1. 依赖收集：当组件中的模板或计算属性读取某个数据属性时，Vue 会记录这个依赖关系。这通常是通过创建一个“依赖列表”来实现的，每当数据属性被读取时，相关的依赖（如观察者）就会被添加到这个列表中。

1. 通知更新：当数据属性被修改时（即设置新值），Vue 会通知所有依赖于这个属性的组件或计算属性，触发它们重新渲染或重新计算。

为什么需要劫持？

• 实现响应式：Vue 的核心特性之一是响应式，即当数据变化时，视图会自动更新。劫持数据属性是实现这一特性的关键步骤。

• 优化性能：通过劫持，Vue 可以精确地知道哪些数据被哪些组件依赖，从而只在必要时更新视图，避免不必要的渲染，提高性能。

四、Vue路由

前端路由：指的是URL中的hash值与组件之间的对应关系

路由表：Vue需要维护一份路由表，表中定义了hash与组件的对应关系，目录/scr/router/index.js