Vue学习：12.生命周期实例

两个小例子，巩固一下生命周期钩子函数。

实例1：初始化渲染

实现功能：

在 Vue 实例数据为空的情况下，用户在一进入页面就向服务器发送请求获取数据，并在数据返回后进行动态渲染。

思路：

1. 创建一个 Vue 实例，将数据初始化为空。

2. 使用 Vue 的 created生命周期钩子函数，一进入页面便发送请求。

3. 在请求返回后，将获取到的数据赋值给 Vue 实例的数据属性。

4. 利用 Vue 的数据绑定，将数据动态渲染到页面上。

代码：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [],
                words: ''
            },
            // 发送初始化请求应该使用created()钩子
            async created(){
                // 发送请求，获得数据
                // 使用axios库发送HTTP GET请求获得指定URL的数据
                res = await axios.get('http://xxxxxx')
                // 将数据更新到list
                this.list = res.data.data
            }
})
</script>

实例2：获取焦点

实现功能：

对于一个表单元素input，要求一进入页面立刻获取焦点功能。

思路：

1. 在需要获取焦点的 input 元素上添加一个 ID。

2. 在 Vue 组件中使用 mounted 生命周期钩子函数，在组件挂载到页面后立即获取焦点。

3. 使用 JavaScript 的 querySelector 方法来选取具有固定ID 的元素。
4. 使用.focus() 获得选中元素的焦点。

代码：

// 操作DOM行为应该使用mounted()钩子
mounted(){
    // 刷新页面立即获取焦点
    document.querySelector('#search').focus()
}

注意：

对于获取DOM元素，还可以使用ref属性。在模板中给元素添加 ref 属性，然后可以通过 $refs 来访问该元素。

<template>
  <div>
    <input ref="myInput" />
  </div>
</template>

<script>
    export default {
          mounted() {
        this.$refs.myInput.focus();
      },
    };
</script>