内容简介:4月16日,Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本。随着Vue3即将发布,许多人都在想“ Vue2与Vue3有何不同?”为了显示这些更改,我们将在Vue2和Vue3中构建一个简单的表单组件。
4月16日,Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本。
随着Vue3即将发布,许多人都在想“ Vue2与Vue3有何不同?”
为了显示这些更改,我们将在Vue2和Vue3中构建一个简单的表单组件。
在本文结尾,你将了解Vue2和Vue3之间的主要编程差异,并逐步成为一名更好的开发人员。
创建我们的模板
对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持 Fragments ,这意味着组件可以具有多个根节点。
在渲染列表中的组件以删除不必要的包装div元素时,这特别有用。但是,在这种情况下,我们将为两个版本的Form组件保留一个根节点。
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>
唯一真正的区别是我们访问数据的方式。在Vue3中,我们的响应式数据都包装在响应式状态变量中——因此我们需要访问该状态变量以获取我们的值。
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>
设置Data
这是主要的区别——Vue2 Options API与Vue3 Composition API 。
Options API将我们的代码分为不同的属性:数据,计算属性,方法等。同时,Composition API允许我们按功能而不是属性类型对代码进行分组。
假设对于表单组件,我们只有两个数据属性: username
和 password
。
Vue2代码看起来是这样的——我们只需在 data
属性中放入两个值。
Vue2
export default { props: { title: String }, data () { return { username: '', password: '' } } }
在Vue 3.0中,我们必须投入更多的精力来使用一个新的 setup()
方法,所有的组件初始化都应该在这个方法中进行。
另外,为了使开发人员能够更好地控制响应式,我们可以直接访问Vue的响应式API。
创建响应式数据涉及三个步骤:
- 从Vue导入
reactive
- 使用
reactive
方法声明我们的数据 - 让我们的
setup()
方法返回reactive
数据,以便我们的模板可以访问它
在代码方面,它将看起来像这样。
Vue3
import { reactive } from 'vue' export default { props: { title: String }, setup () { const state = reactive({ username: '', password: '' }) return { state } } }
然后,在模板中,我们像 state.username
和 state.password
一样访问它们
在Vue2与Vue3中创建方法
Vue2 Options API有一个单独的方法部分。在其中,我们可以定义所有方法并以所需的任何方式组织它们。
Vue2
export default { props: { title: String }, data () { return { username: '', password: '' } }, methods: { login () { // login method } } }
Vue3 Composition API 中的setup方法也可以处理方法。它的工作方式与声明数据有些类似——我们必须先声明我们的方法,然后返回它,以便组件的其他部分可以访问它。
Vue3
export default { props: { title: String }, setup () { const state = reactive({ username: '', password: '' }) const login = () => { // login method } return { login, state } } }
生命周期钩子函数
在Vue2中,我们可以直接从组件选项访问 生命周期钩子 函数。对于我们的示例,我们将等待 mounted 事件。
Vue2
export default { props: { title: String }, data () { return { username: '', password: '' } }, mounted () { console.log('component mounted') }, methods: { login () { // login method } } }
现在有了Vue3 Composition API,几乎所有内容都在 setup()
方法内部,这包括 mounted 的生命周期钩子。
但是,默认情况下不包括生命周期挂钩,因此我们必须导入 onMounted
方法,作为Vue3中调用的方法,这看起来与早期导入 reactive 相同。
然后,在我们的 setup()
方法中,可以通过将 onMounted
方法传递给函数来使用它。
Vue3
import { reactive, onMounted } from 'vue' export default { props: { title: String }, setup () { // .. onMounted(() => { console.log('component mounted') }) // ... } }
计算属性
让我们添加一个计算属性,将我们的用户名转换为小写字母。为了在Vue2中完成此操作,我们将一个计算字段添加到我们的options对象中。
Vue2
export default { // .. computed: { lowerCaseUsername () { return this.username.toLowerCase() } } }
Vue3的设计 允许开发人员导入他们使用的内容,而在项目中没有使用的不需要导入。本质上,他们不希望开发人员必须包含他们从未使用过的东西,这在Vue2中已经成为一个日益严重的问题。
因此,要在Vue3中使用计算属性,我们首先必须将 computed 导入到组件中。
然后,类似于我们之前创建 reactive 数据的方式,我们可以使一条 reactive 数据成为这样的计算值:
Vue3
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之间的一个重要区别—— 这意味着完全不同的东西 。
在Vue2中,这几乎总是引用组件,而不是特定的属性,虽然这使事情表面上很容易,但它使类型支持成为一种痛苦。
以往,我们都可以轻松访问Props——让我们添加一个简单的示例,例如在mounted的钩子上打印出标题prop:
Vue2
mounted () { console.log('title: ' + this.title) }
但是在Vue3中,我们不再使用它来访问Props、发出事件和获取属性。
相反, setup()
方法采用两个参数:
props context
使用props参数,上面的代码将如下所示。
Vue3
setup (props) { // ... onMounted(() => { console.log('title: ' + props.title) }) // ... }
发送事件(Emitting Events)
类似地,在Vue2中发出事件非常简单,但是Vue3为你提供了对如何访问属性/方法的更多控制。
例如,在我们的例子中,我们想在按下“Submit”按钮时向父组件发出登录事件。
Vue2代码只需要调用 this.$emit
并传入我们的有效参数对象即可。
Vue2
login () { this.$emit('login', { username: this.username, password: this.password }) }
然而,在Vue3中,我们现在知道这不再意味着同样的事情,所以我们必须做得不同。
幸运的是,上下文对象(context)公开了 emit
,这使我们拥有与此相同的东西。
我们要做的就是将 context 添加为 setup()
方法的第二个参数,我们将解构上下文对象,以使我们的代码更简洁。
然后,我们只需要调用emit发送事件即可。然后,像以前一样,emit方法采用两个参数:
- 事件名称
- 与事件一起传递的有效参数对象
Vue3
setup (props, { emit }) { // ... const login = () => { emit('login', { username: state.username, password: state.password }) } // ... }
最终的Vue2与Vue3代码!
如你所见,Vue2和Vue3中的所有概念都是相同的,但是我们访问属性的某些方式已经有所变化。
总的来说,我认为Vue3将帮助开发人员编写更有组织的代码——特别是在大型代码库中。这主要是因为Composition API允许你按特定功能将代码分组在一起,甚至可以将功能提取到自己的文件中,然后根据需要将其导入组件中。
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>
我希望本教程有助于重点介绍Vue代码在Vue3中看起来与众不同的某些方式。如有其他疑问,请留下你的意见!
原文: https://learnvue.co/2020/02/building-the-same-component-in-vue2-vs-vue3/
作者: Matt Maribojoc
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Typescript 入门构建一个 react 组件
- 【译】如何专业的构建Vue组件
- [译] 使用 Recompose 来构建高阶组件
- 怎样才能构建优秀的React组件?
- 如何构建运行良好的Vue组件
- 如何构建一个简单的摄像头组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Spring实战(第4版)
Craig Walls 沃尔斯 / 张卫滨 / 人民邮电出版社 / 2016-4-1 / CNY 89.00
《Spring实战(第4版)》是经典的、畅销的Spring学习和实践指南。 第4版针对Spring 4进行了全面更新。全书分为四部分。第1部分介绍Spring框架的核心知识。第二部分在此基础上介绍了如何使用Spring构建Web应用程序。第三部分告别前端,介绍了如何在应用程序的后端使用Spring。第四部分描述了如何使用Spring与其他的应用和服务进行集成。 《Spring实战(第4......一起来看看 《Spring实战(第4版)》 这本书的介绍吧!