为什么Vuejs在输入失去焦点之前不会更新模型

Question

我的应用程序使用以下类型的数据:有些公司每个都有一个数据点列表.每个数据点都有一个类型,每个公司只能有一个每种类型的数据点.

+Company_1  
|  
|--Datapoint_1 : type_1  
|--Datapoint_2 : type_2  
|--Datapoint_3 : type_3  
|  
|  
+Company_2  
|  
|--Datapoint_4 : type_3  
|--Datapoint_5 : type_2  
|  
|+Company_3  
|  
|--Datapoint_6 : type_2  
...  
...  

总共有大约1000个数据点和20个公司.该应用程序根据这些数据点计算分析,目标是允许用户操作这些数据点,以便查看给定方案中的结果.在任何给定时刻,都有一个"selected_company"和"selected_type",并且基于这两个选择,应该选择正确的数据点进行操作.

我意识到,如果"公司"变量和"数据点"属性是数组,则必须对所有项进行搜索才能找到正确的项.因此,我选择将它们作为对象:

companies = {
  '1' : {
    name : 'Company_1',
    datapoints : {
      'type_1' : { ... },
      'type_2' : { ... },
      'type_3' : { ... }
    }
  },
  '2' : {...},
  '3' : {...},
  .
  .
  .
}

问题:

我有一个'datapoint'组件,我将数据点作为道具传递:

<datum-comp :datum="companies[selected_company].datapoints[selected_type]"></datum-comp>

在这个组件中,我有一个输入,用于操作数据点的score属性:

<input v-model.number="datum.score" class="form-control">

但是,这种输入表现出非常奇怪的行为.当我输入输入时,模型不会立即更新.相反,Vue似乎在等待我在更新模型之前从输入(onBlur)更改焦点.

直到onblur才更新

更奇怪的是,当我将datapoints属性设为数组时

companies = {
      '1' : {
        name : 'Company_1',
        datapoints : [
          { ... },
          { ... },
          { ... }
        ]
      },

使用一种方法来检索数据点(而不是直接传入它),Vue以正确的方式运行!

<datum-comp :datum="getDatum(selected_company, selected_type)"></datum-comp>

(在js文件中:)

var app = new Vue({
    el : '#app',
    data:{...},
    methods:{
      getDatum: function(selected_company, selected_type){
          var datum = this.companies[selected_company].datapoints.find(function(elem){
            return elem.type == selected_type
          })
          return datun
        }
    }
  })

正确更新

我需要帮助理解为什么Vue在这种情况下表现得像这样,因为它对应用程序性能有一些严重的影响.提前致谢.

Answer 1

v-model只是语法糖 ...
:value="modelValue" @input="modelValue = $event.target.value"
正如你所说,它更新了模型oninput,这在大多数情况下运作良好.

如果你想要别的东西,这很容易做到.只需将更新端更改为onkeypress,所以......

<input  class="form-control
    :value="datum.score" 
    @keypress="datum.score = $event.target.value""
    @input="datum.score = $event.target.value""
>

将数据点从数组更改为对象时,您注意到的更改可能是由于Vue 无法使用数组语法(方括号)检测数组中所做的更改.您需要使用数组方法(push,pop,splice等)或Vue.set().就像你说的,这不是直观的,但它是Vue中极少数的陷阱之一.这是由于javascript的限制,它在文档中有很好的介绍.