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()
            }
        }
    })