Vue.JS - 避免在父级重新渲染时重新渲染插槽

Question

我在 Vue.JS 上苦苦挣扎，它有一个组件作为子/插槽，一些带有 Canvas 数据的“复杂”组件(例如 map )。

我想避免当父组件重新渲染时，它们的内部槽也重新渲染。由于此组件的工作方式(或任何其他情况)，每次重新渲染时都需要执行所有“加载”步骤。即使在保存它们的实时状态时也是如此。

例如:

Component.vue

<template>
    <div>
        <span>{{value}}</span>
        <slot></slot>
    </div>
</template>

查看

<Component v-model="value">
    <Map :latitude="0" :longitude="0"/>
</Component>

<script>
    this.value = "Hello";
    setTimeout(()=>{
        this.value="Hello world!";
    },1000);
</script>

有什么方法可以防止插槽在父级重新渲染时重新渲染？

提前致谢。

Answer 1

你好，为子组件使用 props，这个子组件不会重新渲染

应用

<template>
  <div id="app">
    <HelloWorld msg="Hello Vue in CodeSandbox!" :somedata="key">
      slot information key: {{ key }}
    </HelloWorld>

    <button @click="key++">key++</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      key: 0,
    };
  },
};
</script>

child

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>somedata from props: {{ somedata }}</h3>
    <hr />
    <slot></slot>
    <hr />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      default: "",
    },
    somedata: {
      type: Number,
      default: 999,
    },
  },
  created() {
    console.log("renred");
  },
};
</script>

你怎么看我在子组件中使用了console.log("renred");，你可以查看控制台，信息只会显示一次。

https://codesandbox.io/s/naughty-platform-ib68g?file=/src/components/HelloWorld.vue