MVVM
Vue 是一个渐进式的 JavaScript 框架，它采用了 MVVM（Model-View-ViewModel）设计模式，这使得它能够高效地进行数据绑定和用户界面的更新。
概念
1. Model（模型）
- 含义：Model 代表应用程序的数据层，它通常是 JavaScript 对象或数组。这个部分存储着应用程序的状态（例如，用户输入的数据、从 API 获取的数据等）。
- 与 Vue 的关系：在 Vue 中，
data选项就是模型（Model）。它是数据源，当数据发生变化时，Vue 会自动更新界面。
2. View（视图）
- 含义：View 代表用户界面（UI）层，显示模型数据，并允许用户与应用进行交互。通常是 HTML 和 CSS 的组合。
- 与 Vue 的关系：在 Vue 中，View 是由模板（template）来定义的，模板中通过绑定来展示
data（模型）的内容，响应用户的输入并显示相应的数据。
3. ViewModel（视图模型）
- 含义：ViewModel 充当了模型和视图之间的中介，它负责将模型数据转换为视图可以显示的格式，同时也负责将用户在视图中做出的操作转化为对模型的更新。换句话说，ViewModel 是数据与视图的双向绑定桥梁。
- 与 Vue 的关系：在 Vue 中，
Vue 实例是 ViewModel。它管理着data（模型）和template（视图）之间的关系。Vue 的响应式系统会自动监测data的变化，并实时更新 View（即模板）。
具体实现
- 数据绑定：Vue 通过 双向数据绑定（two-way data binding）技术实现了视图和数据的同步。它使用了 响应式系统（reactivity system）来追踪模型数据的变化，当数据变化时，自动更新视图。
- 指令：Vue 使用了模板语法中的指令（如
v-bind,v-model,v-for等）来将视图与数据进行绑定。 - 事件处理：Vue 中的
v-on和@符号用于绑定事件。当用户操作视图时，事件会触发，进而通过 ViewModel 更新模型数据，形成双向绑定。
举个例子：
<div id="app"><input v-model="message"><p>{{ message }}</p>
</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>
在这个例子中：
- Model：
data中的message是模型数据。 - View：HTML 中的
<input>和<p>元素组成了视图。 - ViewModel：Vue 实例充当了 ViewModel，负责将模型数据
message绑定到视图<input>和<p>中。
传统HTML
在传统的 HTML 中，我们通过 JavaScript 来直接操控 DOM 元素。每当模型数据变化时，我们需要显式地更新视图。最基本的方式就是通过 innerHTML 或 textContent 来更新 HTML 元素的内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Model-View Binding</title>
</head>
<body><input type="text" id="input" placeholder="Enter text"><p id="output"></p><script>// 定义模型let model = {message: 'Hello, World!'};// 选择视图中的 DOM 元素const inputElement = document.getElementById('input');const outputElement = document.getElementById('output');// 更新视图（将模型数据插入到视图中）function updateView() {outputElement.textContent = model.message;}// 监听视图上的用户输入inputElement.addEventListener('input', (event) => {model.message = event.target.value; // 更新模型updateView(); // 更新视图});// 初始化视图updateView();</script>
</body>
</html>
在上面的例子中，输入框的值被绑定到 model.message，并且每次用户修改输入框内容时，JavaScript 会手动更新视图（即 <p> 标签内容）。
总结
- MVVM 模式使得 Vue 的数据和视图得以同步更新，开发者可以专注于业务逻辑而无需手动更新 UI。
- 通过响应式数据绑定，Vue 在内部处理了大量的 DOM 操作，使得开发更加高效和清晰。
数据双向绑定
1. 原理（响应式系统）
Vue 使用 JavaScript 的 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）来实现响应式数据。通过这些机制，Vue 能够监控数据的变化，当数据发生变化时，自动通知视图更新。
- 数据对象的代理：Vue 会将
data中的每个属性通过 getter 和 setter 进行代理，从而监控属性的访问和修改。 - 依赖收集和视图更新：当组件渲染时，Vue 会收集视图中使用的属性作为依赖。之后，当这些属性的值变化时，Vue 会触发相关的视图更新。
2. 实现（指令系统）
Vue 提供了 v-model 指令来实现双向数据绑定，特别是在表单元素（如 <input>、<textarea>、<select>）中，v-model 可以方便地实现数据和视图的同步。
v-model 的工作原理：
- 视图到模型的绑定（用户输入）：用户修改输入框的值时，Vue 会将输入的值自动更新到组件的数据中。
- 模型到视图的绑定：当模型数据变化时，Vue 会自动更新视图中的内容。
Launcer打开Taskbar)
