widgets Stop re-rendering with v-once


Your function is to update data more than one time. But in some HTML elements you don’t want to update data v-once is helping you here. For example, you have a code:

data: {
        title: 'Hello World!',
    },
    methods: {
        sayHello: function () {
            this.title = 'Hello!';
            return this.title;
        }
    }

After the run code in html

<div>{{ title }}</div>  //  Result => Hello!
<div>{{ sayHello() }}</div>  //  Result => Hello!

If you don’t want to update data you should use v-once

<div v-once>{{ title }}</div>  //  Result => Hello World!
<div>{{ sayHello() }}</div>  //  Result => Hello!