Vue: "संक्रमण" और "कीप-सजीव" का उपयोग करते समय स्मृति रिसाव

को निर्मित 7 अप्रैल 2019 · 5टिप्पणियाँ · स्रोत: vuejs/vue

संस्करण

२.६.१० .10

प्रजनन लिंक

प्रजनन करने कि प्रक्रिया

मैंने एक डेमो लिखा:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>demo</title>
    <style>
      .link {
        cursor: pointer;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div id="app">
      <transition>
        <keep-alive include="foo">
          <component :is="target" @change="onChange"></component>
        </keep-alive>
      </transition>
    </div>
    <script>
      const Foo = {
        name: "foo",
        template: `<div class="link" @click="$emit('change', 'bar')">Go to Bar</div>`
      };
      const Bar = {
        name: "bar",
        template: `<div class="link" @click="$emit('change', 'foo')">Go to Foo</div>`
      };
      Vue.component("foo", Foo);
      Vue.component("bar", Bar);
      const app = new Vue({
        data: {
          target: "foo"
        },
        methods: {
          onChange(target) {
            this.target = target;
          }
        }
      }).$mount("#app");
    </script>
  </body>
</html>

डिबगिंग प्रक्रिया इस प्रकार है:
1 "कचरा इकट्ठा करें" और "हीप स्नैपशॉट लें" पर क्लिक करें (स्नैपशॉट 1)
2 बाईं ओर रूटिंग बटन पर 10 बार क्लिक करें, फिर "कचरा एकत्रित करें" और "हीप स्नैपशॉट ले लें" पर क्लिक करें (स्नैपशॉट 2)
3 बाईं ओर रूटिंग बटन पर 10 बार क्लिक करें, फिर "कचरा इकट्ठा करें" और "हीप स्नैपशॉट लें" पर क्लिक करें (स्नैपशॉट 3)