简单体验Vue2和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） 。
使用以下三步来建立 反应性数据 :
reactive
reactive()
setup()
上一波代码，让大家更容易理解是怎么实现的。
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() 方法可以接收两个参数：
props
context
所以在 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的开发区别。
原文 https://blog.csdn.net/JackieDYH/article/details/116796888
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
