使用cdn和npm引入的区别_快速体验Vue2和Vue3组件开发的区别

带你体验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>
<inputtype='text'v-model='state.username'placeholder='Username'
    />

<inputtype='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在代码里分割了不同的属性(prope