vue防止重复渲染

在Vue中，当父组件的数据变化时，将会重新渲染子组件，这会导致性能问题。为了避免重复渲染，Vue提供了一些解决方案。

可以使用v-once指令来防止重复渲染，它只会渲染一次，当组件的数据修改后，不会重新渲染。例如:

    
        <template>
            <div v-once>{{ message }}</div>
        </template>
    

如果想要精确控制什么时候重新渲染，可以使用Vue提供的内置函数shouldComponentUpdate。这个函数会在组件数据变化前执行，修改返回值可以控制组件是否需要重新渲染。例如：

    
        export default {
            data(){
                return {
                    message: "Hello Vue!"
                }
            }
            methods: {
                shouldComponentUpdate(nextProps,nextState){
                    return nextProps.message !== this.props.message;
                }
            }
        }
    

Vue还提供了mixin方法来共享组件逻辑。Mixin可以定义一个对象，包含一些组件逻辑或者方法，这些逻辑和方法可以被多个组件共享。例如：

    
        const myMixin = {
            methods: {
                log(){
                    console.log("logging....");
                }
            }
        }
        const myComponent = {
            mixin: [myMixin],template: "<button @click='log'>Click me</button>"
        }
    

如果有一个需要在多个组件中使用的渲染逻辑，可以封装成函数，然后在组件中引用。例如：

    
        const renderTemplate = (h,message)=>{
            return h("div",message);
        }
        export default {
            render(createElement){
                return renderTemplate(createElement,"Hello Vue!");
            }
        }
    

最后，可以使用iview等UI框架来提高组件性能，它们优化了大量的组件渲染问题。