Vue----计算属性

把computed中的方法当做属性使用,会返回一个数据供使用:

    new Vue({

    el:"",//关联界面元素

    data:{},//vm的数据源

    methods:{},//方法

    filters:{qq(){}},//过滤器

    computed:{xx(){}} //xx就是一个计算属性

   

})

//属性没有先后顺序

 

第一种用法：当做函数使用

    <div id='app'>

 

        <p>计算结果computed----{{age}}</p>

        <button @click="change">点击计算</button>

        <p>计算结果metheds----{{msg}}岁</p>

 

    </div>

    <script>

        new Vue({

            el:'#app',

            data: {

                birth:"1999-11-10",

                msg:0

               

            },

            methods: {

                change(){

                    this.msg= new Date().getFullYear()-new Date(this.birth).getFullYear()

                    return this.msg

                }

            },

            computed:{

                age(){

                    var number=new Date().getFullYear()-new Date(this.birth).getFullYear()

                    //将this.birth缓存起来，当this.birth修改后才会重新调用age函数

                    return number+"岁"

                },

             }

    })

    </script>

 

第二种用法：属性用法

    <div id='app'>

        <p>{{age2}}</p>

        <button @click="change">点击计算</button>

        <p>计算结果metheds----{{msg}}岁</p>

 

    </div>

    <script>

        new Vue({

            el:'#app',

            data: {

                birth:"1999-11-10",

                msg:0

               

            },

            methods: {

                change(){

                    this.msg= new Date().getFullYear()-new Date(this.birth).getFullYear()

                    return this.msg

                }

            },

            computed:{

                    age2:{

                    get(){

                        // return "取值"

                        return "出生日期"+this.birth

                    },//取值

                    set(){

                        return "存值"

                    }//存值

                }

            }

    })

    </script>

 

 

计算属性和方法的区别:(面试)

计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

 

 

补充:关于计算属性 函数什么情况下调用

//计算属性使用时当做属性使用

//计算属性设计时当做函数设计(就像es6中的属性)

//当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI

//1.如果是修改了data中监听的某个的属性值 计算属性就会运行

//2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行

//比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性

//3.解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性

//3.解决2的办法2:赋值 JSON.parse(JSON.stringfy(data))