Vue: 一个让前端开发不再痛苦的框架

2025年1月24日星期五 · simons · 本文共 780 个字，预计需要阅读 2 分钟

Vue: 一个让前端开发不再痛苦的框架

老板又改需求了?

// 改个文本要改三个地方
document.getElementById("title").innerText = "新标题";
document.querySelector(".header h1").innerText = "新标题";
document.getElementsByClassName("footer")[0].innerText = "新标题";

这就是没用Vue的下场。数据和视图分离,改一个要改几个地方,还容易改出bug。

Vue是啥?

简单说: Vue = 数据驱动视图 + 组件化开发

<template>
  <div>
    <!-- 数据自动同步到视图 -->
    <h1>{{title}}</h1>
    <button @click="changeTitle">改标题</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "原标题"
    }
  },
  methods: {
    changeTitle() {
      // 改数据,视图自动更新
      this.title = "新标题"
    }
  }
}
</script>

为什么选Vue?

上手容易
- 模板语法接近原生HTML
- 不用学JSX那套
- 中文文档无障碍
性能够用
- 虚拟DOM精确更新
- 自动依赖收集
- 按需渲染
生态完整
- Vuex状态管理
- Vue Router路由
- Vite/Vue CLI脚手架

跟其他框架比?

React: JSX太魔性,状态管理复杂
Angular: 太重,学习曲线陡峭
jQuery: 还在用?准备养老了?

实战例子

需求:写个Todo List

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span :class="{done: todo.done}">{{todo.text}}</span>
        <button @click="toggleTodo(todo)">完成</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: Date.now(),
        text: this.newTodo,
        done: false
      })
      this.newTodo = ''
    },
    toggleTodo(todo) {
      todo.done = !todo.done
    }
  }
}
</script>