1.Vue2到底是什么？和React、Angular比优势在哪？

terry 19小时前阅读数 14 #Vue

前端圈里Vue.js的名气不用多说，尤其是Vue2版本，直到现在还是很多中小项目、企业级应用的“心头好”，但刚接触的同学总会犯难：Vue2该从哪入手？核心知识怎么串起来？遇到问题咋解决？这篇问答式指南把Vue2入门路上的关键问题拆碎了讲，帮你从“懵圈”到能动手写小项目～

Vue2是一套**渐进式JavaScript框架**，“渐进式”意思是你可以一点点往项目里加Vue功能，不用全盘重构，比如先只用它做页面局部交互，再扩展成单页应用（SPA）。

和React比，Vue2的模板语法更贴近HTML，对前端新手友好；和Angular比，Vue2学习曲线更平缓，文档更“人话”，而且Vue2的响应式原理（基于Object.defineProperty）让数据和视图同步特别丝滑，写代码时改数据就能自动更新页面，少了很多手动操作DOM的麻烦。

学Vue2前，得先啃透哪些基础？

想高效学Vue2，这些前置知识得扎实：

HTML/CSS/JS基础：能写静态页面、懂ES6语法（比如箭头函数、export/import）、会操作DOM和事件绑定。
包管理工具：了解npm/yarn是干啥的，能装依赖、跑项目脚本。
工程化概念：知道Webpack是咋打包项目的（不用深挖，但得明白“项目结构为啥这么分”）。

要是这些基础不牢，学Vue2时会像“看天书”，所以先花几天补短板再启动更稳～

咋快速搭好第一个Vue2项目？

有两种常用姿势，按需选：

方式1：CDN引入（适合快速体验）

直接在HTML里插CDN链接，像这样：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue2!'
      }
    })
  </script>
</body>
</html>

保存成HTML文件，用浏览器打开，就能看到页面显示“Hello Vue2!”——这是最极简的Vue2应用，能直观感受“数据驱动视图”。

方式2：Vue CLI脚手架（适合正式项目）

Vue CLI是官方脚手架，能一键生成标准化项目结构，步骤：

先装Vue CLI：npm install -g @vue/cli（装完输vue --version看是否成功）。
新建项目：vue create my-vue2-app，选择“Manually select features”，勾上Babel、Router、Vuex这些需要的工具，注意Vue版本选2.x。
启动项目：进入文件夹cd my-vue2-app，跑npm run serve，浏览器打开http://localhost:8080，就能看到默认的Vue2项目页面。

Vue实例、数据与方法咋理解？

每个Vue应用都是从new Vue()创建的根实例开始的。

new Vue({
  el: '#app', // 挂载到页面哪个DOM元素上
  data: { // 要渲染的数据 'Vue2入门',
    list: [1,2,3]
  },
  methods: { // 定义方法
    handleClick() {
      this.title = '数据被修改啦' // this指向当前Vue实例
    }
  }
})

这里el是“挂载点”，告诉Vue该控制页面哪个区域；data里的属性会被Vue变成“响应式”的——只要数据变了，页面上用到它的地方会自动更新；methods里放函数，能通过this访问数据或调用其他方法。

双向数据绑定和常用指令咋用？

双向数据绑定（`v-model`）

在表单元素（输入框、单选框等）里，v-model能让视图改数据、数据改视图同步。

<input v-model="username" placeholder="请输入用户名">
<p>你输入的是：{{ username }}</p>

输入框里打字时，username数据会实时变，页面上{{ username }}也跟着变；反过来，要是代码里改this.username，输入框内容也会变。

常用指令（`v-bind`、`v-if`、`v-for`…）

指令是Vue里带v-前缀的特殊属性，用来给DOM加行为：

v-bind（缩写）：给HTML属性绑定数据，比如<img :src="imgUrl">，imgUrl是data里的图片地址，数据变了，src也会变。
v-if：条件渲染。<div v-if="isShow">条件满足才显示</div>，isShow为true时才渲染这个div。
v-for：循环渲染。<li v-for="(item, index) in list" :key="index">{{ item }}</li>，把list数组里的每个元素渲染成li标签。

组件化开发在Vue2里咋玩？

组件是Vue2的核心思想之一，把页面拆成一个个可复用的“积木”，比如做个按钮组件：

步骤1：定义组件

// MyButton.vue
<template>
  <button @click="handleClick">{{ btnText }}</button>
</template>
<script>
export default {
  name: 'MyButton',
  props: { // 父组件传过来的参数
    btnText: String
  },
  methods: {
    handleClick() {
      this.$emit('btn-click') // 触发自定义事件，通知父组件
    }
  }
}
</script>

步骤2：在父组件里用

// Parent.vue
<template>
  <div>
    <MyButton btnText="点我" @btn-click="doSomething" />
  </div>
</template>
<script>
import MyButton from './MyButton.vue'
export default {
  components: { MyButton }, // 注册组件才能用
  methods: {
    doSomething() {
      console.log('按钮被点了！')
    }
  }
}
</script>

组件间通信靠props（父传子）和$emit（子传父），复杂场景还能用量具（Provide/Inject）、事件总线或Vuex。<slot>插槽能让组件更灵活，比如父组件给子组件传一段HTML结构～

Vue2的生命周期钩子有啥用？咋选钩子写逻辑？

生命周期钩子是Vue实例从“创建→运行→销毁”过程中自动触发的函数，常用的有：

created：实例创建完，数据观测、事件配置都搞完了，但DOM还没渲染，适合发Ajax请求拿初始数据。
mounted：DOM渲染完了，能访问到真实DOM元素，适合操作DOM（比如初始化第三方插件）。
updated：数据更新导致DOM重新渲染后触发，适合数据变了后做一些DOM层面的收尾。
beforeDestroy：实例销毁前触发，适合清除定时器、解绑事件，防止内存泄漏。

举个发请求的例子：

export default {
  data() { return { list: [] } },
  created() {
    // 这里发Ajax，拿到数据后赋值给list
    axios.get('/api/list').then(res => {
      this.list = res.data
    })
  }
}

单页应用咋配Vue2路由（Vue Router）？

单页应用（SPA）里，不同页面切换靠路由控制，步骤：

装Vue Router：npm install vue-router@3（Vue2要配v3版本）。

定义路由规则（router.js）：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router) // 注册路由插件

export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] })


3. 在`main.js`里把路由挂到Vue实例：  
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  router, // 注入路由
  render: h => h(App)
}).$mount('#app')

在App.vue里用<router-view>显示页面，<router-link>做跳转：

<template>
<div>
 <router-link to="/">首页</router-link>
 <router-link to="/about">lt;/router-link>
 <router-view></router-view>
</div>
</template>

复杂项目咋用Vuex做状态管理？

Vuex是Vue2的状态管理库，适合多组件共享数据的场景（比如购物车、用户信息），核心概念：

State：存共享数据的地方。
Mutations：唯一能改State的地方，必须是同步函数。
Actions：处理异步操作（比如发Ajax），然后提交Mutation。
Getters：类似计算属性，对State做过滤、加工。

举个简单例子（store.js）：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('INCREMENT') // 提交mutation
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

组件里用：

export default {
  computed: {
    count() { return this.$store.state.count },
    doubleCount() { return this.$store.getters.doubleCount }
  },
  methods: {
    handleClick() {
      this.$store.commit('INCREMENT') // 触发mutation
      this.$store.dispatch('incrementAsync') // 触发action
    }
  }
}

学完基础咋快速练手做项目？

光看理论没用，得实操！推荐几个方向：

TodoList：覆盖数据渲染（v-for）、双向绑定（v-model）、事件处理（@click），把增删改查逻辑走通。
仿豆瓣电影列表：用Vue2 + Vue Router + Axios，调用公开API（比如豆瓣开放接口），做列表展示、详情页跳转。
简易后台管理系统：用组件化拆分侧边栏、头部、内容区，结合Vuex存用户信息，Vue Router做权限路由（比如登录后才能进管理页）。

练手时别贪大，先把小功能跑通，再逐步加复杂度，遇到问题先查Vue2官方文档（写得超详细），或者去技术社区搜“Vue2 + 问题场景”，Vue2 v-for 报错key”这类关键词，大部分坑前人都踩过～

Vue2入门看似要学的东西多，但把“实例→数据绑定→指令→组件→路由→状态管理”这些核心链路理清楚，再结合项目练手，其实门槛没那么高，关键是别光看不动手——现在就打开编辑器，从第一个Hello Vue2开始写，遇到问题拆成小步骤解决，你会发现“哦，原来Vue2这么顺！” 要是练手时卡壳了，回头看这篇里的问题,说不定答案就在里面～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue2里的keep alive该怎么用？这些场景和细节你得清楚下一篇：Vue2项目里跨域问题咋解决？

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。