Vue3在响应式原理上由defineProperty改为proxy，提高了性能。Vue3的diff算法优化和渲染算法改进使其速度提升。Vue3引入了CompositionAPI，替代了OptionsAPI，使代码更简洁。组件定义方式改变，不再通过对象，而是通过方法组合。生命周期钩子和计算属性的处理方式也有所不同，事件触发机制也有所调整。
响应式原理api的改变Vue2响应式原理采用的是defineProperty，而vue3选用的是proxy。这两者前者是修改对象属性的权限标签，后者是代理整个对象。性能上proxy会更加优秀。
diff算法，渲染算法的改变Vue3优化diff算法。不再像vue2那样比对所有dom，而采用了block tree的做法。此外重新渲染的算法里也做了改进，利用了闭包来进行缓存。这使得vue3的速度比vue2快了6倍。
建立数据 data这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）旧的选项型API在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。
区别于vue2组件写法，我们在定义一个vue2的组件的时候，更多是通过一个对象来表达组件，像这样：
而在vue3中，我们会通过方法的组合调用来完成组件的定义，像这样：
、
vue2
exportdefault {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
}
}
复制代码Vue3 使用以下三步来建立反应性数据:
从vue引入reactive
使用reactive()方法来声名我们的数据为反应性数据
使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据
import { reactive } from'vue'exportdefault {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
return { state }
}
}
复制代码创建一个 template组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。
在Vue3的唯一真正的不同在于数据获取。Vue3中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中。— 所以我们需要访问这个反应状态来获取数据值。vue2
<template><divclass='form-element'><h2> {{ title }} </h2><inputtype='text'v-model='username'placeholder='Username' /><inputtype='password'v-model='password'placeholder='Password' /><button @click='login'>
Submit
</button><p>
Values: {{ username + ' ' + password }}
</p></div></template>复制代码vue3
<template><divclass='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>复制代码Vue2 对比 Vue3的 methods 编写Vue2 的选项型API是把methods分割到独立的属性区域的。我们可以直接在这个属性里面添加方法来处理各种前端逻辑。
exportdefault {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// 登陆方法
}
}
}
复制代码Vue3 的合成型API里面的setup()方法也是可以用来操控methods的。创建声名方法其实和声名数据状态是一样的。— 我们需要先声名一个方法然后在setup()方法中返回(return)， 这样我们的组件内就可以调用这个方法了。
exportdefault {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
constlogin = () => {
// 登陆方法
}
return {
login,
state
}
}
}
复制代码生命周期钩子 — Lifecyle Hooks在 Vue2，我们可以直接在组件属性中调用Vue的生命周期的钩子。以下使用一个组件已挂载（mounted）生命周期触发钩子。
exportdefault {
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'exportdefault {
props: {
title: String
},
setup () {
// ..onMounted(() => {
console.log('组件已挂载')
})
// ...
}
}
复制代码计算属性 - Computed Properties我们一起试试添加一个计算属性来转换username成小写字母。
在 Vue2 中实现，我们只需要在组件内的选项属性中添加即可
exportdefault {
// ..
computed: {
lowerCaseUsername () {
returnthis.username.toLowerCase()
}
}
}
复制代码Vue3 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。
所以在 Vue3 使用计算属性，我们先需要在组件内引入computed。
使用方式就和反应性数据（reactive data）一样，在state中加入一个计算属性:
import { reactive, onMounted, computed } from'vue'exportdefault {
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 }) {
// ...constlogin = () => {
emit('login', {
username: state.username,
password: state.password
})
}
// ...
}
复制代码vue2
<template><divclass='form-element'><h2> {{ title }} </h2><inputtype='text'v-model='username'placeholder='Username' /><inputtype='password'v-model='password'placeholder='Password' /><button @click='login'>
Submit
</button><p>
Values: {{ username + ' ' + password }}
</p></div></template><script>exportdefault {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
mounted () {
console.log('title: ' + this.title)
},
computed: {
lowerCaseUsername () {
returnthis.username.toLowerCase()
}
},
methods: {
login () {
this.$emit('login', {
username: this.username,
password: this.password
})
}
}
}
</script>复制代码vue3
<template><divclass='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><script>import { reactive, onMounted, computed } from'vue'exportdefault {
props: {
title: String
},
setup (props, { emit }) {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
onMounted(() => {
console.log('title: ' + props.title)
})
constlogin = () => {
emit('login', {
username: state.username,
password: state.password
})
}
return {
login,
state
}
}
}
</script>作者：三钻
链接：https://zhuanlan.zhihu.com/p/139590941
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
