您现在的位置是：首页 >学无止境 >丁鹿学堂：2023前端培训学习，vue3中data详解网站首页学无止境

在vue3中，data返回的对象会被vue3代理，所以data中的数据都是响应式的。

需要注意的是，数据要在data函数中作为对象返回才可以。

为什么data是一个函数返回对象？

这样可以保证每个组件中，每一次组件创建都是一个新对象。

这样可以让每个组件之间的数据是相互独立的，修改某个组件中的数据，不会影响其他组件。

data中如果有对象，对象的数据是否被代理？

是的。vue中不仅仅是data的第一层属性被代理，如果data 中都有嵌套的对象，嵌套对象的属性也会被代理。

vue在构建响应式对象的时候，会同时将对象中的属性也做成响应式的。

shallowReactive创建浅层次的响应式对象

如果我们不想要深层次去做响应式，vue也提供了方法，引入vue中的shallowReactive方法可以实现

<script>
import { shallowReactive } from 'vue';
  export default{
    data(){

      return shallowReactive({
        name:'丁鹿学堂',
        msg:{
          add:'12313213',
          tel:'1231231231'
        }
      })

    }
  }
</script>

注意：

1此时，第一层的name，msg如果直接修改，会触发vue的响应式，但是如果修改msg.xxx的属性，不会触发vue的 响应式。

2 一般情况下不会使用此方法。使用的场景主要是我们的数据嵌套太深了，会影响性能，此时可以使用此方法。

动态添加响应式数据

在vue中，如果一开始在data中没有定义某个数据，也可以通过动态的方法添加响应式数据，比如在一些生命周期函数，或者事件调用的时候添加。

添加的语法为：

$data是vue中的固定写法。但是不建议使用，就算暂时用不到，也建议先在data中定义，可以赋值为null。

this.$data.xx =value