重新渲染组件而不会破坏perf

Question

此问题与Synchronise a props in Vuejs

相关联

作为答案给出的解决方案是完美的。但是在这种情况下，或者子组件有很多数据，因为Vuejs重新渲染组件，性能就会被杀死。

以下是转载的问题： https://codepen.io/anon/pen/MvwRgo?editors=1011

Vue.component('myinput', {
   template: '<div><input v-model="wrapperMyText"><div v-for="item in toto">{{item}}</div></div>',
   props: ['text'],
   data() {
      return {
         toto: new Array(100000)
      }
   },
   computed: {
     wrapperMyText: {
       get() { return this.text;},
       set(v) { this.$emit('update:text', v);}
     }
   }
})

const vm = new Vue({
   el: '#app',
   template: `
      <div> 
         <myinput :text.sync="mytext"></myinput> 
         <p> {{mytext}} </p>
         <button @click="myclick">OK</button>
      </div>`,

   data() {
      return {
         mytext: "Hello World!"
      }
   },

   methods: {
      myclick() {
        this.mytext = 'Foobar'; 
      }
   }
});

如何在不杀死表演的情况下保持相同的行为？