Vue生命周期计算属性

Posted zhd09

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue生命周期计算属性相关的知识,希望对你有一定的参考价值。

一:生命周期

概述:

1.生命周期又叫钩子函数,跟el、data、同级的位置,指的是vue实例从开始创建到最后销毁经历的三阶段,这三个阶段分别叫创建阶段、运行阶段的钩子函数、销毁阶段的钩子函数。

2.其中,三个阶段一共有8个函数

①创建阶段有四个函数

beforeCreate        实例创建之前

created           实例创建完成

beforeMount        模板挂载之前

mounted           模板挂载之后

②运行阶段有两个函数

beforeUpdate         视图更新之前

updated          视图更新之后

③销毁阶段有两个函数

beforeDestroy           实例销毁之前

destroyed          实例销毁之后

3.生命周期例子+说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期举例</title>
</head>
<body>
    <div id="app">
        <div id="a">{{msg}}</div>
        <button @click="msg++">加加</button>
    </div>
    <div id="btn">销毁</div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:10
            },
            beforeCreate(){//实例创建之前
                //实例刚刚创建,new vue上只有生命周期函数
                console.log(this.msg);//undefined
            },
            created(){//实例创建完成
                //data和methods里的方法可以使用了
                console.log(this.msg);//10
            },
            beforeMount(){//模板挂载之前
                //模板编译成的模板字符串会被放进内存中生成一个虚拟dom节点
                console.log(a.innerHTML);//{{msg}}
            },
            mounted(){//模板挂载之后
                console.log(a.innerHTML);//10
            },  
            beforeUpdate(){//视图更新之前
                //也就是说data里的数据发生改变,但视图里的数据还没有发生改变
                console.log(this.msg);//11
                console.log(a.innerHTML);//10
            },
            updated(){//视图更新之后
                //视图里的数据跟着data里的数据改变之后
                console.log(this.msg);//11
                console.log(a.innerHTML);//11
            },
            beforeDestroy(){//实例销毁之前
                console.log(this.msg);//11
            },
            destroyed(){//实例销毁之后
                console.log(this.msg);//11
            }
        })
        //vm.$destroy()  让vue实例销毁的方法
        //实例销毁之后再次点击加加按钮会失效
        btn.onclick=()=>{//点击销毁
            vm.$destroy();
        }
       
    </script>
</body>
</html>

二:计算属性(computed)

概述:

1.在methods方法里,他没有缓存、只要数据一改变就会重新执行,但是跟他无关的数据也会执行。而计算属性可以解决这个问题

2.计算属性是一个属性,用法跟data里定义的数据用法一样。它需要一个return值 ,并且他有缓存。只有跟他有关的data发生变化的时候才会重新计算,跟他无关的数据发生变化不会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性例子</title>
</head>
<body>
    <div id="app">
        <button @click="a++">a++</button>
        <button @click="str=‘world‘">str变化</button>
        a:{{adda()}}
        <br>
        方法methods里的{{changestr()}} <br>
        计算属性computed里的{{changestr2}}

    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                a:0,
                age:10,
                str:"hello"
            },
            methods:{
                adda(){
                    console.log("aaa")
                    return this.a+this.age   
                },
                changestr(){
                    console.log(我是methods里的changestr)
                    return this.str.repeat(3)//重复三遍
                }
            },
            // 计算属性
            computed:{
                changestr2(){
                    console.log(我是methods里的changestr2)
                    return this.str.repeat(3)
                }
            },
            //点击a++的时候,后台打印结果如下
                //aaa
                //我是methods里的changestr
            //每点击a++一次,它就会打印一次
            //而当点击str变化的时候,后台打印结果是
                //aaa
                //我是methods里的changestr
                //我是methods里的changestr2
            //因为点击后str已经等于world了,所以当你再次点击tr变化的时候,他就不会打印了
        })
    </script>
</body>
</html>

 

以上是关于Vue生命周期计算属性的主要内容,如果未能解决你的问题,请参考以下文章

vue 计算属性 实例选项 生命周期

Vue生命周期,计算属性方法侦听器

vue生命周期函数区别作用

VUE计算属性、监听&深度监听、八大生命周期、v-if和v-show

Vue 常用特性:表单操作自定义指令计算属性侦听器过滤器生命周期

关于vue中computed计算属性和mouted生命周期的问题