Javascript VueJs只需一次更改即可渲染所有元素

在下面的示例网格中，我将一些新值推送到绑定列表中

按网格中的任意位置可将新值推送到网格中

正如您在小提琴中看到的，更新后的单元格将有一个

绿色

颜色，持续500毫秒，所有重新渲染的元素将有

黄色

颜色

问题是我们应该如何配置

Vue

组件，以便它只重新呈现更改的元素，而不是所有元素

如果您查看fiddle控制台输出，您将看到类似（1300126001，…）的数字，这等于所有单元格的数量（1000行x 13列）

.yellow{
背景颜色：黄色；
}
.推{
背景颜色：浅绿色
}

var globalCount=0；
Vue渲染性能
{{key}}
{{renderMe（entry[key]，'a'+i+''u'+j）}
常量数据=新数据（1000）；
var renderdcount=0；
var startTime=performance.now（）；
Vue.组件（'demo-grid'{
道具：{
数据：数组，
列：数组，
renderCount:对象，
},
模板：“#网格模板”，
方法：{
renderMe（el，id）{
const elm=document.getElementById（id）；
如果（榆树）{
elm.className+=“黄色”；
}
如果（！renderCount）{
RenderCount=0
}否则{
renderdCount++；
}
返回el；
},
pushData（）{
调试器
var push=function（）{
设cols=[“Col1”、“Col2”、“Col3”、“Col4”、“Col5”、“Col6”、“Col7”、“Col8”、“Col9”、“Col10”、“Col11”、“Col12”、“Col13”]；
var t0=performance.now（）；
for（设i=0；i<1；i++）{
设newVal=Math.random（）*10000，
row=Math.round（Math.random（）*1000），
cellIndex=Math.floor（Math.random（）*cols.length）；
cell=cols[cellIndex]；
if（数据[行]）
数据[行][单元格]=newVal；
var el=document.querySelector（'tbody tr:nth child（'+row+'）td:nth child（'+
细胞指数+
')');
如果（el）{
el.className='push'；
el.scrollIntoView（）；
var t=函数（）{
如果（el）{
el.className=''；
}
清除超时（t）；
};
设置超时（t，500）；
}
log（'推送到单元格['+row+'，'+cellIndex+']：'+newVal）；
log（'Rendered Count:'+renderedCount）
renderdCount++；
};
var t1=performance.now（）；
console.log（t1-t0）
};
推（）；
}
}
});
//引导演示
var demo=新的Vue({
el:'演示'，
数据：{
searchQuery:“”，
网格列：[“Col1”、“Col2”、“Col3”、“Col4”、“Col5”、“Col6”、“Col7”、“Col8”、“Col9”、“Col10”、“Col11”、“Col12”、“Col13”]，
gridData：数据
}
})
Vue.config.devtools=true；
函数newData（计数）{
常量数据=[]；
for（设i=0；i

当您不想重新渲染整个信息列表时，典型的处理方法是将需要重新渲染的内容推送到组件中。下面是代码的更新版本，它将行推送到组件中，并呈现您以前所做工作的一小部分

Vue.component("demo-row", {
  props:["entry", "columns", "rowIndex"],
    template:`
        <tr>
            <td v-for="(key, j) in columns" :id="'a'+rowIndex +'_'+j">
                {{renderMe(entry[key], 'a'+rowIndex +'_'+j)}}
            </td>
        </tr>  
  `,
  methods:{
    renderMe(el, id) {

      const elm = document.getElementById(id);
      if (elm) {
        elm.className += " yellow";
      }

      if (!renderedCount) {
        renderedCount = 0
      } else {
        renderedCount++;
      }

      return el;
    },
    }
})

Vue.component('demo-grid', {
  props: {
    items: Array,
    columns: Array
  },
  template: '#grid-template',
  methods: {
    pushData() {
      this.$parent.pushData(this.$parent.gridItems, this.$parent.gridColumns);
    }
  }
});

Vue.component（“演示行”{
道具：[“条目”、“列”、“行索引”]，
模板：`
{{renderMe（entry[key]，'a'+rowIndex+'''+j）}
`,
方法：{
renderMe（el，id）{
const elm=document.getElementById（id）；
如果（榆树）{
elm.className+=“黄色”；
}
如果（！renderCount）{
RenderCount=0
}否则{
renderdCount++；
}
返回el；
},
}
})
Vue.组件（'demo-grid'{
道具：{
项目：阵列，
列：数组
},
模板：“#网格模板”，
方法：{
pushData（）{
this.$parent.pushData（this.$parent.gridItems，this.$parent.gridColumns）；
}
}
});

---

请注意，我没有更改您正在执行的任何其他操作，这些操作可能在Vue中更为惯用，我只是想证明不需要重新渲染所有内容。

当您不想重新渲染整个信息列表时，处理它的典型方法是将需要重新渲染的内容推送到组件中。下面是代码的更新版本，它将行推送到组件中，并呈现您以前所做工作的一小部分

Vue.component("demo-row", {
  props:["entry", "columns", "rowIndex"],
    template:`
        <tr>
            <td v-for="(key, j) in columns" :id="'a'+rowIndex +'_'+j">
                {{renderMe(entry[key], 'a'+rowIndex +'_'+j)}}
            </td>
        </tr>  
  `,
  methods:{
    renderMe(el, id) {

      const elm = document.getElementById(id);
      if (elm) {
        elm.className += " yellow";
      }

      if (!renderedCount) {
        renderedCount = 0
      } else {
        renderedCount++;
      }

      return el;
    },
    }
})

Vue.component('demo-grid', {
  props: {
    items: Array,
    columns: Array
  },
  template: '#grid-template',
  methods: {
    pushData() {
      this.$parent.pushData(this.$parent.gridItems, this.$parent.gridColumns);
    }
  }
});

Vue.component（“演示行”{
道具：[“条目”、“列”、“行索引”]，
模板：`
{{renderMe（entry[key]，'a'+rowIndex+'''+j）}
`,
方法：{
renderMe（el，id）{
const elm=document.getElementById（id）；
如果（榆树）{
elm.className+=“黄色”；
}
如果（！renderCount）{
RenderCount=0
}否则{
renderdCount++；
}
返回el；
},
}
})
Vue.组件（'demo-grid'{
道具：{
项目：阵列，
列：数组
},
模板：“#网格模板”，
方法：{
pushData（）{
this.$parent.pushData（this.$parent.gridItems，this.$parent.gridColumns）；
}
}
});

请注意，我没有改变您正在做的任何其他事情，这些事情在Vue中可能会更为惯用，我只是想证明，没有必要对所有内容进行重新设置