【Vue】笔记二：Vue详解以及从Vue2.0到Vue3.0的技术栈梳理及操作步骤

网络真危险！！

已于 2023-05-29 17:59:22 修改

阅读量1.5k

点赞数

分类专栏： # vue技术栈文章标签： vue.js javascript 前端

于 2023-05-29 16:06:39 首次发布

本文链接：https://blog.csdn.net/weixin_55846296/article/details/130930026

版权

vue技术栈专栏收录该内容

6 篇文章 0 订阅

订阅专栏

好的，下面是从Vue2.0到Vue3.0的技术栈梳理及操作步骤。

一、Vue介绍

Vue.js 是一款轻量级的 MVVM 前端框架，并且被广泛应用于现代 Web 开发中。在学习 Vue.js 之前，首先需要了解 Vue.js 的基础知识。下面将简要介绍 Vue.js 的优点、安装与使用、Vue 组件和指令、Vue.js 的响应式原理以及 Vue.js 的生命周期。

1、Vue.js 的优点

Vue.js 具有以下优点：

学习曲线低：Vue.js 的语法简单、直观、易于上手。
易于集成：可以轻松地与其他库和框架集成，例如 Vuex、vue-router、Axios 等。
响应式数据绑定：Vue.js 通过响应式数据绑定实现了数据与视图的自动同步更新。
组件化开发：Vue.js 的组件化开发能够提高代码的复用性和可维护性。
轻量级：Vue.js 的体积非常小，对于前端项目的构建和打包都能够提升开发效率。

2、Vue.js 的安装与使用

可以使用 CDN 引入 Vue.js，也可以使用 npm 包管理器进行安装，安装完成之后就可以在项目中使用 Vue.js：

<!-- Directly include the Vue.js library. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

# install latest release.
npm install vue

# install a specfic release.
npm install vue@2.6.11

// Use vue in the project.
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

3、Vue 组件和指令

Vue.js 的组件是一种复用的界面单元，可以将整个界面划分为多个部分，每个部分对应于一个组件。Vue.js 的指令是指在 HTML 标签中，使用一个特殊的属性绑定 Vue 实例中的数据或响应事件，常用的指令有 v-model、v-for、v-if、v-bind 等。

Vue.js 允许使用组件和指令来组织和控制复杂的应用界面。组件和指令都可以使用 Vue.js 的数据绑定来实现动态更新。

具体可以参考我的另一篇文章：【vue】笔记三：Vue基础语法以及数据绑定

4、Vue.js 的响应式原理

Vue.js 的响应式原理是通过使用数据劫持来实现的。Vue.js 通过 Object.defineProperty() 方法底层劫持数据属性的 setter() 和 getter() 函数。

当在 Vue.js 的被劫持的数据属性上设置值时，Vue.js 会自动通知依赖这个属性的视图进行更新。

5、Vue.js 的生命周期

Vue.js 的生命周期是 Vue 实例从创建到销毁的整个过程。Vue中的生命周期钩子函数可用于在Vue实例的不同阶段执行相关操作，如实例化前、实例化后、挂载前、挂载后、更新前、更新后等。

常用的生命周期钩子函数：

beforeCreate()：实例化之前
created()：实例化之后，可访问数据和方法，但无法访问DOM
beforeMount()：挂载之前
mounted()：挂载之后
beforeUpdate()：更新之前
updated()：更新之后
beforeDestroy()：销毁之前
destroyed()：销毁之后

6、总结

Vue.js 是一款非常优秀的前端框架，拥有简洁的语法和优秀的性能。在开始使用 Vue.js 之前，需要了解基础知识，包括 Vue.js 的优点、安装与使用、Vue 组件和指令、Vue.js 的响应式原理以及 Vue.js 的生命周期等。建议掌握这些基础内容后，再通过实际项目应用去深入学习和掌握 Vue.js。

二、 Vue2.0技术栈梳理

Vue2是一个轻量、高效、渐进式的JavaScript框架，最具特色的是其双向数据绑定和组件化开发模式。

特点和优势如下：

1. 响应式：Vue2采用了响应式的数据绑定方式，当数据发生变化时，能够自动更新视图。
1. 组件化：Vue2提供了组件化开发模式，将应用划分为多个独立的组件，可大大提高代码的可重用性。
1. 模板语法：Vue2的模板语法简单易用，支持插值表达式、指令、事件绑定等多种形式。
1. 动态交互：Vue2支持动态绑定、动态组件、异步组件等功能，可以实现更灵活的交互效果。
1. 插件机制：Vue2提供了丰富的插件机制，可以方便地扩展Vue的功能。

技术栈主要包括以下内容：

Vue2.0核心库：提供组件化和响应式数据双向绑定等核心功能。
Vue Router：提供路由功能，用于实现SPA应用。
Vuex：提供状态管理功能，用于进行大型复杂应用的状态管理。
Axios：提供基于Promise的HTTP客户端，用于异步数据请求。

操作步骤

创建Vue项目：

# 使用Vue CLI创建Vue项目
vue create my-project

安装第三方插件：

# 安装Vue Router
npm install vue-router

# 安装Vuex
npm install vuex

# 安装Axios
npm install axios

引入并配置Vue Router：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

引入并配置Vuex：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// main.js
import Vue from 'vue'
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在组件中使用Axios进行异步数据请求：

// 使用Axios进行异步请求
import axios from 'axios'
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('/users')
      .then(response => {
        this.users = response.data
      })
  }
}

三、 Vue3.0技术栈梳理

Vue3是Vue2的升级版本，专注于提升性能和开发体验，其中最有特色的是Composition API。

特点和优势如下：

1. 性能提升：Vue3通过引入静态分析、优化编译器、重构响应式系统、重构虚拟DOM等方式进行了全面的性能提升。
1. Composition API：Vue3新增了Composition API，使得组件内部逻辑可以更加清晰、灵活地组织。
1. TypeScript支持：Vue3具备原生支持TypeScript的能力，使得开发更加健壮、可维护。
1. 更小的体积：Vue3的体积更小，性能更好，同时还提供了更多的功能和特性。
1. 新的生命周期函数：Vue3中新增了beforeUnmount和onRenderTracked等生命周期函数。

技术栈包括以下内容：

Vue3.0核心库：使用Composition API提供了更加简单易用的API。
Vue Router：Vue3.0版本的Vue Router对比Vue2.0版本并没有太大变化。
Vuex 4：提供状态管理的功能，与Vue3.0兼容。
Axios：与Vue3.0兼容，使用方式与Vue2.0版本相同。

操作步骤

创建Vue3.0项目：

# 使用Vue CLI创建Vue3.0项目
vue create --preset lixiaoming0325/vue3-preset my-project

引入并配置Vue Router：

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

createApp(App).use(router).mount('#app')

引入并配置Vuex：

// store.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

在组件中使用Axios进行异步数据请求：

// 使用Axios进行异步请求
import { ref } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const users = ref([])

    axios.get('/users')
      .then(response => {
        users.value = response.data
      })

    return {
      users
    }
  }
}

以上就是Vue3.0的技术栈以及操作步骤。需要注意的是，Vue3.0版本相对Vue2.0来说改动较大，需要针对新的API进行学习和使用，同时需要注意在开发过程中的版本兼容性问题。

四、vue2与vue3进行比较

1. 性能优化

Vue3相对于Vue2做了很多关于性能优化的改进，包括响应式系统的升级、编译器的静态分析和优化、虚拟DOM的架构升级等等，可以显著提高Vue应用的性能。

2. Composition API

Vue3中新增了Composition API，它可以让开发者更好地组织组件内部的逻辑，而不是依赖于以前的Options API。使用Composition API，我们可以更好地拆分逻辑，更好地重用代码。

3. TypeScript支持

Vue3在设计时就考虑了对TypeScript的支持，这意味着开发者可以使用TypeScript来编写Vue3应用，从而更好地管理代码和提高开发效率。

4. 更快的运行时

Vue3相对于Vue2有更快更小的运行时，这意味着Vue3可以更快地渲染视图，同时也占用更少的资源。

5. 其他改进

Vue3还包括了其他各种改进，如更好的debugging支持、更好的性能分析和调试、对TSX语法的支持等等。

五、总结

综上，Vue2和Vue3都是优秀的JavaScript框架，各有其独特的特点和优势，开发者需要根据具体需求来选择使用。同时，Vue3相对于Vue2具有更高的性能和更丰富的功能特性，建议开发者在新项目中直接选择使用Vue3。

网络真危险！！

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Vue】笔记二：Vue详解以及从Vue2.0到Vue3.0的技术栈梳理及操作步骤

Vue是一个流行的JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。Vue的特点是易于学习、易于使用，同时简化了DOM操纵和数据管理的复杂性。综上，Vue2和Vue3都是优秀的JavaScript框架，各有其独特的特点和优势，开发者需要根据具体需求来选择使用。同时，Vue3相对于Vue2具有更高的性能和更丰富的功能特性，建议开发者在新项目中直接选择使用Vue3。
复制链接

扫一扫