Vue生命周期

1、 Vue生命周期

1. vue对象的生命周期
   1). 初始化显示
   • beforeCreate()
   • created()
   • beforeMount()
   • mounted()
     2). 更新状态
   • beforeUpdate()
   • updated()
     3). 销毁vue实例: vm.$destory()
   • beforeDestory()
   • destoryed()
2. 常用的生命周期方法
   created()/mounted(): 发送ajax请求, 启动定时器等异步任务
   beforeDestory(): 做收尾工作, 如: 清除定时器

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true,
      show:true
    },
  //挂载mounted
    mounted () {//初始化显示后立即调用（1次）
      // 执行异步任务
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },
    beforeDestroy() {//死亡销毁之前调用（1次）
      console.log('beforeDestroy()')
      // 执行收尾的工作
      clearInterval(this.intervalId)
    },
    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })
</script>

3. 生命周期图
   

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },
    beforeCreate() {
      console.log('beforeCreate()')
    },
    created() {
      console.log('created()')
    },
    beforeMount() {
      console.log('beforeMount()')
    },
    mounted () {
      console.log('mounted()')
      // 执行异步任务
      this.intervalId = setInterval(() => {
        console.log('-----')
        this.isShow = !this.isShow
      }, 1000)
    },
    beforeUpdate() {
      console.log('beforeUpdate()')
    },
    updated () {
      console.log('updated()')
    },
    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作
      clearInterval(this.intervalId)
    },
    destroyed() {
      console.log('destroyed()')
    },
    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })
</script>

4. 常用内置指令
   v:text : 更新元素的 textContent
   v-html : 更新元素的 innerHTML
   v-if : 如果为true, 当前标签才会输出到页面
   v-else: 如果为false, 当前标签才会输出到页面
   v-show : 通过控制display样式来控制显示/隐藏
   v-for : 遍历数组/对象
   v-on : 绑定事件监听, 一般简写为@
   v-bind : 强制绑定解析表达式, 可以省略v-bind
   v-model : 双向数据绑定
   ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
   v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }