vue学习小记

计算属性缓存 和方法不同点

方法：

在控制台中改变app7.message的值，方法就会执行

html：结构

<div id="app7">
    <p>{{message}}</p>
    <p>{{message__()}}</p>
</div>

js：

 var app7=new Vue({
        el:"#app7",
        data:{
            message:"原来的信息"
        },
        computed:{
            message_:function(){
                return Date.now()  //没有对其他部分产生依赖
            }
        },
        methods:{
            message__:function () {
                return Date.now()
            }
        }
    })

属性：

在控制台中改变app7.message的值，计算属性都不会变，不会再次执行，因为该计算属性没有对其他东西产生依赖

html结构：

<div id="app7">
    <p>{{message}}</p>
    <p>{{message_}}</p>
</div>

js：同上

每次引起重绘（例如：app7.message的改变），方法message__都会执行；

如果计算属性没有对其他东西（例如app7.message）产生依赖，则会保持第一次结果，不会再次执行； 如果对其他产生依赖，每当该依赖的东西发生变化，则该计算属性就会再次执行一次

借鉴vue官网的话：计算属性是基于它们的依赖进行缓存的

如果把js改成：计算属性对app7.message产生依赖，app7.message发生变化，则计算属性则会再次执行

 var app7=new Vue({
        el:"#app7",
        data:{
            message:"原来的信息"
        },
        computed:{
            message_:function(){
                return this.message  
            }
        },
        methods:{
            message__:function () {
                return Date.now()
            }
        }
    })