Vue生命周期

vue2
1.5k 词
Vue生命周期

Vue生命周期#

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

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

生命周期四个阶段：创建、挂载、更新、销毁

  1. 创建阶段：new Vue()响应式数据

    发送初始化渲染请求

  2. 挂载阶段：渲染模板

    操作dom

  3. 更新阶段：数据修改，更新视图
  4. 销毁阶段：销毁实例

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

Vue生命周期过程中，会 自动运行一些函数 ，被称为 生命周期钩子

与data同级

让开发者可以在 特定阶段 运行自己的代码

常用： created mounted befreDestory

created:发送初始化渲染请求

mounted:操作dom

before Destory:释放Vue以外的资源（清除定时器，延时器等）

以计数器为例

{{count}} 
const counter = new Vue({
    el: '#counter',
    data: {
        count: 100,
    },
    // 1.创建阶段（准备数据）
    beforeCreate() {
        // 响应式数据准备好之前
        console.log('beforeCreated count:', this.count);
    },
    created() {
        // 响应式数据准备好之后
        console.log('created count:', this.count);
    },
    // 2.挂载阶段（渲染模板）
    beforeMount() {
        // 模板渲染之前
        console.log('beforeMount count:', document.querySelector('#counter span').innerHTML);
    },
    mounted() {
        // 渲染之后
        console.log('Mounted count:', document.querySelector('#counter span').innerHTML);
    },
    // 3.更新阶段（修改数据，更新视图）
    beforeUpdate() {
        // 数据修改了，视图还未更新
        console.log('beforeUpdate count:', document.querySelector('#counter span').innerHTML);
    },
    updated() {
        // 数据修改了，视图已更新
        console.log('updated count:', document.querySelector('#counter span').innerHTML);
    },
    // 4.卸载阶段
    beforeDestroy() {
        // 清除掉一些Vue以外的资源占用，定时器，延时器等
        // 调试通过浏览器提供的app.$destory()方法销毁
        console.log('beforeDestory');
    },
    destroyed() {
        console.log('destoryed');
    },
});

created应用#

created:响应式数据准备好了，可以开始发送初始化渲染请求

（图片在线地址失效，暂时用本地图片）

  • {{item.title}}
    {{item.source}} {{item.time}} 
// 新闻实例
// 接口：http://hmajax.itheima.net/api/news
// 请求方式：get
const news = new Vue({
    el: '#news',
    data: {
        list: [],
    },
    async created() {
        // 1.发送请求，获取数据
        const res = await axios.get('http://hmajax.itheima.net/api/news');
        // 2.将数据更新给data中的list
        this.list = res.data.data;
    },
});

mounted应用#

mounted :模板渲染完成，可以开始操作dom了

实例：页面一加载，搜索框自动获得焦点

不用autofocus是因为在vue中应用是模板，根据数据动态渲染

核心思路：

  1. 等输入框渲染出来，要等渲染完成再做操作，那么要使用 mounted 钩子
  2. 让输入框获取焦点
<div class="container" id="searchFocus">
    <div class="search-container">
        <img src="https://www.itheima.com/images/logo.png" alt="" />
        <div class="search-box">
            <input type="text" v-model="words" id="inp" />
            <button>搜索一下</button>
        </div>
    </div>
</div>
// 页面加载完成，搜索框自动获得焦点
const searchFocus = new Vue({
    el: '#searchFocus',
    data: {
        words: '',
    },
    mounted() {
        document.querySelector('#inp').focus();
    },
});