FRONTEND 三月 08, 2020

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

文章字数 12k 阅读约需 11 mins. 阅读次数 0

我们一直都有关注和阅读很多关于 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.usernamestate.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 代表着完全不一样的东西。

Vue2this代表的是当前组件,不是某一个特定的属性。所以我们可以直接使用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代码

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

总结一下,我觉得 Vue3 给我们前端开发者带来了全新的开发体验,更好的使用弹性,可控度也得到了大大的提升。如果你是一个学过或者接触过 React 然后现在想使用 Vue 的话,应该特别兴奋,因为很多使用方式都和 React 非常相近了 🎉!

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

最后我把完成的 Vue2Vue3 的组件代码发出来给大家:

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 的开发区别。如果大家还有什么问题,可以在评论中提问哦!

开发愉快!~

和你一起终身学习

0%