Mutation observer

v-mutate 指令使用了 Mutation Observer API。它提供了一个易于使用的接口，用于检测元素被更新的时间。

用例

默认情况下，v-mutate 指令将启用 Mutation Observer API 中所有可用的选项。 这可以通过两种方式之一加以修改。你可以使用 handler 和 options 传递对象，也可以使用 v-mutate.attr.sub="onMutate" 的 modifier 属性

template script

<template>
  <div>
    <v-text-field v-model="content" label="Content"></v-text-field>
    <v-sheet v-mutate="onMutate">
      {{ content }}
    </v-sheet>
    Total mutations: {{ mutations }}
  </div>
</template>

<script>
  export default {
    data: () => ({
      mutations: 0,
      content: 'Hello, world!',
    }),
    methods: {
      onMutate () {
        this.mutations++
      },
    },
  }
</script>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

Modifiers

v-mutate 指令接受了 Mutation Observer API 中所有可用选项。为了简洁起见，使用缩写—attr (attributes), child (childList), sub (subtree) and char (characterData)。

template script

<template>
  <div>
    <div>
      <div class="text-center">
        <v-btn @click="content = !content">Change Content</v-btn>
      </div>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-card>
              <v-card-title>Card 1</v-card-title>
              <div class="title text-center pb-3">
                Times Mutated: {{ card1 }}
              </div>
              <v-card-text v-mutate="() => onMutate('card1')">
                <p
                  v-for="n in +content + 2"
                  :key="n"
                  :class="n === +content + 2 && 'mb-0'"
                >
                  Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Fusce fermentum odio nec arcu. Aenean ut eros et nisl sagittis vestibulum. Nunc interdum lacus sit amet orci. Phasellus nec sem in justo pellentesque facilisis.
                </p>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col
            cols="12"
            md="6"
          >
            <v-card>
              <v-card-title>Card 2 (w/ once modifier)</v-card-title>
              <div class="title text-center pb-3">
                Times Mutated: {{ card2 }}
              </div>
              <v-card-text v-mutate.once="() => onMutate('card2')">
                <p
                  v-for="n in +content + 2"
                  :key="n"
                  :class="n === +content + 2 && 'mb-0'"
                >
                  Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Fusce fermentum odio nec arcu. Aenean ut eros et nisl sagittis vestibulum. Nunc interdum lacus sit amet orci. Phasellus nec sem in justo pellentesque facilisis.
                </p>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>

<script>
  export default {
    data: () => ({
      content: false,
      card1: 0,
      card2: 0,
    }),
    methods: {
      onMutate (card) {
        this[card]++
      },
    },
  }
</script>