他们始终都有高度关注和写作许多有关Vue3的新优点和机能将要来临。但他们没两个具体内容的基本概念在合作开发中常有怎样的发生改变和不那样的新体验。除了许多TX早已早已开始又慌又感到恐惧了 — “又要早已开始学捷伊读法了 (ノToT )ノ ~┻┻”。
因此这儿我采用Vue2和Vue3合作开发两个单纯的表单模块来展现呵呵Vue2和Vue3合作开发模块的差别。看完那片该文后，你将会有两个基本概念Vue2和Vue3合作开发模块时的差别，因此为Vue3的合作开发之路搞好预备。ღ(◔ ◔ღ)ミ
品乐版，让他们早已开始吧～ (๑ •̀ㅂ•́) ✧
建立两个 template
模块而言，多半标识符在Vue2和Vue3都十分相近。Vue3全力支持碎块(Fragments)，就是说在模块能保有数个根结点。
此种新优点能增加许多模块间的div包覆原素。在合作开发vue的这时候，他们会辨认出每两个模块单厢有位div原素包覆着。就会再次出现许多层累赘的div原素。碎块(Fragments)化解了那个难题。对有轻松焦虑症的TX“吗时棒极了”。他们这儿的范例里就不展现了，用单纯的展毛结点的模块。
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>
<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）。
采用以下三步来建立反应性数据:
从vue引入reactive采用reactive()方法来声名他们的数上一波标识符，让大家更容易理解是怎么实现的。
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 暴露出来的属性（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标识符
吗是棒极了，能
总结呵呵，我觉得 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的合作开发差别。如果大家除了甚么难题，能在评论中提问哦！
合作开发愉快！～
