![[泪奔]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_85.43ad2fc.png)
![[流泪]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
NikolaJokic
摸鱼小助手
|
弟弟公司
获得徽章 14
赞了这篇文章
#每天一个知识点# Vue3.0之响应式API ref和reactive的使用区别：
1.ref能够接受基本类型的数据。reactive不能。（const reactive1 = reactive(0); //NOT OK;const ref1 = ref(0);//OK）
2.数据访问方式不同。无论是对象还是基本类型ref需要通过 .value的方式来访问或者模版语法{{ref1}},
3.监听方式的区别,ref传递对象时,需要使用{ deep: true }才能监听到,而reactive 因为本质是对象，所以在 watch 的时候本能的会想添加 deep 属性，但是 vue 对其做了优化，使用 watch 监听 reactive 的时候可以不添加 deep 属性，也能够对其做深度监听。
1.ref能够接受基本类型的数据。reactive不能。（const reactive1 = reactive(0); //NOT OK;const ref1 = ref(0);//OK）
2.数据访问方式不同。无论是对象还是基本类型ref需要通过 .value的方式来访问或者模版语法{{ref1}},
3.监听方式的区别,ref传递对象时,需要使用{ deep: true }才能监听到,而reactive 因为本质是对象，所以在 watch 的时候本能的会想添加 deep 属性，但是 vue 对其做了优化，使用 watch 监听 reactive 的时候可以不添加 deep 属性，也能够对其做深度监听。
展开
评论
3
#每天一个知识点# vue3新特性，新增了生命周期钩子，我们可以通过在生命周期函数前加on来访问组件的生命周期，我们可以使用以下生命周期钩子：
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered
调用时只需要在setup中挂载生命周期钩子，当执行到对应的生命周期时，就调用对应的钩子函数。
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered
调用时只需要在setup中挂载生命周期钩子，当执行到对应的生命周期时，就调用对应的钩子函数。
展开
评论
1
赞了这篇文章
#每天一个知识点# vue3新特性，vue3中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因此在这个函数中是不能通过this来获取实例的；同时为了命名的统一，将beforeDestroy改名为beforeUnmount，destroyed改名为unmounted。
评论
点赞
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
![[无辜呆]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_96.4fb9d71.png)
赞了这篇沸点
赞了这篇沸点