Vue重新渲染頁面詳解

一、響應式數據

在Vue中，響應式數據是一大特色，改變響應式數據會自動觸發視圖的重新渲染。即使我們在程序整段中沒有調用任何的方法，數據發生變化也會自動重新渲染。

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="changeMessage">發送</button>  
  </div>  
</template>  

<script>  
export default {  
  name: 'App',  
  data () {  
    return {  
      message: '這是一段文字'  
    }  
  },  
  methods: {  
    changeMessage () {  
      this.message = '重新渲染成功'  
    }  
  }  
}  
</script>  

二、計算屬性

計算屬性是一個非常有用的特性，用於計算一個值並將其返回。計算屬性是基於響應式數據計算得出來，因此響應式數據的變化會自動觸發計算屬性重新計算。

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  

<script>  
export default {  
  name: 'App',  
  data () {  
    return {  
      message: '計算屬性'  
    }  
  },  
  computed: {  
    reverseMessage () {  
      return this.message.split('').reverse().join('')  
    }  
  }  
}  
</script>  

三、生命周期函數

生命周期函數指的是Vue實例從創建到銷毀的整個過程，Vue提供了一些特定的函數，可以在這些函數中編寫一些特定的邏輯代碼。

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  

<script>  
export default {  
  name: 'App',  
  data () {  
    return {  
      message: '生命周期'  
    }  
  },  
  mounted () {  
    console.log('mounted')  
  }  
}  
</script>  

四、動態組件

動態組件允許我們動態切換視圖。可以根據響應式數據來動態載入不同的組件，實現不同的交互效果。

<template>  
  <div>  
    <component :is="componentName"></component>  
    <button @click="switchComponent">切換組件</button>  
  </div>  
</template>  

<script>  
import component1 from './components/component1.vue'  
import component2 from './components/component2.vue'  

export default {  
  name: 'App',  
  components: {  
    component1,  
    component2  
  },  
  data () {  
    return {  
      componentName: 'component1'  
    }  
  },  
  methods: {  
    switchComponent () {  
      this.componentName = this.componentName === 'component1' ? 'component2' : 'component1'  
    }  
  }   
}  
</script>  

五、條件渲染

條件渲染允許我們基於某些條件來控制何時渲染一個特定的視圖。

<template>  
  <div>  
    <template v-if="condition">  
      <p>符合條件時{{ message }}</p>  
    </template>  
    <template v-else>  
      <p>不符合條件時{{ message }}</p>  
    </template>  
    <button @click="toggle">切換條件</button>  
  </div>  
</template>  

<script>  
export default {  
  name: 'App',  
  data () {  
    return {  
      message: '條件渲染',  
      condition: true  
    }  
  },  
  methods: {  
    toggle () {  
      this.condition = !this.condition  
    }  
  }   
}  
</script>