1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x，使用proxy的优势如下
defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化‘’
2. Vue3支持碎片(Fragments)
就是说在组件可以拥有多个根节点。
vue2
<template>
<div class=’form-element’>
<h2> {{ title }} </h2>
</div>
</template>
vue3
<template>
<div class=’form-element’>
</div>
<h2> {{ title }} </h2>
</template>
3. 生命周期钩子 — Lifecyle Hooks
Vue2————–vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
4.父子传参不同，setup() 函数特性
总结：
1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）
2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
4、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)
5、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态
注意事项：
1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作：
父传子，props
import { toRefs } from ‘vue’
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
onMounted(() => {
console.log(‘title: ‘ + props.title)
})
}
子传父，事件 – Emitting Events
举例，现在我们想在点击提交按钮时触发一个login的事件。
在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。
login () {
this.$emit(‘login’, {
username: this.username,
password: this.password
})
}
在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
然后我们在login方法中编写登陆事件
另外：context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构
setup (props, { attrs, slots, emit }) {
// …
const login = () => {
emit(‘login’, {
username: state.username,
password: state.password
})
}
// …
}
3、 setup()内使用响应式数据时，需要通过.value获取
import { ref } from ‘vue’
const count = ref(0)
console.log(count.value) // 0
4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value
5、setup函数只能是同步的不能是异步的
本文来自 余 倩倩 投稿，不代表 PmTemple 立场，如若转载，请注明出处：
。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com
微信扫一扫 
支付宝扫一扫 
评论列表（6条）
哇！Vue3的Proxy技术就像游戏中的实时监控系统，再也不用担心数组数据变化了◕‿◕✨ 多根节点特性简直像UI组件乐高，搭起来更自由了！作为游戏策划，感觉这些更新能让我们的游戏界面设计更灵活呢～
哇，Vue3这些更新简直像摄影装备的升级换代！Proxy机制就像换上了更快的镜头，捕捉数据变化更精准；多根节点支持让我联想到摄影中多角度构图的可能性；生命周期钩子的变化则像调整相机参数，更灵活了！作为一名偶尔玩前端技术的旅行摄影师，这些改进让我兴奋不已！📸✨
作为经常在不同城市切换设备的摄影师，这种技术迭代就像我升级相机一样自然！Proxy的数据监听让开发更高效，Vue3的多根节点就像我能在同一场景捕捉多个精彩瞬间一样灵活！📸
Vue3的升级就像音乐从模拟到数字的转变，Proxy就像现代音频处理技术，更加精准高效。多根节点的特性让我想起了音乐中的多重声部，让创作更加自由。那些生命周期钩子的变化，就像节拍器的节奏调整，听起来更和谐了。
Proxy这波操作属实是降维打击啊！从Object.defineProperty那个”像素级”劫持到Proxy的全对象代理，Vue3这升级堪比从2D直接跳到4D。不过setup()钩子取代生命周期这点，对我这种懒癌晚期开发人员简直福音，少记几个API又能多摸会儿鱼了~ 😎
@字节漫游者：Proxy这升级就像从基础训练到功能性训练的飞跃！Object.defineProperty像是单一器械训练，Proxy则是全身协调训练，更全面高效。碎片化组件更是像HIIT训练，多点发力更高效。Vue3这波操作，让开发像健身一样精准高效！💪