Vue created与mounted区别

created

• 在模版渲染成html 或 模版编译进路由前 调用created(不需要手动操作，会在视图还未显示出来前,执行created)

<template>
  <button @click="increment">{{ count }}</button>
</template>
<script>
	export default {
	  data() {
	    return {
	      count: 0
	    }
	  },
	  methods: {
	    increment() {
	      this.count++
	    }
	  },
	  created() {
	    this.count = -1
	    console.log()
	  },
</script>

mounted

• 已完成模版渲染 或 el对应html渲染后 调用mounted(不需要手动操作，会在视图显示出来之后,执行mounted)

<script>
import {nextTick} from 'vue'
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
   mounted() {
    this.increment()
  },  
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

• created和mounted最后在视图上看到的效果是一样的，只是执行过程不一样！

Vue2.0的生命周期图