Vue learning notes

Differences between computed property caches and methods

Method :

Change the value of app7.message in the console and the method will execute

html: structure

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

Attributes:

Change the value of app7.message in the console, the computed property will not change and will not be executed again, because the computed property does not depend on other things

html structure:

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

js: same as above

Every time a redraw is caused (for example: app7.message changes), the method message__ will be executed;

If the computed property does not depend on other things (such as app7.message), it will keep the first result and will not execute again; if it depends on other things, whenever the dependent thing changes, the computed property will do it again

To borrow from the vue official website: Computed properties are cached based on their dependencies

If js is changed to: the computed property depends on app7.message, and the app7.message changes, the computed property will be executed again

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