v-model无法动态渲染

1、问题一：

通过外部组件传入参数，可以正常获取参数内容，但是v-model无法动态渲染

1
2
3
4
5
6
<el-input v-model="form.username" :disabled="isUpdate" @focus="openSelectUser" placeholder="请输入申请人"/>

AddItems(v) {
      console.log(v);
      this.form.username= v.nickName;
}

上面的代码中，openSelectUser()通过外部组件传入值，AddItems(v)可以正常接收值内容，但是无法渲染。

解决方案：

如果 v-model 在修改数据后无法动态渲染，可能是因为 Vue 的响应式系统没有正确地检测到数据的变化。这种情况通常发生在直接更改数组索引或对象属性时。

可以尝试使用 Vue.set 或 this.$set 方法来确保 Vue 能够正确地追踪数据的变化。

将的 AddItems 方法中的代码做如下修改：

1
2
3
4
AddItems(v) {
    console.log(v);
    this.$set(this.form, 'username', v.nickName);
}

通过上述修改，Vue 将能够正确地检测到数据的变化并更新视图。

$nextTick() 执行回调

Vue.js中的$nextTick()方法是一个非常实用的工具，它用于在DOM更新之后执行回调函数。这个方法的核心功能在于处理Vue.js异步更新队列机制带来的问题。

定义与原理：

  • $nextTick() 方法会把传入的回调函数推迟到下次DOM更新循环结束后调用。
  • Vue.js采用了异步更新队列的方式处理数据变化引发的视图更新。当数据发生变化时，Vue不会立即进行DOM更新，而是将所有需要更新的数据观察器推入一个队列中，在同一个事件循环结束前，如果还有其他数据变化，它们会被合并成一次更新操作。等到下一个事件循环开始时，Vue才会清空队列并批量更新相关的DOM元素。
  • 这样做的好处是可以避免不必要的DOM操作，提高性能，并且确保所有的数据变化完成后一次性渲染最新的视图。

使用场景：

  1. 当你在组件的生命周期钩子如 created() 或者响应式数据改变后，需要访问或操作基于新数据生成的DOM元素时，直接操作可能获取的是旧的DOM状态，因为此时视图还未完成更新。在这种情况下，应将相关操作放在$nextTick()的回调函数里执行，以确保在DOM更新后进行操作。

例如：

1
2
3
4
5
6
this.someData = newData;
this.$nextTick(() => {
  // 在这里可以确保 DOM 已经更新
  const element = this.$refs.myElement;
  // 对 element 进行操作...
});
  1. 在动态添加或者删除DOM元素、计算布局等依赖于DOM更新后的场景下，也需要使用$nextTick()来确保代码在正确的时机运行。
  2. 在修改某些属性（比如v-if变为true）导致DOM插入或者删除的情况下，需要在DOM变动后做进一步处理时，同样适用$nextTick()。

总的来说，Vue.js的$nextTick()方法是解决Vue内部异步更新机制所带来的同步操作和实际DOM更新之间时间差的有效手段。