vue3使用ref的性能警告问题怎么解决

    vue3使用ref的性能警告

    问题

    使用 ref 的性能警告 代码如下

    <template>
      <div>
        <component :is="currentTabComponent"></component>
      </div>
    </template>
    
    <script setup>
    
    import { ref,shallowRef } from "vue";
    import TodoList from "./components/TodoList.vue";
    import Rate from "./components/Rate.vue";
    
    let tabs ={
      TodoList,
      Rate
    }
    let currentTabComponent = ref(TodoList)
    </script>

    警告

    runtime-core.esm-bundler.js:6591 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref. Component that was made reactive:
    译文:
    runtime-core.esm-bundler.js:6591 [Vue 警告]:Vue 收到一个组件,该组件已成为响应式对象。这会导致不必要的性能开销,应该通过使用 markRaw 标记组件或使用 shallowRef 代替 ref 来避免。被响应的组件:

    • markRaw: 标记一个对象,使其永远不会转换为 proxy。返回对象本身。

    • shallowRef: 创建一个跟踪自身 .value 变化的 ref,但不会使其值也变成响应式的。

    解决

    我通过将对象标记为shallowRef解决了这个问题

    因此,不要将组件存储在您的状态中,而是存储对它的键控引用,并针对对象进行查找

    完整代码

    <template>
      <div>
        <h2>带动画的Todolist</h2>
        <button
          v-for="(i,tab) in tabs"
          :key="i"
          :class="[&#39;tab-button&#39;, { active: currentTabComponent === tab }]"
          @click="fn(tab)"
        >
          {{ tab }}
        </button>
        <component :is="currentTabComponent"></component>
      </div>
    </template>
    
    <script setup>
    
    import { ref,shallowRef } from "vue";
    import TodoList from "./components/TodoList.vue";
    import Rate from "./components/Rate.vue";
    
    let tabs ={
      TodoList,
      Rate
    }
    let currentTabComponent = shallowRef(TodoList)
    
    function fn (tab){
      currentTabComponent.value = tabs[tab]
    }
    </script>

    vue3 ref函数用法

    1.在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI

    <template>
        <div>
            <h2>{{mycount}}</h2>
            <button @click="changeMyCount">changeMyCount</button>
        </div>
    </template>
     
    <script>
    import { ref } from "vue";
    export default {
        name: "ref",
        setup(){
            const mycount = ref(2);
            const changeMyCount = ()=>{
                mycount.value = mycount.value + 2 ;
            }
            
            return {
                mycount,
                changeMyCount,
            }
        }
    };
    </script>

    ref函数仅能监听基本类型的变化,不能监听复杂类型的变化(比如对象、数组)

    监听复杂类型的变化可以使用reactive函数

    2.通过ref属性获取元素

    vue3需要借助生命周期方法,在setup执行时,template中的元素还没挂载到页面上,所以必须在mounted之后才能获取到元素。

    <template>
        <div>
            <div ref="box"><button>hehe</button></div>
        </div>
    </template>
     
    <script>
    import { ref } from "vue";
    export default {
        name: "ref",
        setup(){
            const box = ref(null)
            onMounted(()=>{
                console.log(box.value)
            })
        }
    };
    </script>

    以上就是vue3使用ref的性能警告问题怎么解决的详细内容,更多请关注www.sxiaw.com其它相关文章!