qq_40792800的博客

可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。

使用 defineProps() 来接收父组件传递数据，defineProps() 函数接收一个字符串形式的数组，类似['a','b','c']，数组中每一项就是父组件传递的数据。Vue3 中的 defineProps() 函数返回一个 Proxy 对象，该对象内部包含的是 defineProps() 函数 中接收的 props 数据，可以针对于 props 中的数据进行某些代码逻辑判断。上面说的是最基础的 props 数据传递，在Vue3 中更好的支持了ts，以此来限制类型，提高代码质量。

但是我们发现，当过快输入时，值出现了诡异的变动，会突然卡一下，这是因为，每次改变数据时，都会开启一个定时器，但是定时器却并没有清除，这就导致累计了多个定时器才会出现这种情况。在 ref() 中，在get 中收集依赖，在 set 中分发依赖，按这个模式，我们在 customRef() 中的 get 和 set 中也应该收集或分发。这是因为数据只是发生了变更，但是并没有实现依赖追踪和触发更新，这个时候，我们在看看 ref() 的源码。到了这里，其实我们就完成了与第一步同样的效果：不延迟，直接同步展示。

那么问题就来了，我的 ref() 函数 ，在定义对象类型的响应式数据时，其底层也是通过 reactive() 函数来实现响应式转化的。用于标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。不会自动递归处理这些嵌套的对象，也就是说它只会处理调用它时直接传入的那一层对象，而不会处理更深层次的嵌套对象。只能作用于传入的那个对象本身，并将该对象还原为其未代理的原始对象。：标记某个对象为“原始对象”（非响应式对象），从而确保该对象不会被 Vue 的响应式系统代理。

的只读响应式对象，所有嵌套的属性都会变成只读的，且会被递归地转换为只读响应式对象。这意味着你不能直接修改这个对象或它的任何嵌套属性的值，如果尝试修改会在开发环境下抛出警告。的只读响应对象，用于将一个对象的顶层属性设为只读，而不会递归地处理嵌套属性。这两者的主要区别在于它们的“深度”处理方式。是只读的，不能被重新赋值，但是嵌套属性。创建的深层次只读对象。创建的浅层次只读对象。的任何属性，包括嵌套属性。仍然是可变的，可以被修改。嵌套的属性仍然是可变的。在 Vue 3 中，

首先 ref 是可以接收基础类型数据和对象类型数据的，shallowRef 也能接收同样类型的数据，但是 shallowRef 只会对基础类型数据进行转化，对于复杂类型则不会被转化为响应式。person 还是一个ref 对象，但是其中的 value 已经不是Proxy代理对象了，而是一个普通对象，也就是说 shallowRef 无法将对象转化为响应式数据。：当你需要将 Vue 的响应式系统与某些外部库的对象（比如大型数据结构或库自带的对象）集成，而这些对象不需要深层次的响应式支持时，

这是因为在初始化时，确实是从 person 对象中取值，但是在取值过程中其实和上面的例子一样也只是拿到了一个基础类型的值，通过 ref 转化后，也只是将这个值转化为了响应式，而源对象 person 其实只在初始化时提供了一下值，后续操作毫无关联。这是因为如果单独返回的是具体数据的话，其实是访问到了响应式对象 person 中的某个具体属性值，相当于返回的是一个具体的字符串，而一个字符串是不具备响应式的。打印 newPerson ，我们发现确实是一个普通对象，但是对象内部的每个属性，都是单独的ref对象。

1、配置式中存在。

我们通过 ref 函数定义了一个基础数据类型的响应式 ，然后在 watchEffect 函数中访问该响应式数据，最后我们惊奇的发现，除了初始化时监听的一次之外，当我在点击按钮之后，该 watchEffect 还会触发一次。，但是在使用过程中我们可以感觉的到并不是很方便，既要指定需要监听的属性，又要指明监听的回调，而且监听对象存在多种不同类型：例如变量，数组，函数，数组中包含函数等等，所以 Vue3 提供了一个新的 API --从控制台打印的参数可以发现，除了第一个参数存在，其他的都是undefined。

Vue3 中的 watch 是一个函数，接收三个参数，第一个参数是需要被监听的数据( 可以是单个数据，也可以是数组格式的多个数据 )，第二个参数是回调函数，第三个参数则是监听配置项( 深度监听、初始化监听 )。该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。

但是这么写其实存在一个优化点，因为 Vue3 现在对于对象的响应式时通过Proxy代理实现的，是针对于对象的，现在可以直接删除或添加属性的同时还能实现响应式，而不用像Vue2一样还需要依赖 set、delete 等api。：允许开发者定义基于响应式数据的动态值。在Vue2 的例子中，我们改变了计算属性，同时响应式数据夜同步发生改变，我们现在在Vue3的语法中同样可以实现，且方法大致上和 Vue2 一致。上面说的是Vue2 和 Vue3 混用，现在我们来看看真正的Vue3的计算属性时怎么使用的。

因为Vue3重新改写了底层响应式原理，那我们大胆猜测一下，Vue3 应该修复了 Vue2.x 版本的问题，也就是说 Vue3 能够直接监听到对于对象的新增属性或删除属性，同时还能直接通过数组下标来操作数组，或通过 length 属性直接改变数组长度，而不用依赖于 $set 方法、$delete 方法或 splice 方法。上面说到了 在 ref函数中如果接收了一个对象，且需要深层响应的话，就会调用 reactive 函数来进行响应式转化，那我们现在来看看 reactive 函数转化响应式数据的原理。

但是当我们在模板中通过插值语法来使用xxx变量时，Vue3 会自动解包，找到 xxx.value ,而我们在模版上只需要按照正常插值语法书写即可。，那么我们在操作数组的时候，又需要加上 value了，这里就和 上面的 reactive 函数 接收一个 通过ref转化标准对象形式的结果形成了对比。，因为返回的是 Proxy 代理对象，所以不需要解包这一操作，就和普通对象一样操作即可。，那我们在操作数组的时候，也是像操作普通数组一样，通过数组下标进行操作，不用解包。在模板中，只有顶级属性才会被解包，

我们可以看到，虽然页面上展示了正确数据，但是在控制台上Vue已经报了警告，并不建议我们这样做，此时我们点击按钮改变数据，发现数据已经改变了，但是页面并没有更新，这表示当前属性a，并不是一个响应式数据，这也表示了为什么Vue3 不建议使用reactive 来转化基础数据。此时我们注意到，修改数据时，我们并没有像 ref() 函数转化响应式对象时，通过 xxx.value 来修改属性值，而是直接通过 xxx.xxx 进行修改的。作用：定义一个 对象类型的响应式数据( 基本类型还请使用 ref()函数转化 )

那么我们可以推断出，当我们在改变unseInfo内部 name 属性的时候，我们也应该通过 name.value 去修改，也就是说当我们需要修改对象内部属性时，我们需要这样做：先通过 userInfo.value 拿到转化为响应式的 userInfo 对象，然后修改name时，也需要拿到 name 的value去修改。同理，在模板中使用数据的时候，我们好像也应该通过 插值语法的形式 {{ name.value }} 去使用，但是在你真这么做之后，你会发现，页面渲染其实错误了。

与 Vue2 不一样的是，setup 中包含了 data 数据，methods方法，computed计算属性，watch监听器等等一系列的属性，也就是说，在 Vue3 中，我们不会显式的把这些属性配置到 setup 中，而是直接将属性内部的数据或方法直接暴露在 setup 中。3、setup 一般不用 async，因为 setup 需要同步的返回一个对象，以此来保证 模板中数据或方法正常绑定，如果用了 async 那么返回的数据对象 会被 Promise 包裹，模板中无法看到对象中的属性，无法绑定。