在Vue2与Vue3中构建相同的组件

更新日期: 2020-04-16阅读: 1408标签: 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


链接: https://www.fly63.com/article/detial/8689

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

vue3对比vue2使用,代码解释最直观

对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持片段,这意味着组件可以有多个根节点。这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是,在本例中,表单组件的两个版本都将只保留一个根节点

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!