loyalvi
99 Vue 原理
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

vue 原理

Vue

Vue. js 是一个渐进式 JavaScript 框架，用于构建用户界面。它设计之初的目标是易于上手和集成，同时也能支持大型应用的开发。以下是 Vue. js 的一些主要特点和优势：

1. 声明式数据绑定

Vue. js 使用声明式数据绑定，使得数据和视图之间的同步更加直观和高效。当数据变化时，视图会自动更新，反之亦然。

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
  {{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

2. 组件系统

Vue. js 提供了一个强大的组件系统，允许开发者将应用分解为可复用的组件。每个组件都有自己的数据、方法和模板，使得代码更加模块化和易于维护。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="todo-item">
    <input type="checkbox" v-model="completed">
    <span :class="{ completed: completed }">{{ title }}</span>
  </div>
</template>
<script>
  export default {
    props: ['title'],
    data() {
      return {
        completed: false
      };
    }
  };
</script>
<style>
  .completed {
    text-decoration: line-through;
  }
</style>

3. 虚拟 DOM

Vue. js 使用虚拟 DOM 来提高性能和效率。当数据变化时，Vue 会计算出最小的 DOM 更新操作，然后批量应用这些更新，减少实际的 DOM 操作次数。

4. 事件处理

Vue. js 提供了简单易用的事件处理机制，使得绑定和处理事件更加直观。使用 v-on 指令可以轻松绑定事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button v-on:click="increment">Increment</button>
<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment() {
        this.count++;
      }
    }
  });
</script>

5. 计算属性和侦听器

计算属性和侦听器是 Vue. js 的两个强大功能，用于基于数据派生出新的数据。计算属性会自动缓存，只有当依赖的数据变化时才会重新计算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
  {{ fullName }}
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName() {
        return `${this.firstName} ${this.lastName}`;
      }
    }
  });
</script>

侦听器可以用于在数据变化时执行异步或开销较大的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  new Vue({
    el: '#app',
    data: {
      question: ''
    },
    watch: {
      question(newQuestion, oldQuestion) {
        console.log(`Question changed from ${oldQuestion} to ${newQuestion}`);
      }
    }
  });
</script>

6. 指令系统

Vue. js 提供了一系列内置指令，如 v-if、v-for、v-bind、v-on 等，用于操作 DOM。同时，也支持自定义指令，可以扩展 Vue. js 的功能。

1
2
3
4
5
6
7
8
9
10
<!-- 条件渲染 -->
<div v-if="seen">Now you see me</div>
<!-- 列表渲染 -->
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
<!-- 动态属性绑定 -->
<a v-bind:href="url">Link</a>
<!-- 事件绑定 -->
<button v-on:click="doSomething">Do something</button>

7. 过渡和动画

Vue. js 提供了简单的过渡和动画支持，可以轻松地为 DOM 变化添加过渡效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
  <button v-on:click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello!</p>
  </transition>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      show: true
    }
  });
</script>
<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
  }
</style>

8. 单文件组件 (Single File Components, SFC)

Vue. js 支持单文件组件，允许将模板、脚本和样式封装在一个 .vue 文件中，使得组件更加自包含和易于管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped>
h1 {
  color: #42b983;
}
</style>

9. 生态系统

Vue. js 拥有一个丰富的生态系统，包括 Vue Router（路由管理）、Vuex（状态管理）、Vue CLI（项目脚手架工具）等，支持大型应用的开发。

10. 服务器端渲染 (SSR)

Vue. js 支持服务器端渲染，可以提高应用的性能和 SEO 友好性。使用 Nuxt. js 等框架可以轻松构建 SSR 应用。

示例

假设有一个简单的待办事项应用，使用 Vue. js 可以这样实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Todo App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <input v-model="newTodo" @keyup.enter="addTodo">
        <ul>
            <li v-for="(todo, index) in todos" :key="todo.id">
                <input type="checkbox" v-model="todo.completed">
                <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
                <button @click="removeTodo(index)">Remove</button>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 'Todo List',
                newTodo: '',
                todos: [
                    { id: 1, text: 'Learn Vue.js', completed: false },
                    { id: 2, text: 'Build a Todo App', completed: false }
                ]
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim()) {
                        this.todos.push({
                            id: this.todos.length + 1,
                            text: this.newTodo,
                            completed: false
                        });
                        this.newTodo = '';
                    }
                },
                removeTodo(index) {
                    this.todos.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>

在这个示例中，使用 Vue. js 实现了一个简单的待办事项应用，包括添加、删除和标记完成的功能。代码简洁且易于理解。

总结

Vue. js 通过其声明式数据绑定、组件系统、虚拟 DOM 和丰富的生态系统，提供了一个高效、灵活且易于上手的框架，适用于从小型项目到大型应用的开发。它的设计哲学和功能使得开发者能够快速构建响应式的用户界面，同时保持代码的可维护性和可扩展性。

性能

Vue 性能优化是一个多方面的过程，涉及代码层面、路由管理、资源加载等多个方面。以下是一些常见的性能优化策略：

1. 代码层面的优化

  • 减少不必要的计算：合理使用计算属性（computed）和侦听器（watch），避免在组件中进行不必要的计算。
  • 组件拆分与复用：将大型组件拆分为多个小型、可复用的组件，减少渲染成本。
  • 使用 v-once：对于静态内容，使用 v-once 指令减少不必要的更新。
  • 优化事件监听：按需监听事件，避免不必要的事件绑定。

2. 路由层面的优化

  • 路由懒加载：通过 Vue Router 的懒加载功能，将路由对应的组件按需加载，减少初始加载时间。 
    1
    2
    3
    4
    5
    6
    const routes = [
      {
        path: '/about',
        component: () => import('./components/About.vue')
      }
    ];
  • 预加载关键资源：在路由守卫中预加载未来可能需要的资源，减少页面加载时间。 
    1
    2
    3
    4
    5
    6
    7
    router.beforeEach((to, from, next) => {
      if (to.path === '/about') {
        loadCriticalResources().then(() => next());
      } else {
        next();
      }
    });
  • 优化路由守卫：减少不必要的路由守卫逻辑，避免影响性能。

3. 数据层面的优化

  • 数据懒加载：对于大量数据，采用懒加载方式，只加载用户当前需要的数据。
  • 使用 Object.freeze：对于不需要响应的数据，使用 Object.freeze 冻结对象，避免 Vue 追踪其变化。 
    1
    2
    3
    4
    5
    data() {
      return {
        staticData: Object.freeze({ key: 'value' })
      };
    }

4. 资源优化

  • 图片压缩与格式优化：使用压缩工具（如 TinyPNG）对图片进行压缩，并选择合适的格式（如 WebP）。
  • 懒加载图片：对于非首屏图片，使用懒加载技术减少初始加载时间。
  • 使用 CDN：将静态资源部署到 CDN，减少用户访问延迟。

5. 构建与打包优化

  • 代码分割与懒加载：使用 Webpack 的代码分割功能，将代码拆分成多个小块，按需加载。
  • 压缩代码：使用构建工具（如 Webpack）配合压缩插件（如 TerserPlugin）压缩 JavaScript 文件。
  • 优化 Webpack 配置：合理配置 splitChunks，减少打包体积。

6. 用户体验优化

  • 虚拟滚动：对于长列表，使用虚拟滚动技术，只渲染可视范围内的项。
  • 使用 keep-alive 缓存组件：对于频繁切换的组件，使用 keep-alive 缓存，减少重复渲染。
  • 服务端渲染（SSR）：对于需要快速首屏渲染的场景，使用 SSR 减轻客户端负担。

7. 性能监控与调优

  • 使用性能监控工具：使用 Vue Devtools、Lighthouse 等工具分析和定位性能瓶颈。
  • 定期代码审查：优化代码结构，减少不必要的逻辑。

总结

性能优化是一个持续的过程，需要结合具体项目情况进行调整。通过上述策略，可以从多个层面提升 Vue 应用的性能，从而提升用户体验。

99 Vue 原理
posts/ad47dacb/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. vue 原理
    1. Vue
      1. 1. 声明式数据绑定
      2. 2. 组件系统
      3. 3. 虚拟 DOM
      4. 4. 事件处理
      5. 5. 计算属性和侦听器
      6. 6. 指令系统
      7. 7. 过渡和动画
      8. 8. 单文件组件 (Single File Components, SFC)
      9. 9. 生态系统
      10. 10. 服务器端渲染 (SSR)
      11. 示例
      12. 总结
    2. 性能
      1. 1. 代码层面的优化
      2. 2. 路由层面的优化
      3. 3. 数据层面的优化
      4. 4. 资源优化
      5. 5. 构建与打包优化
      6. 6. 用户体验优化
      7. 7. 性能监控与调优
      8. 总结
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. vue 原理
    1. Vue
      1. 1. 声明式数据绑定
      2. 2. 组件系统
      3. 3. 虚拟 DOM
      4. 4. 事件处理
      5. 5. 计算属性和侦听器
      6. 6. 指令系统
      7. 7. 过渡和动画
      8. 8. 单文件组件 (Single File Components, SFC)
      9. 9. 生态系统
      10. 10. 服务器端渲染 (SSR)
      11. 示例
      12. 总结
    2. 性能
      1. 1. 代码层面的优化
      2. 2. 路由层面的优化
      3. 3. 数据层面的优化
      4. 4. 资源优化
      5. 5. 构建与打包优化
      6. 6. 用户体验优化
      7. 7. 性能监控与调优
      8. 总结