VUE学习心得

老夫想抢占仁川
1,175 阅读21分钟

一、Vue2 简介与入门

1.1 Vue2 是什么

Vue2 是一个轻量级的前端框架，由 Evan You 开发，在网页开发领域扮演着极为重要的角色。它采用了组件化的设计理念，能够将复杂的用户界面拆分成一个个独立且可复用的组件，这使得开发者可以更加高效地管理和维护代码。例如，在一个电商网站中，头部的导航栏、商品列表、购物车等都可以作为独立的组件进行开发，然后在需要的地方进行引用和组合，大大提高了开发效率和代码的可维护性。

其在性能和功能上均有显著提升。在性能方面，Vue2 使用虚拟 DOM 来优化页面渲染。虚拟 DOM 是在内存中维护的一个轻量级的 DOM 副本，当数据发生变化时，Vue2 会先在虚拟 DOM 中进行计算和对比，找出最小化的 DOM 操作，然后再批量更新实际的 DOM，这样就避免了频繁地直接操作 DOM 带来的性能开销，从而显著提高了页面的渲染速度。在功能上，Vue2 提供了丰富的指令和过滤器，方便开发者对视图和数据进行处理。比如，v-if 指令可以根据条件来渲染元素，v-for 指令能够高效地循环渲染列表数据，过滤器则可以对数据进行格式化，如将日期格式化为指定的字符串格式等。

Vue2 的核心库体积小巧，仅约 20KB 左右，这使得它易于集成到各种项目中，无论是大型项目还是小型项目，都可以轻松引入 Vue2 来提升开发效率和用户体验。而且，Vue2 是渐进式框架，开发者可以根据项目需求逐步引入其功能，不必一次性全部采用，这为开发者提供了很大的灵活性。比如，对于一些简单的项目，可能只需要使用 Vue2 的基本数据绑定和组件化功能即可；而对于复杂的单页应用程序，则可以进一步引入 Vue Router 进行路由管理，使用 Vuex 进行状态管理等。

1.2 环境搭建与项目初始化

在安装 Vue2 之前，需先确保本地环境中已安装了 Node.js 和 npm。安装完成后，可通过以下两种常见方式安装 Vue2：

  • 使用 CDN 引入：对于一些简单的项目或者快速学习的场景，可在 HTML 页面中使用 CDN 引入 Vue2。在 head 标签内添加如下代码：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  • 使用 npm 安装：对于大型项目开发，推荐使用 npm 进行安装。在命令行中执行以下命令：
npm install vue@2

除了上述基础安装方式，还可使用 Vue CLI（Command Line Interface）这一官方提供的脚手架工具来快速搭建 Vue2 项目。具体步骤如下：

  1. 安装 Vue CLI：在命令行中运行以下命令进行全局安装：
npm install -g @vue/cli

2. 创建项目：安装完成后，在命令行中执行以下命令创建一个新的 Vue2 项目：

vue create my-vue-project

在创建过程中，会出现一些配置选项，可根据项目需求进行选择。例如，选择 Vue2 版本、是否使用 Babel、Router、Vuex 等功能，以及选择 CSS 预处理器等。

  1. 运行项目：进入项目目录，在命令行中运行以下命令启动项目开发服务器：
npm run serve

运行成功后，在浏览器中输入提示的地址，即可看到 Vue2 项目的默认页面。

  1. 项目构建：在项目开发完成后，可使用以下命令对项目进行构建，生成用于生产环境的静态文件：
npm run build

构建完成后，会在项目目录下生成一个 dist 文件夹，其中包含了压缩后的 HTML、CSS、JavaScript 等文件，可将这些文件部署到服务器上供用户访问。

在 Vue2 项目中，有一些重要的配置文件，如 package.json 用于管理项目的依赖包信息；vue.config.js 可用于配置项目的各种参数，如设置打包输出目录、配置开发服务器等。例如，在 vue.config.js 中可添加以下配置：

module.exports = {
  outputDir: 'dist', // 设置打包输出目录为 dist 文件夹
  devServer: {
    port: 8080, // 设置开发服务器的端口号为 8080
    open: true // 启动开发服务器时自动打开浏览器
  }
};

二、核心语法与数据绑定

2.1 模板语法

2.1.1 插值语法

插值语法使用双大括号 {{}}，它可以在 HTML 标签体中直接读取 Vue 实例 data 中的数据，并将其渲染到页面上。例如：

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

在上述代码中，{{ message }} 会被替换为 data 中 message 属性的值，即 Hello, Vue!，并显示在页面上。

插值表达式支持各种 JavaScript 表达式，如算术运算、三元表达式、函数调用等。例如：

<div id="app">
  <p>{{ num1 + num2 }}</p>
  <p>{{ isTrue? 'Yes' : 'No' }}</p>
  <p>{{ getFullName() }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    num1: 10,
    num2: 20,
    isTrue: true
  },
  methods: {
    getFullName() {
      return 'John Doe';
    }
  }
});

2.1.2 指令语法

Vue 中的指令以 v- 开头，用于对 HTML 元素进行各种操作，如绑定属性、监听事件、控制显示等。

  • v-bind 指令：用于绑定 HTML 元素的属性，将 Vue 实例中的数据动态地绑定到元素的属性上。例如，绑定 src 属性：
<img v-bind:src="imageUrl" alt="Image">

new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
});

上述代码中，v-bind:src 会将 imageUrl 的值绑定到 img 元素的 src 属性上，使图片显示为指定的 URL。v-bind 可以简写为 :，如 :src="imageUrl"。

  • v-on 指令：用于监听 HTML 元素的事件，当事件触发时，执行相应的 JavaScript 代码。例如，监听点击事件：
<button v-on:click="handleClick">Click me</button>

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
});

当按钮被点击时，会弹出一个提示框显示 Button clicked!。v-on 可以简写为 @，如 @click="handleClick"。

  • v-if 和 v-show 指令：都用于控制元素的显示与隐藏。v-if 是根据表达式的真假值来决定是否渲染元素，如果表达式为真，则渲染元素；否则，元素不会被渲染到 DOM 中。例如：
<div v-if="isVisible">This is visible when isVisible is true.</div>

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

v-show 则是通过控制元素的 display 属性来实现显示与隐藏，无论表达式的值如何，元素都会被渲染到 DOM 中，只是当表达式为假时，元素会被设置为 display: none。例如：

<div v-show="isVisible">This is shown or hidden based on isVisible.</div>

如果需要频繁切换元素的显示状态，v-show 的性能会更好，因为它只是切换样式，而 v-if 涉及到元素的创建和销毁。

  • v-for 指令：用于循环渲染列表数据。可以遍历数组、对象等。例如，遍历数组：
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
});

在上述代码中，v-for 会遍历 items 数组，为每个数组元素创建一个 li 元素，并将 item.name 渲染到 li 元素中。:key 是用于给每个循环项提供一个唯一的标识，这有助于 Vue 进行高效的更新渲染。

2.2 数据绑定

2.2.1 单向绑定

单向绑定是指数据只能从 Vue 实例的 data 属性流向页面。v-bind 指令就是用于实现单向数据绑定的。例如，在输入框中使用单向绑定：

<input type="text" :value="inputValue">

new Vue({
  el: '#app',
  data: {
    inputValue: 'Initial value'
  }
});

在这个例子中，输入框的 value 属性被绑定到 data 中的 inputValue。当 inputValue 发生变化时，输入框的值会相应更新，但用户在输入框中输入新的值并不会改变 inputValue。

单向绑定也可以应用于普通元素的属性，如 class、style 等。例如，动态绑定 class：

<div :class="{ active: isActive }">This div's class is controlled by isActive.</div>

new Vue({
  el: '#app',
  data: {
    isActive: true
  }
});

当 isActive 为 true 时，div 元素会添加 active 类；当 isActive 为 false 时，active 类会被移除。

2.2.2 双向绑定

双向绑定允许数据在 Vue 实例的 data 属性和页面之间双向流动。v-model 指令专门用于实现双向数据绑定，主要应用在表单元素上，如 input、select 等。例如：

<input type="text" v-model="message">

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
});

在这个例子中，当用户在输入框中输入内容时，data 中的 message 会随之更新；反之，当 message 的值发生变化时，输入框中的显示内容也会同步更新。

对于不同类型的表单元素，v-model 的行为略有不同。对于单选框和复选框，v-model 绑定的是选中状态的值，而不是 value 属性。例如：

<input type="checkbox" v-model="isChecked">

new Vue({
  el: '#app',
  data: {
    isChecked: false
  }
});

对于下拉框，v-model 绑定的是选中项的 value 属性。例如：

<select v-model="selectedOption">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

new Vue({
  el: '#app',
  data: {
    selectedOption: 'option1'
  }
});

需要注意的是，v-model 只能应用在表单类元素（有输入值）上，对于其他非表单元素使用 v-model 会导致错误。

三、组件化开发

3.1 组件的基本使用

在 Vue2 中，组件是可复用的 Vue 实例，且带有一个自定义标签名字，项目中把组件作为自定义元素来使用。组件化可以将项目中可能被重复使用的页面结构，转换为 vue 的一个组件实例，以组件组合的方式构成整个项目结构，或将特殊实现功能封装成组件进行特殊调用。Vue 组件分为全局组件和局部组件两种。

全局组件是在 Vue 实例化之前定义的组件，可以在任何 Vue 实例的模板中使用。定义全局组件的方式有两种：

  • 使用 Vue.component() 方法：
Vue.component('my-component', {
  // 组件选项
  template: '<div>这是一个全局组件</div>'
});
  • 使用 Vue.extend() 方法：
var MyComponent = Vue.extend({
  // 组件选项
  template: '<div>这是一个全局组件</div>'
});
Vue.component('my-component', MyComponent);

局部组件是在 Vue 实例化之后定义的组件，只能在该 Vue 实例的模板中使用。定义局部组件的方式也有两种：

  • 在 Vue 实例的 components 选项中注册：
var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      // 组件选项
      template: '<div>这是一个局部组件</div>'
    }
  }
});
  • 在 Vue 实例的 template 选项中定义：
var vm = new Vue({
  el: '#app',
  template: `
    <div>
      <my-component></my-component>
    </div>
  `,
  components: {
    'my-component': {
      // 组件选项
      template: '<div>这是一个局部组件</div>'
    }
  }
});

总的来说，全局组件适用于在多个 Vue 实例中共享的组件，而局部组件适用于只在当前 Vue 实例中使用的组件。在父组件中引用子组件时，只需在父组件的模板中使用子组件的自定义标签即可。例如：

<div id="app">
  <my-component></my-component>
</div>

3.2 组件间通信

3.2.1 父传子

父组件向子组件传递数据是通过 v-bind 指令实现的。在父组件的模板中，使用 v-bind 将数据绑定到子组件的自定义属性上。例如：

<parent-component>
  <child-component :message="parentMessage"></child-component>
</parent-component>

在上述代码中，parentMessage 是父组件 data 中的数据，通过 :message 绑定到子组件 child-component 上。

子组件使用 props 选项来接收父组件传递的数据。props 可以是一个数组或对象。例如：

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

在子组件中，message 就可以像组件内部的其他数据一样被使用。需要注意的是，props 是单向数据流，即父组件的数据变化会传递给子组件，但子组件不能直接修改 props 中的数据，否则会报错。如果子组件需要修改数据，可以通过触发自定义事件的方式告知父组件，由父组件来修改数据。

3.2.2 子传父

子组件向父组件传递数据是通过 emit方法触发自定义事件来实现的。在子组件中，当某个条件满足时，使用emit 方法触发自定义事件来实现的。在子组件中，当某个条件满足时，使用 emit 方法触发一个自定义事件，并传递数据作为参数。例如：

Vue.component('child-component', {
  template: `
    <div>
      <button @click="sendMessage">向父组件传值</button>
    </div>
  `,
  methods: {
    sendMessage() {
      this.$emit('child-event', '这是子组件传递的数据');
    }
  }
});

在父组件中，通过 v-on 或 @ 指令监听子组件触发的自定义事件，并在事件处理函数中接收数据。例如：

<parent-component>
  <child-component @child-event="handleChildMessage"></child-component>
</parent-component>

Vue.component('parent-component', {
  data: function() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleChildMessage(message) {
      this.receivedMessage = message;
    }
  }
});

在上述代码中，当子组件中的按钮被点击时，会触发 child-event 事件，并传递数据 '这是子组件传递的数据'。父组件通过 @child-event 监听该事件，并在 handleChildMessage 方法中接收数据，将其赋值给 receivedMessage。

四、深入 Vue2 特性

4.1 计算属性与侦听器

4.1.1 计算属性

计算属性 computed 是 Vue2 中一个非常强大的特性，它主要用于对数据进行复杂的处理和计算，并将结果缓存起来。当计算属性所依赖的数据发生变化时，它才会重新计算，否则将直接返回缓存中的结果。这一特性使得在模板中使用复杂逻辑表达式时，性能得到了极大的优化。

例如，我们有一个需求是根据用户的姓名和年龄来生成一个个性化的欢迎信息，其中姓名是字符串类型，年龄是数字类型，我们希望在页面中显示 “Hello, [姓名]! You are [年龄] years old.” 这样的欢迎语。如果使用方法来实现，可能会在模板中这样写：

<div id="app">
  <p>{{ getWelcomeMessage() }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    name: 'John',
    age: 25
  },
  methods: {
    getWelcomeMessage() {
      return `Hello, ${this.name}! You are ${this.age} years old.`;
    }
  }
});

在上述代码中，每次页面重新渲染时，getWelcomeMessage 方法都会被调用执行，即使 name 和 age 数据没有发生变化。

而如果使用计算属性来实现，代码如下：

<div id="app">
  <p>{{ welcomeMessage }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    name: 'John',
    age: 25
  },
  computed: {
    welcomeMessage() {
      console.log('计算属性被调用');
      return `Hello, ${this.name}! You are ${this.age} years old.`;
    }
  }
});

在这个例子中，当 name 或 age 数据发生变化时，welcomeMessage 计算属性才会重新计算，否则将直接使用缓存中的结果。这样，在多次访问 welcomeMessage 时，如果数据没有变化，就不会重复执行计算逻辑，提高了性能。

计算属性还可以设置 get 和 set 方法，使其成为可读写的属性。例如，我们有一个计算属性 fullName，它由 firstName 和 lastName 拼接而成，并且可以通过修改 fullName 来更新 firstName 和 lastName：

<div id="app">
  <p>{{ fullName }}</p>
  <input v-model="fullName">
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // get 方法用于获取计算属性的值
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      // set 方法用于设置计算属性的值
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
});

在上述代码中，当在输入框中修改 fullName 的值时，set 方法会被触发，将新值分解为 firstName 和 lastName，从而实现了双向的数据绑定和更新。

4.1.2 侦听器

侦听器 watch 主要用于监听数据的变化，并在数据变化时执行相应的操作。它在一些特定的场景下非常有用，比如当数据变化需要触发异步请求、进行数据校验或者执行一些复杂的逻辑时。

例如，我们有一个输入框，用户在其中输入用户名，当用户名发生变化时，我们需要调用一个接口来检查该用户名是否已被占用：

<div id="app">
  <input v-model="username">
</div>

new Vue({
  el: '#app',
  data: {
    username: ''
  },
  watch: {
    username(newVal) {
      if (newVal === '') return;
      // 模拟调用接口检查用户名是否被占用
      setTimeout(() => {
        if (newVal === 'admin') {
          console.log('用户名已被占用');
        } else {
          console.log('用户名可用');
        }
      }, 500);
    }
  }
});

在上述代码中，watch 监听 username 数据的变化，当 username 发生改变时，会执行相应的函数，在函数中调用接口（这里使用 setTimeout 模拟异步请求）来检查用户名的可用性，并根据结果在控制台输出相应的信息。

watch 还可以监听对象的变化。如果要监听对象内部属性的变化，需要设置 deep 属性为 true。例如：

<div id="app">
  <input v-model="user.name">
</div>

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 25
    }
  },
  watch: {
    user: {
      handler(newVal) {
        console.log('用户信息发生变化', newVal);
      },
      deep: true
    }
  }
});

在上述代码中，当修改 user 对象内部的 name 属性时，由于设置了 deep: true，watch 中的 handler 函数会被触发，打印出更新后的用户信息。

需要注意的是，使用 deep: true 会对整个对象进行深度监听，可能会带来一定的性能开销，因此在使用时需要根据具体情况进行权衡。

4.2 生命周期钩子

Vue 实例在创建、挂载、更新、销毁等不同阶段都有相应的生命周期钩子函数，这些钩子函数允许开发者在特定的阶段执行自定义的代码，从而实现对组件行为的精细控制。

  • beforeCreate：在 Vue 实例初始化之前被调用，此时数据观测（data observer）和事件机制尚未初始化，data 和 methods 中的数据或方法还未定义，无法访问。例如：
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.message); // 输出：undefined
  }
});
  • created：在实例创建完成后被调用，此时数据观测、属性和方法的运算以及事件监听已经设置完成，但尚未开始挂载到 DOM 上。可以在这个阶段进行数据的初始化、异步数据的获取等操作。例如：
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  created() {
    console.log('created: ', this.message); // 输出：Hello
    // 可以在这里发起异步请求获取数据
    axios.get('/api/data')
     .then(response => {
        this.data = response.data;
      });
  }
});
  • beforeMount：在模板编译之前被调用，此时模板已经在内存中编译好了，但尚未挂载到页面中。可以在这个阶段进行一些在挂载前的最后处理，比如修改数据等，但这些修改不会触发重新渲染，因为渲染尚未开始。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  beforeMount() {
    console.log('beforeMount: ', document.getElementById('app').innerHTML); 
    // 输出：空字符串，因为还未挂载到 DOM
  }
});
  • mounted：在实例挂载到 DOM 后被调用，此时真实的 DOM 已经生成，可以进行与 DOM 相关的操作，如获取 DOM 元素、初始化第三方插件等。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  mounted() {
    console.log('mounted: ', document.getElementById('app').innerHTML); 
    // 输出：<div>Hello</div>，已经挂载到 DOM
    // 可以在这里初始化插件，如 jQuery 插件
    $('#app').plugin();
  }
});
  • beforeUpdate：在数据更新之前被调用，此时数据已经发生变化，但页面尚未重新渲染，DOM 中的数据还是旧的。可以在这个阶段进行一些在更新前的准备工作，比如记录旧数据等。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  methods: {
    updateMessage() {
      this.message = 'World';
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: ', document.getElementById('app').innerHTML); 
    // 输出：<div>Hello</div>，数据已更新，但页面未重新渲染
  },
  updated() {
    console.log('updated: ', document.getElementById('app').innerHTML); 
    // 输出：<div>World</div>，数据和页面都已更新
  }
});
  • updated：在数据更新完成后被调用，此时实例的 DOM 已经根据新的数据进行了更新。需要注意的是，在这个钩子函数中不要进行修改数据的操作，否则可能会导致死循环。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  methods: {
    updateMessage() {
      this.message = 'World';
    }
  },
  updated() {
    console.log('updated: ', this.$el.textContent); // 输出：World
  }
});
  • beforeDestroy：在实例销毁之前被调用，此时实例仍然完全可用，可以进行一些清理工作，如清除定时器、解绑全局事件等。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  created() {
    // 创建一个定时器
    this.timer = setInterval(() => {
      console.log('定时器触发');
    }, 1000);
  },
  beforeDestroy() {
    // 在实例销毁前清除定时器
    clearInterval(this.timer);
    console.log('beforeDestroy: 实例即将销毁');
  }
});
  • destroyed：在实例销毁后被调用，此时所有的事件监听器和子组件都已经被销毁，Vue 实例相关的所有东西都已解绑。例如：
new Vue({
  el: '#app',
  template: '<div>{{ message }}</div>',
  data: {
    message: 'Hello'
  },
  destroyed() {
    console.log('destroyed: 实例已销毁');
  }
});

4.3 路由与状态管理

4.3.1 Vue Router

Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 核心深度集成，使开发者能够方便地构建单页应用程序（SPA）。

使用 Vue Router 进行路由配置主要包括以下几个步骤：

  1. 导入 vue-router 库：在项目中，首先需要导入 vue-router 库。如果是使用 Vue CLI 创建的项目，可以在 main.js 文件中进行导入：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

2. 定义路由组件：创建需要在路由中使用的组件。例如，创建一个 Home 组件和一个 About 组件：

const Home = {
  template: '<div>Home Page</div>'
};
const About = {
  template: '<div>About Page</div>'
};

3. 创建路由实例并定义路由规则：创建一个 VueRouter 实例，并定义路由规则。路由规则是一个数组，每个元素包含 path（路由路径）和 component（对应的组件）等属性：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

在上述示例中，当用户访问根路径 '/' 时，将显示 Home 组件；当访问 /about 路径时，将显示 About 组件。

  1. 将路由实例挂载到 Vue 实例：在创建 Vue 实例时，将路由实例挂载到 Vue 实例上：
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

5. 在组件中使用路由链接与编程式导航：在组件的模板中，可以使用 组件来创建路由链接，实现页面之间的切换。例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

当用户点击这些链接时，浏览器的 URL 会相应改变，同时显示对应的组件。

除了使用 进行导航外，还可以在 JavaScript 代码中使用编程式导航。例如，在某个方法中通过 this.$router.push 方法实现页面跳转：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

这将导航到 /about 页面。

在使用 Vue Router 时，还可以传递参数、设置路由守卫等。例如，传递参数可以通过在路由路径中使用动态参数：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
});

在组件中可以通过 this.$route.params 获取参数值：

const User = {
  template: '<div>User ID: {{ $route.params.id }}</div>'
};

路由守卫可以用于在路由切换前进行权限验证、页面加载状态控制等操作。例如，全局前置路由守卫：

router.beforeEach((to, from, next) => {
  // 检查用户是否登录，如果未登录且要访问需要登录的页面，则跳转到登录页面
  if (!isLoggedIn && to.meta.requiresAuth) {
    next('/login');
  } else {
    next();
  }
});

在上述代码中，beforeEach 钩子函数在每次路由切换前被调用，根据条件判断是否允许导航到目标页面。

4.3.2 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，使得多组件之间的数据共享和交互变得更加清晰和易于维护。

Vuex 的核心概念包括：

  • state：存储应用的状态数据，是一个对象。例如：
const state = {
  count: 0,
  user: {
    name: 'John',
    age: 25
  }
};

在组件中可以通过 this.$store.state 来访问 state 中的数据。例如：

<div>{{ $store.state.count }}</div>
  • mutations：用于修改 state 中的数据，是一些同步函数。每个 mutation 都有一个字符串类型的事件类型和一个回调函数。例如：
const mutations = {
  increment(state) {
    state.count++;
  },
  setUserName(state, newName) {
    state.user.name = newName;
  }
};

在组件中通过 this.$store.commit 方法来触发 mutation：

methods: {
  incrementCount() {
    this.$store.commit('increment');
  },
  updateUserName() {
    this.$store.commit('setUserName', 'Jane');
  }
}
  • actions：用于处理异步操作，如异步请求数据等，通过提交 mutation 来间接修改 state。actions 也是一些函数，接收一个 context 对象作为参数，通过 context.commit 来触发 mutation。例如：
const actions = {
  async fetchData({ commit }) {
    const response = await axios.get('/api/data');
    commit('setData', response.data);
  }
};

在组件中通过 this.$store.dispatch 方法来触发 action：

methods: {
  fetchData() {
    this.$store.dispatch('fetchData');
  }
}
  • getters：类似于计算属性，用于对 state 中的数据进行加工处理后返回。例如：
const getters = {
  doubleCount(state) {
    return state.count * 2;
  },
  userFullName(state) {
    return `${state.user.name} ${state.user.age}`;
  }
};

在组件中可以通过 this.$store.getters 来访问 getters 中的数据：

<div>{{ $store.getters.doubleCount }}</div>
<div>{{ $store.getters.userFullName }}</div>

例如，在一个购物车应用中，我们可以使用 Vuex 来管理购物车中的商品数据

五、实践与优化技巧

5.1 项目实战经验分享

在实际的 Vue2 项目开发中，从项目需求分析到最终的上线部署，每一个环节都至关重要。

项目需求分析阶段，需要与团队成员、产品经理和设计师密切合作，充分理解项目的业务目标和用户需求。例如，在开发一个电商应用时，要明确商品展示、购物车功能、订单处理、用户登录注册等核心功能的具体要求，以及页面的布局、交互设计等细节。

架构设计方面，根据项目的规模和复杂度，选择合适的架构模式。对于小型项目，可能简单的单页应用架构就能满足需求；而对于大型项目，则可能需要考虑采用微前端架构，将项目拆分成多个子应用，独立开发、独立部署，以提高开发效率和项目的可维护性。在确定架构后，要规划好项目的目录结构，使代码的组织更加清晰。一般来说，可以按照功能模块划分目录，如将组件、页面、路由、状态管理等分别放在不同的目录下。

组件划分与开发是 Vue2 项目的核心环节。以电商应用的商品列表组件为例，首先要确定组件的功能和接口。商品列表组件可能需要接收商品数据数组作为 prop，还可能需要一些自定义事件来处理商品的点击、添加到购物车等操作。在开发组件时，要遵循单一职责原则，确保每个组件只专注于一项功能。比如，商品列表组件只负责展示商品信息，而商品详情组件则专注于展示单个商品的详细信息和处理相关操作。在组件内部，合理组织代码结构，将模板、样式和逻辑代码分离，提高代码的可读性和可维护性。

在处理组件间的交互与通信时，要根据不同的场景选择合适的通信方式。对于父子组件通信，父传子使用 v-bind 传递数据，子传父通过 emit触发事件。例如，在商品列表组件中，父组件可以将商品数据通过v−bind传递给子组件，子组件在商品被点击时，通过emit 触发事件。例如，在商品列表组件中，父组件可以将商品数据通过 v-bind 传递给子组件，子组件在商品被点击时，通过 emit 触发一个自定义事件，将商品信息传递给父组件，以便父组件进行后续的操作，如添加到购物车。对于非父子组件通信，如果组件层级较浅，可以使用事件总线（Event Bus）；如果项目规模较大，涉及多个组件的状态管理，建议使用 Vuex。例如，在电商应用中，购物车组件和商品列表组件可能不是父子关系，当商品在列表中被点击添加到购物车时，可以通过 Vuex 来管理购物车的状态，实现数据的共享和同步。

在项目开发过程中，还会遇到各种挑战和问题。例如，性能优化是一个重要的方面，尤其是在处理大量数据或复杂页面时。可以采用虚拟列表技术来优化长列表的渲染性能，只渲染当前可见区域的列表项，减少 DOM 操作。另外，在请求数据时，要合理处理加载状态和错误状态，给用户提供良好的反馈。比如，在数据加载时显示加载动画，当请求出错时显示错误提示信息。

5.2 性能优化

5.2.1 代码层面优化

在 Vue2 项目中，代码层面的优化能够显著提升应用的性能。合理使用 v-if 和 v-show 指令是优化代码结构的重要手段。例如，在一个具有复杂权限管理的页面中，某些元素只有特定用户角色才能看到。如果使用 v-if，则当用户角色不满足条件时，该元素对应的 DOM 节点不会被创建，节省了内存和初始化渲染的开销。示例代码如下：

<template>
  <div>
    <div v-if="userRole === 'admin'">
      <!-- 管理员可见的内容 -->
      <h3>管理员面板</h3>
      <p>这里是管理员才能看到的信息和操作按钮。</p>
    </div>
    <div v-else>
      <!-- 普通用户可见的内容 -->
      <h3>普通用户面板</h3>
      <p>这是普通用户看到的信息。</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userRole: 'user' // 假设当前用户角色为普通用户
    };
  }
};
</script>

而对于一些需要频繁切换显示状态的元素，如一个展开收起的面板，使用 v-show 则更为合适。因为 v-show 只是通过切换元素的 display 属性来控制显示与隐藏，元素的 DOM 节点始终存在，切换成本相对较低。示例如下：

<template>
  <div>
    <button @click="togglePanel">展开/收起面板</button>
    <div v-show="isPanelVisible">
      <!-- 面板内容 -->
      <p>这里是面板中的详细信息。</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isPanelVisible: false
    };
  },
  methods: {
    togglePanel() {
      this.isPanelVisible =!this.isPanelVisible;
    }
  }
};
</script>

computed 和 watch 的合理运用也能提升性能。当一个数据依赖于其他数据进行复杂计算时，应使用 computed。例如，在一个电商商品详情页面，有商品的原价和折扣，需要计算出商品的折后价格。使用 computed 实现如下：

<template>
  <div>
    <p>原价：{{ originalPrice }}</p>
    <p>折扣：{{ discount }}</p>
    <p>折后价：{{ discountedPrice }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discount: 0.8
    };
  },
  computed: {
    discountedPrice() {
      return this.originalPrice * this.discount;
    }
  }
};
</script>

这样，只有当 originalPrice 或 discount 发生变化时，discountedPrice 才会重新计算，避免了每次页面渲染都进行计算的开销。而当需要在数据变化时执行异步操作或复杂的副作用时，则使用 watch。比如，当用户在搜索框中输入关键词时，需要实时调用搜索接口获取搜索结果：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="请输入关键词">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    };
  },
  watch: {
    searchKeyword(newVal) {
      if (newVal === '') return;
      // 模拟调用搜索接口
      setTimeout(() => {
        // 假设搜索接口返回的数据格式如下
        const results = [
          { id: 1, name: '搜索结果 1' },
          { id: 2, name: '搜索结果 2' }
        ];
        this.searchResults = results;
      }, 500);
    }
  }
};
</script>

keep-alive 组件也是提升性能的有力工具。它可以缓存组件的实例，避免组件在切换时重复创建和销毁。例如，在一个多标签页的应用中，当用户在不同标签页之间切换时，如果使用 keep-alive 包裹标签页组件，那么只有第一次进入标签页时会创建组件实例，后续切换时直接使用缓存的实例，大大提高了页面切换的速度。示例如下：

<template>
  <div>
    <router-link to="/tab1">标签页 1</router-link>
    <router-link to="/tab2">标签页 2</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

5.2.2 打包优化

在使用 webpack 进行项目打包时，有多种优化策略可以减小项目体积，提高加载速度。

代码分割是一种重要的优化方式。通过将代码分割成多个块，可以实现按需加载，只加载当前页面需要的代码。例如，对于一个包含多个路由的应用，可以为每个路由对应的组件设置代码分割。在 Vue Router 中，可以使用动态导入的方式实现路由懒加载。代码如下：

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

这样，当用户访问首页时，只会加载 Home 组件对应的代码块，而不会加载其他路由组件的代码，减少了初始加载的代码量，提高了页面的加载速度。

代码压缩也是必不可少的环节。使用 webpack 的压缩插件，如 UglifyJSPlugin 或 TerserPlugin，可以压缩和优化 JavaScript 代码。在 webpack.prod.conf.js 文件中配置如下：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  plugins: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          unused: true, // 是否去掉未关联的函数和变量
          warnings: false, // 是否去掉告警
          drop_debugger: true, // 自动删除 debugger
          drop_console: true // 自动删除 console.log
        }
      },
      sourceMap: config.build.productionSourceMap, // 将错误信息映射到模块
      parallel: true // 多通道并行处理
    })
  ]
};

这将压缩和混淆 JavaScript 代码，减小文件大小。

另外，还可以去除未使用的代码。启用 Tree-Shaking，删除未使用的代码和依赖。在模块导入时，要使用具体的导出名称，而不是通配符或默认导入。例如：

// 正确的导入方式
import { componentA } from './componentA';
// 错误的导入方式
import * as componentA from './componentA';

这样，webpack 在打包时就能够识别出未使用的代码并进行删除，进一步减小项目体积。

六、总结与展望

通过对 Vue2 的学习，我们深入了解了其在前端开发中的重要地位和强大功能。从基础的语法与数据绑定，到组件化开发、深入特性，再到实践与优化技巧，Vue2 为我们提供了一套完整且高效的开发工具。在实际项目中，合理运用 Vue2 的各种特性，能够显著提高开发效率、优化应用性能、提升用户体验。

然而，前端技术的发展日新月异，Vue2 只是我们前端开发旅程中的一个重要站点。在掌握 Vue2 的基础上，我们还应积极探索其生态系统中的其他技术，如 Vue3 的新特性、服务端渲染（Nuxt.js）、移动端开发（Weex）等。Vue3 在响应式系统、 Composition API 等方面带来了诸多改进和创新，能够进一步提升开发体验和应用性能；Nuxt.js 为解决单页应用的 SEO 问题和提升首屏加载速度提供了有效的服务端渲染方案；Weex 则让我们能够使用熟悉的 Web 技术开发跨平台的移动应用，拓展了前端开发的边界。

希望大家能够继续保持学习的热情，不断探索和实践，为成为一名优秀的前端开发者而努力。在未来的开发工作中，充分发挥 Vue2 及相关技术的优势，创造出更加出色的前端应用，为用户带来更加优质的互联网体验。

avatar
文章
阅读
粉丝