Что делает директива v-once в vue.js?

Frontend developer Vue.js
1

Точнее у меня даже три вопроса) что делает директива v-once, и в каких случаях её применяют, и самое главное зачем?

2

Эта директива единожды отрисовывает элемент (так же может единожды отобразить и компонент), далее, когда идет повторная отрисовка, в случае если через переменную значение свойства объекта изменено, то блоки с директивой v-once единожды отрисовавшись больше не будут отрисовыватся, и потомки точно так же, всё потому что они рассматриваются как статическое наполнение страницы, и их по просту пропускают, к вопросу зачем такое делать, ответ простой, это увеличивает производительность обновлений, не нужно же смотреть уже на весь код. Применяют когда объект единожды создали и далее его не требуется никак изменять.

<div id="example">

    



        
{{constant_message}}



    



    <span v-once>Это никогда не изменится: {{constant_message}}



    <div v-once>

        Message:

        {{constant_message}}

    



    



        
{{constant_message}}

В html разметке примеры различных ситуаций с директивой v-once, первый блок без данной директивы, затем два с и последний без, два блока без директивы, что бы наглядно был виден эффект данной директивы, просто поменяв значение свойства объекта message мы увидим что поменяется на странице при повторной отрисовке оно только в первом и последнем блоке, а остальные же блоки, к которым приписана директива v-once будут игнорироватся так как теперь считаются статичным содержимым страницы.

var message = {

    constant_message:'Я тут навсегда!'

}



 var a = new Vue ({

     el:"#example",

     data: message

 })