生命周期及其应用

生命周期和生命周期的四个阶段

生命周期：一个Vue实例从创建到销毁的整个过程

生命周期的四个阶段：创建、（发送初始化渲染请求）、挂载、操作dom、更新、销毁

Vue 生命周期函数（钩子函数）

【before Create】、创建（准备数据）、【created（发送初始化渲染请求）】、【before Mount】、挂载（渲染模板）、【mounted(操作dom)】、【before Update】、更新、【updated】、【before Destory】、销毁、【destory】

 <script>
     const app = new Vue({
         el: '#app',
         data: {
             obj: {
                 count: 100,
                 title: '计数器'
             }
         },
         //1创建阶段（准备数据）
         beforeCreate() {
             console.log('beforeCreate 响应式数据准备好之前', this.count)
         },
         created() {
             console.log('create 响应式数据准备好之后', this.count)
             // this.数据名=请求回来的数据
             // 可以开始发送初始化渲染请求了
         },
         //  2挂载阶段（渲染模板）
         beforeMount() {
             console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
         },
         mounted() {
             console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
         },
         // 3更新阶段（修改数据、更新视图）
         beforeUpdate() {
             console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
         },
         update() {
             console.log('update 数据修改了，视图已更新', document.querySelector('span').innerHTML)
         },
         // 4卸载阶段
         beforeDestory() {
             console.log('beforeDestory 卸载前')
             console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
         },
         destoryed() {
             console.log('destoryed,卸载后')
         }
     })
 </script>

 created应用

模板：

data: {
    list: []
},
created() {
    console.log('发送初始化渲染请求')
}

应用： 

data: {
    list: []
},
async created() {
//1发送请求,获取数据
    const res = await axios.get(网站)
//2将数据更新给data中的list
this.list = res.data.data
}

 

mouinted应用

data: {
    words：'abab'
},
created() {
    console.log('可以开始操作dom')
}

  应用

思路：

1等输入渲染出来

2让输入框获取焦点

    <input type="text" v-model="words" id="inp">



data: {
    words：''
},
created() {
  document.querySelector('#inp').focus()
}