Vue 技术文档

简介：Vue 是什么？

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。Vue 可以自底向上逐层应用，逐步引入，不需要一开始就重构整个应用。

核心概念

组件化

Vue 将页面的 HTML、CSS 和 JS 代码封装在一个组件中，可以被其他组件或页面重复使用。组件化能够有效地将一个庞大复杂的前端工程拆分成一个个独立的、可重复使用的组件，大大提高了开发效率。

声明式编码

命令式：

// 需要手动控制 DOM 更新的方式

声明式：

<!-- Vue 会根据数据的变化自动更新视图 -->
<div>{{ message }}</div>

虚拟 DOM 和 DIFF 算法

Vue 使用虚拟 DOM 来优化 DOM 操作，避免了频繁的直接操作 DOM，提升了性能。通过 DIFF 算法，Vue 只会更新变动的部分，进一步提高了渲染效率。

生命周期

Vue 实例会经历一系列生命周期钩子函数，开发者可以在这些钩子函数中插入自定义代码。例如：created、mounted、updated 等。

MVVM 模型

• M (Model)：模型层，通常指 data 数据
• V (View)：视图层，通常指模板
• VM (ViewModel)：视图模型，即 Vue 实例对象，负责将模型与视图进行绑定

通过数据绑定和 DOM 监听，Vue 实现了视图与数据的双向绑定。

优缺点

优点

• 组件化开发：易于维护和复用。
• 响应式数据绑定：自动更新视图。
• 虚拟 DOM：提高性能。
• 渐进式框架：可以逐步集成。

缺点

• 学习曲线：对于初学者来说可能需要一定时间理解 Vue 的响应式原理。
• 不适合非常复杂的应用：当应用非常庞大时，性能和维护性可能会遇到问题。

语法

基本结构

new Vue({
  el: "#app", // 挂载点
  data: {
    // 数据
    message: "Hello Vue!",
  },
  computed: {
    // 计算属性
    name: {
      getter() {
        return this.message;
      },
      setter(value) {
        this.message = value;
      },
    },
  },
  methods: {
    // 方法
    fname() {
      // 函数逻辑
    },
  },
  watch: {
    // 监视器
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    },
  },
});

计算属性简写

computed: {
  fname() {
    // 只有 getter 时简写为函数形式
  }
}

模板语法

插值语法

<h1>{{ message }}</h1>

指令语法

• v-bind：用于绑定 HTML 属性

<a v-bind:href="url">Click me</a>

• v-model：双向数据绑定

<input v-model="message" />

简写：

<input v-model="message" />

• v-on：绑定事件

<button v-on:click="clickHandler">Click me</button>

简写：

<button @click="clickHandler">Click me</button>

• v-show：控制元素的显示与隐藏

<div v-show="isVisible">This is visible</div>

Vue 实例的挂载

const v = new Vue({
  el: "#app",
});

简写：

v.$mount("#app");

方法

事件处理

• 滚轮事件

<ul @wheel="handleWheel">
  <li></li>
</ul>

• 滚动条事件

<ul @scroll="handleScroll">
  <li></li>
</ul>

属性添加与配置可枚举

Object.defineProperty(object, "key", {
  value: 42,
  enumerable: true,
  writable: true,
  configurable: true,
});

methods 中函数传参

<button @click="fname($event, 'param')">Click</button>

methods: {
  fname(event, param) {
    // 处理事件和参数
  }
}

监视器

监视属性变化

watch: {
  message(newValue, oldValue) {
    console.log(`Message changed from ${oldValue} to ${newValue}`);
  }
}

简写：

watch: {
  message(newValue) {
    console.log(newValue);
  }
}

深度监视

watch: {
  data: {
    deep: true,  // 打开深度监视
    handler(newValue, oldValue) {
      // 处理深度监视变化
    }
  }
}

事件修饰符

• prevent：阻止默认事件

<a href="#" @click.prevent="handleClick">Click me</a>

• stop：阻止事件冒泡

<div @click.stop="handleClick">
  <button @click.stop="handleClick">Click me</button>
</div>

• once：事件只触发一次

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

• capture：使用事件捕获模式

<div @click.capture="handleClick">Click me</div>

• self：只有 event.target 是当前元素时才触发事件

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

键盘事件

• 回车事件

<input @keyup.enter="handleEnter" />

• 空格事件

<input @keyup.space="handleSpace" />

class 和 style 绑定

class 绑定

<div :class="className">Content</div>

• 动态绑定

<div :class="['class1', 'class2']">Content</div>

style 绑定

<div :style="{ fontSize: fontSize + 'px' }">Content</div>

---