search

super-fool / blog

珍藏经典, 分享思想, 共同进步.加油
3 stars 0 forks source link

Vue2到Vue3 #90

Open super-fool opened 3 years ago

super-fool commented 3 years ago

场景一: 当我们需要加一个具有较为复杂的一个功能时, 需要在data, methods, conputed中都要做相应的添加. 那么一个功能出现了分散状态.

那么在Vue3中, 为了解决逻辑离散分布的问题, 推出了Composition API.

setup

setup是使用Composition API的入口. 并且是在beforeCreate和created之前就执行的.

接收参数:

reactive

  1. reactive只接受一个Object, 无法接受原始类型;
  2. reactive的实现就是使用了Proxy来进行代理的.
  3. 文档中介绍reactive说: 返回的代理是不等于原始对象, 如果reactive传入的参数是一个props对象, 那么会不会影响父组件的值呢? 答案是会!

ref

  1. ref 接受的是 any, 可以接受任何值, 如果想改变ref的值, 也必须用.value来改变.
  2. ref也会跟reactive的第三条一样, 改变props

总结

  1. 前面说的改变props, 是因为setup中的props默认就是响应式的!
  2. reactive和ref返回封装后的对象, 且属性都是read only