vue是組件化開發的項目，很多情況下會把公共組件提取出來，來減少代碼量，提高開發效率，和以后更好的可維護性。很多情況下，父組件中都會引用子組件這種情況。通過給在父組件中引用的子組件標簽上添加屬性，來渲染可以擁有不同數據的子組件。但是vue 的組件有個特點，如果我們這一次和上一次傳過去的屬性值一樣的話，watch 監聽的屬性因為沒有新的變化(這次的值和上一次的值一樣watch 中調用的函數不執行)，導致對應的數據也沒有變化。created() 生命周期函數也是只執行一次。（很尷尬，讓我這個用慣了react 的人剛開始還有點不適應。但是畢竟胳膊擰不過大腿不是，還是趕緊想辦法把。）
但是有時候我們需要這個組件每次都重新生成dom 元素，每次都執行created() 函數。這時候就用到了vue中的key 屬性。
key屬性和react 的key屬性基本上是一樣的（個人理解，如果有錯誤還請拍磚指正）。
key 屬性不是給開發人員用的，而是用來 給vue 元素渲染的時候用的，每次渲染的時候會去拿這個key 值做對比，如果這一次的key 值和上一次的key值是不一樣的才會重新渲染dom 元素，否則保持上一次的元素狀態。
根據這個原理我們可以給key 直接綁定一個 時間戳。
1 <template>
2 <div>
3 <div>
4 <h1>父級</h1>
5 <button @click="handleLoad">點擊重新加載子級</button>
6 </div>
7 <children :key="timer"></children>
8 </div>
9 </template>
10 <script>
11 import children from '@/components/parent/children'
12 export default { 13 name: 'parent', 14 components: { children }, 15 data () { 16 return { 17 timer: ''
18 } 19 }, 20 methods: { 21 handleLoad () { 22 this.timer = new Date().getTime() 23 } 24 } 25 } 26 </script>
1 <template>
2 <div>
3 子級 4 </div>
5 </template>
6 <script>
7 export default { 8 name: 'children', 9 data () { 10 return {} 11 }, 12 created () { 13 console.log('重新加載啦') 14 } 15 } 16 </script>
每次點擊的時候都會重新加載子組件 ，created() 生命周期函數每次都會執行，重新生成dom 元素。也省的用watch 去監聽了！
------來自轉載。