【vue2】data中数据赋值失败找不到、data数据不声明的影响

😉博主：初映CY的前说(前端领域) ,📒本文核心：vue2data作用

前言：当你看到这篇文章相比你已经对vue有了一定的了解，对data的有了一个基本的认识：data是存放我们当前页面数据地方。是的，没一点毛病，具体的来说是存放响应式数据地方，那么什么是响应式数据？我不在data中声明直接赋值数据给data会怎么样？那就开始我们的学习之旅吧！

⭐一、 data介绍

在Vue.js 2中，data 是一个用于定义组件的初始数据的选项。这个选项通常是一个函数，返回一个包含数据属性的对象。每个属性都会成为组件实例的响应式数据，这意味着当这些数据发生变化时，视图会自动更新以反映这些变化。

⭐二、 正确实操

当前我的数据结构如下所示：

<template>
  <div class="hello"></div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      dataContainer: {
        num: 1,
        list: {
          age: 2,
          gender: 7,
        },
      },
    };
  },
  created() {
    this.getNum();
  },
  methods: {
    getNum() {
      setTimeout(() => {
        this.dataContainer.num = 6;
        console.log("this.data.num 已赋值为=>", this.dataContainer.num);
        this.dataContainer.list.age = 20;
        console.log(
          "this.dataContainer.list 已赋值为=>",
          this.dataContainer.list.age
        );
      }, 2000);
      console.log("定时器已设置，将在2秒后触发");
    },
  },
};
</script>

浏览器效果显示数据如下：

这个定时器相当我们模拟接口返回过来的数据，我们所赋值的dataContainer中name与list均在data中被我们所赋值过，因此是能够被正确的修改，下面我们来看看当我们不在data中声明（不是响应式）的时候，会发生什么

⭐三、 错误实操

此刻我先注释我们list这个数据，再次运行查看：

好家伙，页面直接报错了，找不到age

原理：我们data中数据是响应式的，所接受的数据必须在data中声明，当我们数据超过2层的时候我们的vue响应式就无法监听找到所对应的对象数据了。