- 响应式原理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
export default { props: { title: String }, data () { return { username: '', password: '' } }}相干vue实战视频解说：进入学习
Vue3 应用以下三步来建设反馈性数据:
- 从vue引入reactive
- 应用reactive()办法来声名咱们的数据为反馈性数据
- 应用setup()办法来返回咱们的反馈性数据，从而咱们的template能够获取这些反馈性数据
import { reactive } from 'vue'export default { 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> <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
<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>- 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
<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>