Vue.JS开源:vue-lazy-render - 延迟渲染 Vue 组件，增强页面切换流畅度

   <h2>vue-lazy-render</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c159cf066f51bea4efdcfbe3e8b21c2d.png"></p>    <h2>Description</h2>    <p>A vue component for vue component lazy rending.</p>    <p>Vue组件,用于Vue组件的延迟渲染,改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况</p>    <h2>Installation</h2>    <pre>  <code class="language-javascript">npm install vue-lazy-render</code></pre>    <h2>Usage</h2>    <pre>  <code class="language-javascript">import LazyRender from 'vue-lazy-render'  Vue.use(LazyRender)</code></pre>    <h2>Props</h2>    <table>     <thead>      <tr>       <th>property</th>       <th>description</th>       <th>type</th>       <th>default</th>       <th>required</th>      </tr>     </thead>     <tbody>      <tr>       <td>time</td>       <td>多长时间后开始渲染组件</td>       <td>Number</td>       <td>10</td>       <td>false</td>      </tr>      <tr>       <td>immediately</td>       <td>是否立即开启延迟渲染,vue-lazy-render组件会在路由切换时,会进行一次延迟渲染,如果在同一个路由中需经常对某个组件进行延迟渲染,可以将immediately由false设为true,就会马上开启一次延迟渲染</td>       <td>Boolean</td>       <td>--</td>       <td>false</td>      </tr>      <tr>       <td>data</td>       <td>如果需要延迟加载的组件是由数组渲染的,可以将数据的数据prop进vue-lazy-render组件,组件会根据配置监测数组变化,决定开启延迟加载的时机</td>       <td>array</td>       <td>--</td>       <td>false</td>      </tr>      <tr>       <td>trackByData</td>       <td>是否根据data的变化来开启延迟加载,如果设为true,需将data prop进来,并且路由切换时不会再进行延迟渲染</td>       <td>Boolean</td>       <td>--</td>       <td>false</td>      </tr>      <tr>       <td>limit</td>       <td>在数据超过多少后才开启延迟渲染,需要data和将trackByData设为true</td>       <td>Number</td>       <td>30</td>       <td>false</td>      </tr>      <tr>       <td>maskClass</td>       <td>等待渲染时的遮罩层样式</td>       <td>String</td>       <td>--</td>       <td>false</td>      </tr>      <tr>       <td>tip</td>       <td>等待渲染时的提示文字</td>       <td>String</td>       <td>正在渲染,请稍候</td>       <td>false</td>      </tr>     </tbody>    </table>    <h2>Events</h2>    <table>     <thead>      <tr>       <th>name</th>       <th>description</th>       <th>params</th>      </tr>     </thead>     <tbody>      <tr>       <td>loaded</td>       <td>延迟渲染完成后的回调</td>       <td>--</td>      </tr>     </tbody>    </table>    <h2>Example</h2>    <h3>基础用法</h3>    <pre>  <code class="language-javascript"><lazy-render>      <my-component></my-component>  </lazy-render></code></pre>    <h3>trackByData</h3>    <pre>  <code class="language-javascript"><lazy-render :data="myArray" :time="300" :limit="50" track-by-data>      <my-component :data="myArray"></my-component>  </lazy-render></code></pre>    <p> </p>    <p>来自：https://github.com/yeyuqiudeng/vue-lazy-render</p>    <p> </p>