1. MVVM 的定义#

MVVM（Model-View-ViewModel）是一种软件架构模式，主要用于分离用户界面逻辑和业务逻辑。它由以下三个部分组成：

• Model（模型）：表示数据和业务逻辑层，负责管理应用程序的数据。
• View（视图）：表示用户界面层，负责展示数据给用户。
• ViewModel（视图模型）：==作为 Model 和 View 之间的桥梁，负责将 Model 的数据转换为 View 可以使用的格式，并监听 Model 的变化来更新 View==。

2. MVVM 的核心特点#

• 数据绑定：ViewModel 和 View 之间通过双向绑定机制保持同步。
• 命令绑定：View 上的用户交互（如点击按钮）可以通过命令绑定触发 ViewModel 中的方法。
• 数据驱动：通过修改 ViewModel 中的数据，自动更新 View。

1. 数据绑定#

Vue 使用数据绑定机制将 Model 和 View 连接起来。具体来说：

• 单向绑定：从 Model 到 View 的数据流动（即数据变化时自动更新视图）。
• 双向绑定：不仅支持从 Model 到 View 的数据流动，还支持从 View 到 Model 的数据流动（例如输入框的值会自动更新到数据模型中）。

2. 响应式系统#

Vue 的响应式系统是其实现 MVVM 的核心。以下是其工作原理：

• 数据劫持：Vue 通过 Object.defineProperty 或 Proxy（Vue 3 中使用）对数据对象进行拦截，监听数据的变化。
• 依赖收集：当模板中的数据被访问时，Vue 会自动记录哪些数据被使用，从而建立数据和视图之间的依赖关系。
• 视图更新：当数据发生变化时，Vue 会通知所有依赖该数据的视图进行更新。

3. 模板编译#

Vue 的模板编译器会将 HTML 模板解析为虚拟 DOM（Virtual DOM），并生成渲染函数。具体流程如下：

• 解析模板：将模板字符串解析为抽象语法树（AST）。
• 优化：对 AST 进行静态节点标记，提升性能。
• 生成渲染函数：将 AST 转换为可执行的 JavaScript 渲染函数。

4. 虚拟 DOM#

Vue 使用虚拟 DOM 来提高渲染性能。虚拟 DOM 是一种轻量级的 JavaScript 对象，用于表示真实的 DOM 结构。其主要作用包括：

• Diff 算法：当数据变化时，Vue 会比较新旧虚拟 DOM 树，计算出最小的差异。
• 批量更新：Vue 会将多个状态变更合并为一次 DOM 更新，减少操作次数。

1. 数据驱动#

Vue 的核心理念是“数据驱动视图”，开发者只需关注数据的变化，而无需手动操作 DOM。例如：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        message: 'Hello Vue!'
5
    }
6
});

当 message 的值发生变化时，Vue 会自动更新视图。

2. 双向绑定#

Vue 提供了内置的 v-model 指令，实现了数据的双向绑定。例如：

1
<input v-model="message" />
2
<p>{{ message }}</p>

在上述代码中，输入框的值和 message 数据会相互同步。

3. 模板语法#

Vue 提供了简洁的模板语法，方便开发者快速构建动态视图。例如：

1
<ul>
2
    <li v-for="item in items">{{ item.name }}</li>
3
</ul>

4. 计算属性和监听器#

• 计算属性：用于基于已有数据派生新数据。
• 监听器：用于监听数据变化并执行特定逻辑。

1. beforeCreate#

• 触发时机：实例刚刚被创建，尚未初始化数据和事件监听器。
• 特点：
  • 数据观测 (data) 和方法 (methods) 尚未初始化。
  • $el 属性不可用。
• 用途：几乎没有实际用途，通常用于调试或了解初始化前的状态。

1
beforeCreate() {
2
    console.log(this.$data); // undefined
3
}

2. created#

• 触发时机：实例已经完成数据观测、计算属性、方法等初始化，但尚未挂载到 DOM。
• 特点：
  • 可以访问 data 和 methods。
  • $el 属性仍然不可用。
• 用途：
  • 发送异步请求（如获取 API 数据）。
  • 初始化一些数据或绑定事件。

1
created() {
2
    console.log(this.$data); // 已经初始化
3
    this.fetchData(); // 调用方法发送请求
4
}

3. beforeMount#

• 触发时机：模板编译完成，但尚未挂载到 DOM。
• 特点：
  • 模板已经编译为虚拟 DOM，但尚未渲染到页面上。
  • ==$el 属性存在，但内容为空。==
• 用途：
  • 类似于 created，可以在此处进行初始化操作。

1
beforeMount() {
2
    console.log(this.$el); // 存在，但内容为空
3
}

==4. mounted==#

• 触发时机：实例已经挂载到 DOM，页面可以正常显示。
• 特点：
  • ==$el 属性可用，且已替换为真实的 DOM 元素。==
  • 页面上的 DOM 已经渲染完成。
• 用途：
  • 操作 DOM 元素。
  • 初始化第三方插件（如地图、图表等）。

1
mounted() {
2
    console.log(this.$el); // 真实的 DOM 元素
3
    this.initMap(); // 初始化地图
4
}

5. beforeUpdate#

• 触发时机：数据发生变化，DOM 更新之前。
• 特点：
  • 数据已经更新，但 DOM 尚未更新。
  • 可以访问旧的 DOM 结构。
• 用途：
  • 在 DOM 更新前进行额外的操作（如移除手动绑定的事件监听器）。

1
beforeUpdate() {
2
    console.log('DOM 即将更新');
3
}

6. updated#

• 触发时机：数据变化导致的 DOM 更新完成后。
• 特点：
  • DOM 已经更新完毕。
  • 不建议在此修改状态，否则可能引发无限循环。
• 用途：
  • 操作更新后的 DOM 元素。

1
updated() {
2
    console.log('DOM 已更新');
3
}

==7. beforeDestroy (Vue 2) / beforeUnmount (Vue 3)==#

• 触发时机：实例即将被销毁。
• 特点：
  • ==实例仍然完全可用。==
• 用途：
  • 清理定时器、解绑事件监听器等。

1
beforeDestroy() {
2
    console.log('实例即将销毁');
3
    clearInterval(this.timer); // 清理定时器
4
}

8. destroyed (Vue 2) / unmounted (Vue 3)#

• 触发时机：实例已经被销毁。
• 特点：
  • 所有指令和事件监听器已被移除。
  • 子实例也被销毁。
• 用途：无特殊用途，主要用于确认实例已销毁。

1
destroyed() {
2
    console.log('实例已销毁');
3
}

1.1 基本用法#

Vue 使用双大括号 {{ }} 来进行插值，将数据动态插入到模板中。

1
<div id="app">
2
  <p>{{ message }}</p>
3
</div>
4

5
<script>
6
  new Vue({
7
    el: '#app',
8
    data: {
9
      message: 'Hello Vue!'
10
    }
11
  });
12
</script>

• 特点：
  • 双大括号中的内容会被解析为 JavaScript 表达式。
  • 插值只能用于文本内容，不能用于属性绑定。

1.2 注意事项#

• 如果需要绑定属性（如 src 或 class），应使用 v-bind 指令。
• 插值不支持多行表达式或复杂逻辑，仅限于简单的表达式。

2.1 v-html ==（单向插入html文本）==#

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

1
<template>
2
  <div>
3
    <div v-html="content"></div>
4
  </div>
5
</template>
6

7
<script>
8
export default {
9
  data() {
10
    return {
11
      content: '<p style="color: red;">这是通过 v-html 渲染的内容！</p>'
12
    };
13
  }
14
};
15
</script>

这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要 对用户提供的内容使用插值。

2.2 v-bind：属性绑定 ==单向绑定html属性值 v-bind :==#

1
<img v-bind:src="imageSrc" alt="Vue Logo">
2
<!-- 简写 -->
3
<img :src="imageSrc" alt="Vue Logo">

1
data: {
2
  imageSrc: 'https://example.com/vue-logo.png'
3
}

1
<a v-bind="{ href: url, target: '_blank' }">链接</a>
2
<!-- 简写 -->
3
<a :href="url" :target="'_blank'">链接</a>

2.2 v-on：事件监听 ==v-on:事件 /@事件==#

1
<button v-on:click="increment">点击我</button>
2
<!-- 简写 -->
3
<button @click="increment">点击我</button>

1
data: {
2
  count: 0
3
},
4
methods: {
5
  increment() {
6
    this.count++;
7
  }
8
}

1
<button @click="greet('你好')">打招呼</button>

1
methods: {
2
  greet(message) {
3
    alert(message);
4
  }
5
}

1
<div @click="handleParentClick">
2
  Parent
3
  <button @click.stop="handleChildClick">Child</button>
4
</div>

1
<form @submit.prevent="onSubmit">
2
  <button type="submit">Submit</button>
3
</form>

3. .capture#

• 作用：在捕获阶段（Capture Phase）触发事件，而不是在冒泡阶段。
• 场景：当需要在事件传播的早期阶段处理事件时使用。
• 示例：

1
<div @click.capture="handleParentClick">
2
  Parent
3
  <button @click="handleChildClick">Child</button>
4
</div>

在这个例子中，点击按钮时，handleParentClick 会在 handleChildClick 之前被触发，因为事件在捕获阶段就被捕获了。

4. .self#

• 作用：只有当事件是从目标元素本身触发时才触发处理函数。
• 场景：防止子元素的事件影响父元素。
• 示例：

1
<div @click.self="handleDivClick">
2
  Parent
3
  <button>Child</button>
4
</div>

在这个例子中，点击按钮时，handleDivClick 不会被触发，因为事件不是从 div 本身触发的。

5. .once#

• 作用：事件只触发一次。
• 场景：适用于只需要响应一次的事件。
• 示例：

1
<button @click.once="handleClick">Click me</button>

在这个例子中，点击按钮后，handleClick 只会执行一次，后续点击将不再触发。

总结#

这些修饰符可以单独使用，也可以组合使用。例如：

1
<form @submit.prevent.stop="onSubmit">
2
  <button type="submit">Submit</button>
3
</form>

==在这个例子中，.prevent 阻止了表单的默认提交行为，.stop 阻止了事件冒泡。==

2.3 v-if / v-else-if / v-else：条件渲染#

1
<div v-if="isVisible">显示此内容</div>
2
<div v-else>显示其他内容</div>

1
data: {
2
  isVisible: true
3
}

2.4 v-show：条件显示#

1
<div v-show="isVisible">显示此内容</div>

2.5 v-for：列表渲染#

1
<ul>
2
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
3
</ul>

1
data: {
2
  items: ['苹果', '香蕉', '橙子']
3
}

1
<ul>
2
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
3
</ul>

1
data: {
2
  object: { name: 'Alice', age: 25 }
3
}

2.6 v-model：==双向绑定 v-model===#

1
<input v-model="message" placeholder="编辑消息">
2
<p>你输入的内容是：{{ message }}</p>

1
data: {
2
  message: ''
3
}

1
<input v-model.lazy="message" type="text">

1
<input v-model.number="age" type="number">

1
<input v-model.trim="name" type="text">

总结#

这些修饰符可以单独使用，也可以组合使用。例如：

1
<input v-model.lazy.trim.number="value" type="text">

在这个例子中：

• .lazy：只在 change 事件后同步数据。
• .trim：自动去除首尾空格。
• .number：将输入值转换为数字。

示例#

1
<p>{{ number + 1 }}</p>
2
<p>{{ ok ? 'YES' : 'NO' }}</p>
3
<p>{{ message.split('').reverse().join('') }}</p>

限制#

• ==模板中只能包含单个表达式，不能包含语句（如 if 或 for）。==
• 复杂逻辑应提取到计算属性或方法中。

基本用法#

1
<p>{{ message | capitalize }}</p>

定义过滤器#

1
filters: {
2
  capitalize(value) {
3
    if (!value) return '';
4
    return value.charAt(0).toUpperCase() + value.slice(1);
5
  }
6
}

全局过滤器#

可以通过 Vue.filter 定义全局过滤器。

1
Vue.filter('capitalize', function (value) {
2
    if (!value) return '';
3
    return value.charAt(0).toUpperCase() + value.slice(1);
4
});

链式调用#

可以同时应用多个过滤器。

1
<p>{{ message | filterA | filterB }}</p>

常见修饰符#

6.1 默认插槽#

1
<!-- 子组件 -->
2
<template>
3
  <div>
4
    <slot>默认内容</slot>
5
  </div>
6
</template>
7

8
<!-- 父组件 -->
9
<my-component>
10
  <p>这是从父组件传入的内容</p>
11
</my-component>

6.2 具名插槽#

允许多个插槽。

1
<!-- 子组件 -->
2
<template>
3
  <div>
4
    <slot name="header"></slot>
5
    <slot></slot>
6
    <slot name="footer"></slot>
7
  </div>
8
</template>
9

10
<!-- 父组件 -->
11
<my-component>
12
  <template v-slot:header>
13
    <h1>标题</h1>
14
  </template>
15
  <p>主体内容</p>
16
  <template #footer>
17
    <p>页脚</p>
18
  </template>
19
</my-component>

6.3 作用域插槽#

允许子组件向父组件传递数据。

1
<!-- 子组件 -->
2
<template>
3
  <div>
4
    <slot :user="user"></slot>
5
  </div>
6
</template>
7

8
<!-- 父组件 -->
9
<my-component v-slot:default="slotProps">
10
  {{ slotProps.user.name }}
11
</my-component>

7.1 计算属性#

==computed中的计算函数，每当其内部依赖值发生改变就将重新计算== 用于复杂的数据处理逻辑。

1
computed: {
2
    // 计算总价
3
    totalPrice() {
4
        return this.carlist
5
            .filter(item => { item.isSelected })
6
            .reduce((total, item) => { total + item.Number * item.price }, 0)
7
    }
8
},

1
<div style=" width: 60%;text-align: center; margin-top: 20px;">
2
    <h3>Total Price: {{ totalPrice }} $</h3>
3
</div>

7.2 侦听器#

用于监听数据变化并执行副作用。 ==监听属性，这里面的函数名是监听属性的名称 参数是传入新值与旧值==

1
watch: {
2
  message(newVal, oldVal) {
3
    console.log(`消息已从 ${oldVal} 更改为 ${newVal}`);
4
  }
5
}