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>