深层次下v-model与函数的自动调用

0. 缘起

之前做项目的时候遇到一个很阴间的问题，如果多层级了，el-input就无法根据绑定的v-model更新值，这个问题倒好解决，给他的输入方法加个强制更新。

this.$forceUpdate();

<el-input
	v-else
    @input="onInput()"
    v-model="form[`${item.code}TemplateAlias`][index]"
    placeholder="请输入内容"
></el-input>
    
    // methods
    onInput() {
      this.$forceUpdate();
    },

恩，输入现在可以同步了，但！我发现这个输入框绑定的v-model并没有同步，或者说它值变化了，但依据该值的v-if/v-for没有变化。搜索一番，说也可以用强制更新来解决。我试了并不行。

1. 原因

这玩意是用v-for做的，层层嵌套，太多层级了，导致模板渲染不过来。

          <div
            class="nameBox"
            v-for="(temp, index) in form[`${item.code}TemplateIds`]"
            :key="index"
          >
            <span>
              <!-- 公式Id：{{ temp }} -->
              <span class="exName">公式名称：</span
              >{{ EXNameList[`${item.code}NameList`][index] }}</span
            >
            <div class="aliasBox">
              <span class="alias exName">公式别名：</span>

              <div class="editBox">
                <span v-if="getValue(item, index)">{{
                  form[`${item.code}TemplateAlias`][index]
                }}</span>
                <el-input
                  v-else
                  @input="onInput()"
                  v-model="form[`${item.code}TemplateAlias`][index]"
                  placeholder="请输入内容"
                ></el-input>
                <el-button @click="showAlias(`${item.code}`, index)"
                  ><span v-if="getValue(item, index)">修改</span>
                  <span v-else>保存</span></el-button
                >
              </div>
            </div>
          </div>

2. 解决方法

实际上就在v-if/v-else的判断条件中，用的是方法！

  methods: {
    getValue(item, index) {
      return this[`${item.code}ShowAlias`][index];
    }
  }

3. 相关内容

如果用函数就可以在每次实例化的时候都通过运行函数返回一个全新的 data，这样我们就不会造成 data 之间的共享和混淆了。这样在深层次情况下，也可以及时更新模板内容。

Vue 组件 data 为什么必须是个函数，而 Vue 的根实例却没有此限制？ - 陈好人的回答 - 知乎 https://www.zhihu.com/question/384454093/answer/1122159865

——————下方为引用内容

当组件被创建后，会拿到data参数 。在源码中 vue会判断传入的data是否是一个函数，如果是一个函数就会执行这个函数，此时会返回一个对象，然后赋值给data。

那我们都知道，对象存储在栈中的是引用地址。假如说你直接向组件中传入一个对象，当我们进行数据修改的时候，就会修改存放在地址（指针）上的值，也就导致了所有组件都发生了改变。

而如果data是一个函数，在传入组件实例之后会执行此函数，并返回一个新的对象。也就相当于在栈中重新分配了引用地址。组件之间就不会共享data了。

[ data 为什么必须是个函数，而 Vue 的根实例却没有此限制？](Vue 组件 data 为什么必须是个函数，而 Vue 的根实例却没有此限制？ - 自由的囚徒的回答 - 知乎 https://www.zhihu.com/question/384454093/answer/1510208514)