Vue基础（三）--生命周期和计算属性

程序员大佬超

已于 2024-01-24 16:19:47 修改

阅读量537

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2019-10-29 11:49:22 首次发布

本文链接：https://blog.csdn.net/xch_yang/article/details/102803495

版权

本文介绍了Vue实例的生命周期，包括created、mounted等钩子函数的用途，强调了在不同阶段进行代码操作的重要性。此外，详细讲解了计算属性的基础用法、缓存机制和setter，提倡使用计算属性来管理复杂逻辑，提高模板的可读性。

摘要由CSDN通过智能技术生成

Vue的生命周期

1. 简介

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

2. Vue的生命周期图

Vue的生命周期

3. 示例：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div class="mui-content" id="content">
            <div>{
  {msg}}</div>
            <b

最低0.47元/天解锁文章

程序员大佬超

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础（三）--生命周期和计算属性

Vue的生命周期1. 简介每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。比如 created 钩子可以用来在一个实例被创建之后执行代码：new Vue({ data: { ...
复制链接

扫一扫