⭐我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。
废话少说，让我们开始吧～ (๑ •̀ㅂ•́) ✧
我们先来对比一下
| Vue2.x | Vue3 |
|---|---|
| beforeCreate | 使用 setup() |
| created | 使用 setup() |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
1. 首先组件上大多数都是相似的 => 我们先创建一个模板 template
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>
在vue2中，可以直接取出data中定义的变量，渲染到页面中而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>
2. 存放数据
export default {
data () {
return {
username: '',
password: ''
}
}
}
而在vue3中，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发，首先要将所用的变量初始化为响应式的变量，从而在页面上渲染所用的数据。
Vue3
import { reactive } from 'vue'
export default {
setup () {
const state = reactive({
username: '',
password: ''
})
return { state }
}
}
3. 下面我们来说一下两者中methods的区别
在Vue2中是将methods分割到独立的属性区域的。我们可以直接在这个属性里面添加方法来处理各种前端逻辑。
Vue2
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
fun1 () {
},
fun2 () {
}
}
}
而在vue3中我们需要先声名一个方法然后在setup()方法中返回(return)
Vue3
export default {
setup () {
const state = reactive({
username: '',
password: ''
})
const login = () => {
// 登陆方法
}
return {
login,
state
}
}
}
4. 生命周期的钩子 mounted
Vue2
export default {
mounted () {
console.log('组件已挂载')
}
}
在 Vue3 生周期钩子不是全局可调用的了，需要另外从vue中引入。和刚刚引入reactive一样，生命周期的挂载钩子叫onMounted。
Vue3
import { onMounted } from 'vue'
export default {
setup () {
onMounted(() => {
console.log('组件已挂载')
})
}
}
5. 计算属性 Computed
在 Vue2 中实现，我们只需要在组件内的选项属性中声明
Vue2
export default {
computed: {
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
}
而在 vue3中，我们先需要在组件内引入computed，再进行下一步使用
vue3
import { reactive, onMounted, computed } from 'vue'
export default {
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
return {
state
}
}
接下来就是我们最常用的组件之间传递数据的props了
6. 父传子 Props
在 Vue2，this代表的是当前组件，不是某一个特定的属性。所以我们可以直接使用this访问prop属性值。
Vue2
export default {
props: {
title: String
}，
mounted() {
console.log('title: ' + this.title)
}
}
但是在 Vue3 中，this无法直接拿到props属性，不过全新的setup()方法可以接收两个参数：
Vue3
setup (props) {
onMounted(() => {
console.log('title: ' + props.title)
})
}
7. 事件 - Emitting Events
在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。
Vue2
login () {
this.$emit('login', {
username: this.username,
password: this.password
})
}
但是在 Vue3中，我们刚刚说过this已经不是和vue2代表着这个组件了，所以我们需要不一样的自定义事件的方式。所以我们就要运用到setup()中的第二个参数emit
Vue3
setup (props, { emit }) {
const login = () => {
emit('login', {
username: state.username,
password: state.password
})
}
}
8. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
Object.defineProperty( Obj, 'name', {
enumerable: true, //可枚举
configurable: true, //可配置
// writable:true, //跟可配置不能同时存在
// value:'name', //可写死直
get: function () {
return def
},
set: function ( val ) {
def = val
}
} )
vue3 中使用了 es6 的 ProxyAPI 对数据代理。
//两个参数，对象，13个配置项
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
},
set:function(){ },
...13个配置项
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37
相比于vue2.x，使用proxy的优势如下
1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
希望这篇文章能让大家体验到一个比较全面的Vue2与Vue3的开发区别。如果大家还有什么问题，可以在评论中提问哦！(๑ •̀ㅂ•́) ✧
