带你体验Vue2和Vue3开发组件有什么区别

咱们一直都有关注和阅读不少关于Vue3的新特性和功能即将到来。可是咱们没有一个具体的概念在开发中会有如何的改变和不同的体验。还有一些童鞋已经开始又慌又抓狂了 -- “又要开始学新的写法了 (ノToT )ノ ~┻┻”。

因此这里我使用Vue2和Vue3开发一个简单的表格组件来展现一下Vue2和Vue3开发组件的区别。看完这片文章后，你将会有一个概念Vue2和Vue3开发组件时的区别，而且为Vue3的开发之路作好准备。ღ(◔ڼ◔ღ)ミ

废话少说，让咱们开始吧～ (๑ •̀ㅂ•́)و

建立一个 template

组件来讲，大多代码在Vue2和Vue3都很是类似。Vue3支持碎片(Fragments)，就是说在组件能够拥有多个根节点。

这种新特性能够减小不少组件之间的div包裹元素。在开发vue的时候，咱们会发现每个组件都会有个div元素包裹着。就会出现不少层多余的div元素。碎片(Fragments)解决了这个问题。对于有完美强迫症的童鞋“真的时太棒了”。咱们这里的例子里就不展现了，用简单的单根节点的组件。

Vue2 表格template

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>
复制代码

在Vue3的惟一真正的不一样在于数据获取。Vue3中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中。— 因此咱们须要访问这个反应状态来获取数据值。

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    
    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>
复制代码

创建数据 data

这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

旧的选项型API在代码里分割了不一样的属性（properties）：data，computed属性，methods，等等。新的合成型API能让咱们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

如今咱们来对比一下Vue2写法和Vue3写法在代码里面的区别。

Vue2 - 这里把两个数据放入data属性中

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
复制代码

在Vue3.0，咱们就须要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

为了可让开发者对反应型数据有更多的控制，咱们能够直接使用到 Vue3 的反应API（reactivity API）。

使用如下三步来创建反应性数据:

1. 从vue引入reactive
2. 使用reactive()方法来声名咱们的数据为反应性数据
3. 使用setup()方法来返回咱们的反应性数据，从而咱们的template能够获取这些反应性数据

上一波代码，让你们更容易理解是怎么实现的。

import { reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}
复制代码

这里构造的反应性数据就能够被template使用，能够经过state.username和state.password得到数据的值。

Vue2 对比 Vue3的 methods 编写

Vue2 的选项型API是把methods分割到独立的属性区域的。咱们能够直接在这个属性里面添加方法来处理各类前端逻辑。

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登录方法
    }
  }
}
复制代码

Vue3 的合成型API里面的setup()方法也是能够用来操控methods的。建立声名方法其实和声名数据状态是同样的。— 咱们须要先声名一个方法而后在setup()方法中返回(return)， 这样咱们的组件内就能够调用这个方法了。

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    const login = () => {
      // 登录方法
    }
    return { 
      login,
      state
    }
  }
}
复制代码

生命周期钩子 — Lifecyle Hooks

在 Vue2，咱们能够直接在组件属性中调用Vue的生命周期的钩子。如下使用一个组件已挂载（mounted）生命周期触发钩子。

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
    console.log('组件已挂载')
  },
  methods: {
    login () {
      // login method
    }
  }
}
复制代码

如今 Vue3 的合成型API里面的setup()方法能够包含了基本全部东西。生命周期的钩子就是其中之一！

可是在 Vue3 生周期钩子不是全局可调用的了，须要另外从vue中引入。和刚刚引入reactive同样，生命周期的挂载钩子叫onMounted。

引入后咱们就能够在setup()方法里面使用onMounted挂载的钩子了。

import { reactive, onMounted } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    // ..

    onMounted(() => {
      console.log('组件已挂载')
    })

    // ...
  }
}
复制代码

计算属性 - Computed Properties

咱们一块儿试试添加一个计算属性来转换username成小写字母。

在 Vue2 中实现，咱们只须要在组件内的选项属性中添加便可

export default {
  // .. 
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  }
}
复制代码

Vue3 的设计模式给予开发者们按需引入须要使用的依赖包。这样一来就不须要多余的引用致使性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。

因此在 Vue3 使用计算属性，咱们先须要在组件内引入computed。

使用方式就和反应性数据（reactive data）同样，在state中加入一个计算属性:

import { reactive, onMounted, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }
复制代码

接收 Props

接收组件props参数传递这一块为咱们带来了Vue2和Vue3之间最大的区别。—this在vue3中与vue2表明着彻底不同的东西。

在 Vue2，this表明的是当前组件，不是某一个特定的属性。因此咱们能够直接使用this访问prop属性值。就好比下面的例子在挂载完成后打印处当前传入组件的参数title。

mounted () {
    console.log('title: ' + this.title)
}
复制代码

可是在 Vue3 中，this没法直接拿到props属性，emit events（触发事件）和组件内的其余属性。不过全新的setup()方法能够接收两个参数：

1. props - 不可变的组件参数
2. context - Vue3 暴露出来的属性（emit，slots，attrs）

因此在 Vue3 接收与使用props就会变成这样：

setup (props) {
    // ...

    onMounted(() => {
      console.log('title: ' + props.title)
    })

    // ...
}
复制代码

事件 - Emitting Events

在 Vue2 中自定义事件是很是直接的，可是在 Vue3 的话，咱们会有更多的控制的自由度。

举例，如今咱们想在点击提交按钮时触发一个login的事件。

在 Vue2 中咱们会调用到this.$emit而后传入事件名和参数对象。

login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
 }
复制代码

可是在 Vue3中，咱们刚刚说过this已经不是和vue2表明着这个组件了，因此咱们须要不同的自定义事件的方式。

那怎么办呀？! ლಠ益ಠ)ლ

不用慌，在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是同样的。那么咱们只要在setup()接收第二个参数中使用分解对象法取出emit就能够在setup方法中随意使用了。

而后咱们在login方法中编写登录事件：

setup (props, { emit }) {
    // ...

    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    // ...
}
复制代码

最终的vue2对比vue3代码

真的是太棒了，能看到这里的童鞋们，大家如今基本都看到vue2与vue3其实概念与理念都是同样的。只是有一些属性获取方式和声名和定义方式稍微变了。一直在鬼哭狼嚎的小小前端开发猿人们，大家能够松一口气了吧。

总结一下，我以为 Vue3 给咱们前端开发者带来了全新的开发体验，更好的使用弹性，可控度也获得了大大的提高。若是你是一个学过或者接触过 React 而后如今想使用Vue的话，应该特别兴奋，由于不少使用方式都和React很是相近了 🎉！

全新的合成式API（Composition API）能够提高代码的解耦程度 —— 特别是大型的前端应用，效果会更加明显。还有就是按需引用的有了更细微的可控性，让项目的性能和打包大小有更好的控制。

最后我把完成的 Vue2 和 Vue3 的组件代码发出来给你们：

Vue2

<template>
  <div class='form-element'> <h2> {{ title }} </h2> <input type='text' v-model='username' placeholder='Username' /> <input type='password' v-model='password' placeholder='Password' /> <button @click='login'> Submit </button> <p> Values: {{ username + ' ' + password }} </p> </div> </template> <script> export default { props: { title: String }, data () { return { username: '', password: '' } }, mounted () { console.log('title: ' + this.title) }, computed: { lowerCaseUsername () { return this.username.toLowerCase() } }, methods: { login () { this.$emit('login', { username: this.username, password: this.password }) } } } </script> 复制代码

Vue3

<template>
  <div class='form-element'> <h2> {{ state.title }} </h2> <input type='text' v-model='state.username' placeholder='Username' /> <input type='password' v-model='state.password' placeholder='Password' /> <button @click='login'> Submit </button> <p> Values: {{ state.username + ' ' + state.password }} </p> </div> </template> <script> import { reactive, onMounted, computed } from 'vue' export default { props: { title: String }, setup (props, { emit }) { const state = reactive({ username: '', password: '', lowerCaseUsername: computed(() => state.username.toLowerCase()) }) onMounted(() => { console.log('title: ' + props.title) }) const login = () => { emit('login', { username: state.username, password: state.password }) } return { login, state } } } </script> 复制代码

但愿这篇文章能让你们体验到一个比较全面的Vue2与Vue3的开发区别。若是你们还有什么问题，能够在评论中提问哦！

开发愉快！～