Vue3生态探索专题

最新推荐文章于 2024-03-01 09:56:52 发布

冰冻丶三尺

最新推荐文章于 2024-03-01 09:56:52 发布

阅读量290

点赞数 2

分类专栏：前端框架 Vue Vue3和Vue2之间的区别文章标签：前端 vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_45407251/article/details/128420550

版权

前端框架同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

Vue3和Vue2之间的区别

1 篇文章 0 订阅

订阅专栏

Vue3生态探索专题

01 Vue3介绍

Vue3是基于Vue2上面的升级，主要是针对性能优化方面进行升级，其中语法和Vue2之间有一定的差异，本课程主要针对Vue3的新特性以及和Vue2的差异进行学习，帮助各位同学在企业级的开发当中适应版本的升级和加深框架的理解，在技术层面上获取更高的收益。

以下链接是Vue3的官方文档

[https://www.javascriptc.com/vue3js/]:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jsFMRcCE-1671781692580)(C:\Users\Skevin\AppData\Roaming\Typora\typora-user-images\image-20221222102437799.png)]

1.1 MVVM模式

web开发的程序员对于MVC的设计思想应该并不陌生，网上相关的文章也有很多。M(model)-V(view)-C(Controller)代表了一种程序组织架构的模式，实现了数据、视图和逻辑的有效解耦。M，表示数据状态，V代表视图界面，Controller用于处理数据和视图之间的交互逻辑。后端的web框架（如Java中的springMVC、Struts2；nodejs中的express、koa等）依然沿用此设计模式至今。不过在前端领域，涉及到用户界面的编程，MVC的架构模式现在已经不是主流了。究其原因，主要有几方面：

业务逻辑和UI混合在一起
不利于扩展和复用
无法验证测试
增加数据的复杂性

02 Vue3环境搭建

之前我们使用Vue2的方式搭建环境，现在我们需要对自己电脑的环境做升级，只有升级环境，才能正常使用Vue3的基础语法。

2.1 环境指令

在当前电脑的任何位置打开命令窗口，输入以下指令，即可升级Vue的版本环境。

npm install -g @vue/cli

2.2 搭建项目

在当前项目文件夹当中使用指令创建项目文件。

备注：指令当中的vue3project是项目名称，可以自定义。

vue create vue3project

2.3 项目选项

输入指令以后，会让我们自动选择项目，键盘上下键可以选择对应的内容，选择和Vue3相对应的内容即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A4ENSSTA-1671781692587)(Vue3学习.assets/image-20221222103216309.png)]

等待项目下载…,等待过程中需要几分钟时间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wSivG0R2-1671781692589)(Vue3学习.assets/image-20221222103351583.png)]

创建项目完毕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-chJ9oLjl-1671781692590)(Vue3学习.assets/image-20221222103557711.png)]

查看项目文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsIZAEMg-1671781692592)(Vue3学习.assets/image-20221222103629594.png)]

观察项目当中的配置文件，主要是检查Vue版本是否为3.0以上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sleFLsel-1671781692593)(Vue3学习.assets/image-20221222154811009.png)]

2.4 启动项目

启动项目使用指令进行，Vue3.0版本的启动项目的指令和Vue2有一定的区别。

npm run serve

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ZpuW9zn-1671781692594)(Vue3学习.assets/image-20221222155139859.png)]

使用指令后，会自动暴露项目的端口号，根据当前的端口号在浏览器中打开项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iPwkBV8-1671781692596)(Vue3学习.assets/image-20221222155307645.png)]

03 选项式API

<template>
  <div @click="changeMsg">{{ msg }}</div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello world",
    };
  },
  methods: {
    changeMsg() {
      this.msg = "hello juejin";
    }
  }
};
</script>

04 组合式API

<template>
  <div @click="changeMsg">{{ msg }}</div>
</template>

<script>
import { ref, defineComponent } from "vue";
export default defineComponent({
  setup() {
    const msg = ref("hello world");
    const changeMsg = () => {
      msg.value = "hello wolfcode";
    };
    return {
      msg,
      changeMsg,
    };
  },
});
</script>

05 选项式和组合式的区别

选项式API是将数据和方法分开进行管理，而组合式API是将所有的内容放置在一起（类似js的原生开发）。

setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。

5.1 Options API

vue2中如何组织代码的：我们会在一个vue文件中data，methods，computed，watch中定义属性和方法，共同处理页面逻辑
优点：新手上手简单

-上图解释了Options API 的缺点，一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能，而且当你想要新增一个功能的时候你可能需要在 data，methods，computed，watch中都要写一些东西，但是这个时候每个选项里面的内容很多你需要上下来回的翻滚，特别影响效率。

5.2 Composition API

缺点：学习成本可能会增加，以前的思维方式也要转变
优点：Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清） Composition API最大的优点通俗的讲就是把跟一个功能相关的东西放在一个地方，它是目前最合理也是最容易维护的，你可以随时将功能的一部分拆分出去。你可以将每一个功能相关所有的东西比如methods，computed都放在如上图的function中，这个function可以独立的存在，可以放在一个TS文件中，也可在npm中单独发布，最终Composition API把他们组合起来

06 ref 和 reactive

我们都知道在选项式api中，data函数中的数据都具有响应式，页面会随着data中的数据变化而变化，而组合式api中不存在data函数该如何呢？所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据。

基础写法

<script>
import { ref,reactive,defineComponent } from "vue";
export default defineComponent({
setup() {
let msg = ref('hello world')
let obj = reactive({
    name:'juejin',
    age:3
})
const changeData = () => {
    msg.value = 'hello juejin'
    obj.name = 'hello world'
}
return {
    msg,
    obj,
    changeData
};
},
});
</script>

setup语法糖写法

<script setup>
import { ref,reactive } from "vue";
let msg = ref('hello world')
let obj = reactive({
    name:'juejin',
    age:3
})
const changeData = () => {
  msg.value = 'hello juejin'
  obj.name = 'hello world'
}
</script>

07 生命周期

Vue2（选项式api）	Vue3（setup）	描述
beforeCreate	-	实例创建前
created	-	实例创建后
beforeMount	onBeforeMount	DOM挂载前调用
mounted	onMounted	DOM挂载完成调用
beforeUpdate	onBeforeUpdate	数据更新之前被调用
updated	onUpdated	数据更新之后被调用
beforeDestroy	onBeforeUnmount	组件销毁前调用
destroyed	onUnmounted	组件销毁完成调用

举个常用的onMounted的例子

选项式Api

<script>
export default  {
  mounted(){
    console.log('挂载完成')
  }
}
</script>

组合式Api

<script>
import { onMounted,defineComponent } from "vue";
export default defineComponent({
setup() {
onMounted(()=>{
  console.log('挂载完成')
})
return {
onMounted
};
},
});
</script>

setup语法糖

<script setup>
import { onMounted } from "vue";
onMounted(()=>{
  console.log('挂载完成')
})
</script>

08 watch和computed

选项式API

<template>
  <div>{{ addSum }}</div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  computed: {
    addSum() {
      return this.a + this.b
    }
  },
  watch:{
    a(newValue, oldValue){
      console.log(`a从${oldValue}变成了${newValue}`)
    }
  }
}
</script>

组合式Api

<template>
  <div>{{addSum}}</div>
</template>
<script>
import { computed, ref, watch, defineComponent } from "vue";
export default defineComponent({
  setup() {
    const a = ref(1)
    const b = ref(2)
    let addSum = computed(() => {
      return a.value+b.value
    })
    watch(a, (newValue, oldValue) => {
     console.log(`a从${oldValue}变成了${newValue}`)
    })
    return {
      addSum
    };
  },
});
</script>

setup语法糖

<template>
  <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
  return a.value + b.value
})
watch(a, (newValue, oldValue) => {
  console.log(`a从${oldValue}变成了${newValue}`)
})
</script>

09 Vue插件生态

Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个流行的 Vue 插件。

Vuetify
NuxtJS
Vuex
Vuex Persisted State
VuePress
Vue Meta
Vue ChartJS
Vue Grid Layout
Vue Draggable
Vee-Validate
Vue Toastification
Vue Tour
Swiper.js
Vue2-Leaflet
TroisJS
Vue Scrollama
Vue QR Code Reader

10 总结

通过以上写法的对比会发现setup语法糖的形式最为便捷而且更符合开发者习惯；未来Vue3的开发应该会大面积使用这种形式。目前Vue3已经成为了Vue的默认版本，后续维护也会以Vue3为主；所以还没开始学习Vue3的同学要抓紧了!

冰冻丶三尺

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue3生态探索专题

Vue3是基于Vue2上面的升级，主要是针对性能优化方面进行升级，其中语法和Vue2之间有一定的差异，本课程主要针对Vue3的新特性以及和Vue2的差异进行学习，帮助各位同学在企业级的开发当中适应版本的升级和加深框架的理解，在技术层面上获取更高的收益。
复制链接

扫一扫