Vue3(五、Reactivity API)

吐槽君 分类:javascript

image.png

1.reactive

  • reactive就是把一个对象用proxy代理处理之后变成了一个响应式的对象,与vue2的observerable是一样的,他们都是深度监听的

  • 在vue2中:是用数据劫持完成的

image.png

  • 在vue3中:用代理完成的

image.png

2.readonly

image.png

  • 普通plain的对象,ractive,ref都可以变成readonly,只能访问不能更改

3.ref

image.png

  • 如果传入的是一个普通的数值,那么它就一个普通ref,类似于react中的ref,ref只有一个属性就是value,初始值为你设置的值,可以再给他重新赋值

image.png

  • 如果传入的是一个对象,那么它会把value用reactive包装成一个响应式对象

image.png

  • setup把ref返回之后,会自动的添加到template的上下文中去,它会自动的把ref.value拿出来,就不需要用.value去使用了

image.png

  • 当一个ref被赋值为一个reactive时,不需要.value,可以直接使用,因为它会自动去完成这件事。

image.png

image.png

  • 如果用一个新的ref去赋值给老的ref,新的会覆盖老的

image.png

  • 如果在把ref放入一个原生的如数组,map等集合中,它是不会自动展开的,需要手动去调用.value获取值。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容