Vue3-day02

ref函数

一般用于将基本类型数据处理成响应式数据

作用：定义一个基本类型的响应式的数据，只有数据成为响应式数据，这样当数据变化时，才能被监测到

使用： 使用时需要从 vue 中引入

<script>

    import { ref } from 'vue'; // 引入响应式函数ref

</script>

为什么setup函数默认为非响应式呢？

如果你的数据只是渲染式后续不具有响应式那种情况下，vue3之前它默认放到data里，它是具有响应式，浪费了一些监听器的性能。

        把这个设置响应式的一个操作，为了交给开发者去做，使它的性能更高。

        你的数据是否需要响应式，开发者肯定知道，于是逐渐将这个决定权，移交给开发者

ref 数据响应

 为什么能改，因为它是存了个引用，对象，对象的属性可以改

        ref 函数实现响应式的原理还是利用了 vue2的objectdelineProperty{}给数据设置get set监听函数 

        接收的数据类型可以是基本类型实现响应式原理为object.defineProperty{},也可以是对象类型【当为对象时】实现这个的是响应式原理就是Proxy，而不是object.definePropety{}

        如果要实现数值和对象的监听，那你必须要实现递归，但是Vue的作者觉得这样性能太低

  

ref 升级

传统有割裂感，现代更舒服

 传统和现代

 

 这样值也可以改变，是因为让它变成了一个响应式对象了。

 以上是对一个值进行响应，那么设置一个对象呢？

 看到这样写确实没有割裂感，但是写多了确实也烦 

reactive 函数

reactive 作用于对象和属性上，它不能去设置字符串、数字、boolean值的响应式。

如果你针对的是一个数组对象的话，用 reactive 就可以

 所以老老实实的用 ref 吧

 

 修改值，最好的用法 reactive 和 ref

 

• Vue3中使用proxy实现的数据响应去掉了 Vue2中不能检测到对象添加属性和通过下标修改数组而无法检测的情况

Reactive 与 Ref 对比

对比内容	ref	reactive
数据定义角度	基本数据类型	对象或数组类型数据
原理角度	使用 Object.defineProperty() 的 get 和 set	使用 Proxy 实现数据响应式，通过 Reflect 操作源对象数据
使用角度	数据操作需要使用 .value	数据操作不需要 .value