Vue响应式 涉及页面刷新

最近在开发APP，拿到代码后按照之前的代码写了组件，获取到了想要的带出数据。但是选择A后却没办法带出B，后台打印数据一切正常都已经获取到了。

这边涉及了一个字段初始化定义的问题。之前一直没有注意。

Vue的响应式是指当数据发生变化时，Vue能够自动检测到变化，并更新相关的视图。它是Vue的核心特性之一，使得开发者能够更方便地处理数据的变化和视图的更新，提升了开发效率。

在Vue中，要定义一个字段，使其具有响应式特性，有几种常用的方式：

1、在data选项中定义字段：在Vue组件的data选项中定义字段即可让该字段具备响应式特性，例如：

data() {
  return {
    name: "Vue",
  };
},

此时，name字段具备响应式特性，当name发生变化时，相关的视图会自动更新。

2、使用Vue.set或者Vue.$set方法：如果需要在运行时动态地添加字段，可以使用Vue.set或者Vue.$set方法。例如：

Vue.set(this.form, 'new_name', '');

3、在Vue组件中使用计算属性：计算属性是一种方便定义的响应式字段的方式。计算属性会侦听其所依赖的属性，只有当依赖属性发生变化时，才会重新计算该属性的值。例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  },
},

在上述例子中，fullName字段会依赖firstName和lastName字段，当firstName或lastName发生变化时，fullName会自动重新计算，并更新相关的