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

Dear 丶 2023-06-11 06:29 105阅读 0赞

### 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的生命周期图 ####

![11610148-132b8a16f0f8926d.png][]

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>
                <button @click="updateMsg()">更新组件数据</button>
                <button @click="destroyVue()">销毁Vue实例</button>
            </div>
            <script src="../js/mui.min.js"></script>
            <script src="../js/vue.js"></script>
            <script type="text/javascript">
                mui.init();
                var vm=new Vue({
                    el:"#content",
                    data:{
                        msg:"组件生命周期！"
                    },
                    methods:{
                        updateMsg:function(){
                            this.msg="组件数据更新!"
                        },
                        destroyVue:function(){
                            this.$destroy();//销毁Vue组件方法
                        }
                    },
                    beforeCreate() {
                        alert("组件实例刚刚创建，还未进行数据观测和事件配置");
                    },
                    created() {//常用!
                        alert("组件已经创建完成，并且已经进行了数据观测和事件配置");
                    },
                    beforeMount() {
                        alert("模板编译之前，还未挂载");
                    },
                    mounted() {//常用!
                        alert("模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上的数据展示内容");
                    },
                    beforeUpdate() {
                        alert("组件更新之前");
                    },
                    updated() {
                        alert("组件更新之后");
                    },
                    beforeDestroy() {
                        alert("组件销毁之前");
                    },
                    destroyed() {
                        alert("组件销毁之后");
                    }
                })
            </script>
        </body>
    
    </html>

### Vue的计算属性 ###

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
      {
       { message.split('').reverse().join('') }}
    </div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。  
所以，对于任何复杂逻辑，你都应当使用**计算属性**。

#### 1. 基础例子 ####

<div id="example">
      <p>Original message: "{
       { message }}"</p>
      <p>Computed reversed message: "{
       { reversedMessage }}"</p>
    </div>

var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })

结果：  
Original message: "Hello"  
Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数。

#### 2.计算属性缓存 ####

计算属性是**缓存**的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
      now: function () {
        return Date.now()
      }
    }

相比之下，每当触发重新渲染时，调用方法将**总会**再次执行函数。  
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

#### 3. 计算属性的 setter ####

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    // ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

示例：

原创不易，转载请注明出处。

[11610148-132b8a16f0f8926d.png]: /images/20230531/26ca49cb737a427b82551ca305ddbffa.png