您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

带你体验Vue2和Vue3开发组件的区别(一)

来源:网络整理 浏览:259次 时间:2022-11-30

历经 13 个 RC 版本之后,Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,等待了两年多的Vue 终于正式发布了 3.0 正式版本了!

现在的vue版本已经可以满足我们大部分开发场景,虽然Vue3正式版发布不久,可能存在某些问题,但是提前学习了解总归是有好处的。可能有些已经开始抓狂了,学不动了。

所以这里我们通过用脚手架创建的项目,对比这两个版本在开发组件上的区别。如果还不会创建Vue3项目,请移步记录使用@vue/cli搭建Vue3项目完整流程。记录完整的创建流程,今天我们的教程也是基于上次构建的项目。


1.template

标签模版这块,Vue2和Vue3区别不大,Vue3支持碎片(Fragments),就是说template下可以有多个根节点。

Vue2

Vue2 template下只能包含一个根节点。

<template>  <div>    显示区域  </div></template>

Vue3

Vue3 template下可以包含多个根节点。

<template>  <div>显示区域</div>  <div>显示区域</div>  <div>显示区域</div></template>

2.data

Vue2和Vue3区别很大,我们代码看。

Vue2

Vue2是选项类型API(Options API),在代码里分割了不同的属性(properties):data,computed属性,methods,等等。

export default {  data () {    return {      userName: '',      password: ''    }  }}

Vue3

Vue3合成型API(Composition API),需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。

import { reactive } from 'vue'export default {  setup () {    const data = reactive({      userName: '',      password: ''    })    return { data }  }}

3.methods

这个写法上也有很大区别。

Vue2

Vue2把methods分割到独立的属性区域。

export default {  data () {    return {}  },  methods: {    // 方法    login () {}  }}

Vue3

Vue3不需要把方法写在methods内,在setup()方法中声明,最后返回(return)

import { reactive } from 'vue'export default {  setup () {    const data = reactive({      userName: '',      password: ''    })    // 登陆方法    const login = () => {}    return {       login,      data    }  }}

4.Lifecyle Hooks

这个区别也很大。

Vue2

Vue2可以直接在组件属性中调用Vue的生命周期的钩子。

export default {  data () {    return {      userame: '',      password: ''    }  },  beforeCreate() {},  created() {},  beforeMount() {},  mounted() {},  beforeUpdate() {},  updated() {},  beforeDestroy() {},  destroyed() {}}

Vue3

Vue3 的合成型API里面的setup()方法可以包含了基本所有东西。生命周期的钩子就是其中之一。

import { reactive, onMounted } from 'vue'export default {  setup () {    // ..    onMounted(() => {})    // ...  }}

与 2.x 版本生命周期相对应的组合式 API。

1、beforeCreate -> 使用 setup()2、created -> 使用 setup()3、beforeMount -> onBeforeMount4、mounted -> onMounted5、beforeUpdate -> onBeforeUpdate6、updated -> onUpdated7、beforeDestroy -> onBeforeUnmount8、destroyed -> onUnmounted9、errorCaptured -> onErrorCaptured

暂时先写到这,后期在介绍其他区别。有问题可以下方留言。

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com