Vue模板中一个很隐蔽的坑

        我们都知道，Vue组件的模板会自动编译成组件的render函数，并且会自动添加为watch。这样一旦模板中有变量值改变，组件就会自动调用render函数来重新生成dom树。

        Vue出于优化考虑，当模板中包含某个子组件时，若render函数重新创建的子组件和原子组件的参数完全相同时，该子组件不会有任何变化，会保留原有的一切内部状态，否则会对其参数进行重新赋值，从而导致其内部状态改变，导致子组件重新render甚至删除重建。这也是为什么我们不推荐把Vue组件的模板做的太过复杂，嵌套层次太多的缘故。因为模板越复杂，用到的变量就会越多，从而导致模板被重新render的次数也越多，并且由于嵌套，导致各级子组件都暴露在父组件的模板中，从而导致子组件被反复重建的可能性变大，性能也就变差了。

        本来正常情况下，只要子组件的参数中所有用到的变量值都没有改变时，子组件就不会被改变。但有一种情况很隐蔽，有时会变成影响性能甚至运行结果的大坑！

        这种情况就是：当子组件的参数中使用了动态表达式，并且这个表达式在每次执行时都会生成新值的时候。其中最常见的情况，就是类似：

<child-component :size="[width, height]" .../>

这样的参数设置。即便 width 和 height 的值都没变，当模板render时，这个 size 参数的值也每次都不一样！为什么？因为 [ ] 每次都会创建新的数组呀！

        这样一来，那么当父级的模板由于任何内容更改而重新render时，这个子组件的size参数都会被重新赋值为新的对象。如果不幸这个子组件内部是依赖这个参数来构建其模板，或者计算其内部数据的话，就会导致子组件也连带着重新render或者重算内部数据，哪怕这个size的值实际上并没有真正变化！如果再不幸一点，如果这个子组件是用在v-for里的一项，并且同时还有很多兄弟姐妹的话，那会导致多少不必要的性能消耗你知道么？如果你和我一样，做过项数上千的v-for的话，你就知道差别有多大了！

        可不要小看这个坑，因为很多情况下我们都会遇到，常见还比如大多数Vue组件都支持的 class 或 style 设置，如果你在模板中用了数组或对象表达式来给这两个参数赋值，那么哪怕里面没有任何变量，也会导致每次的 class 或 style 参数的值变成新对象，从而引发其内部重新渲染。只不过这样的损耗在一般情况下感觉不出来罢了，一旦子组件数量多了，你就会发现界面怎么莫名奇妙变得卡卡的，明明什么数据也没改啊。。。现在你知道为啥了吧？

        要绕过这个坑，其实也很简单，只需要将参数包成一个计算属性即可，如下：

模板中：

<child-component :size="size" .../>

脚本中：

computed: {
   size() {
      return [this.width, this.height]
   }
}

        因为计算属性会自动缓存其计算值，当计算所用到的变量没有变化时，反复访问计算属性不会导致重算，于是每次模板重新render时访问这个计算属性的值也就始终是同一个对象，不会有所变化了。

        以前有的小伙伴（包括我在内）一直以为模板中的参数表达式可以视作匿名的计算属性来看待，如今看来这么理解是大错特错了。模板中的表达式并不会自动缓存其值，和计算属性根本不一样！