Vue3与vue2对比

最新推荐文章于 2024-08-26 16:55:43 发布

一个人的精彩。

最新推荐文章于 2024-08-26 16:55:43 发布

阅读量459

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43671085/article/details/125161456

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文深入探讨Vue3的响应式机制，重点讲解了如何通过Proxy实现对象和数组的深层响应式，以及ref和reactive的使用。Vue3不再依赖$set，而是利用Proxy的get和set方法实现监听和更新。同时，介绍了Vue3的组合式API如何提升大型项目开发效率，通过示例展示了watch在深度监听属性变化的应用。

摘要由CSDN通过智能技术生成

1
vue3可以支持对对象或者数组深层次的响应式，如a.b.c=1可以修改，a[0]=1可以修改，vue2不可以要用$set（），因为vue3不用object.definepropty而是用了proxy
2
reactive使用可以随便添加或修改对象的属性（使用proxy代理）
3
proxy也是通过get set实现的响应式，get（target，propName）{}；set（target，propname,value）
4
vue3响应式原理就是通过proxy代理，拦截对象中属性的变化，在通过reflect对源对象的属性进行操作。
5
vue3 ref 的watch（sum,(newValue,oldValue)=>{ },{deep:true}）
在这里插入图片描述

6
vue3 reactive 的watch（()=>person.job.salary , (newValue,oldValue)=>{ },{deep:true}）
7
在这里插入图片描述

8
let name = toref(person.‘name’),把person中的某个属性转换成一个ref对象，这时候如果改变name就会直接改变person中的name，响应式！直接ref（）则不能改变person中的name
*9
…torefs(person),表示把person对象摊开，从{}中一个一个拿出来
10
组合式api对于大项目来讲比optionsAPI的优势
在这里插入图片描述