feat: Vue性能优化方法

Author: 57code

public/08-vue-perf/README.md

@@ -1,41 +1,48 @@
 ## 你了解哪些Vue性能优化方法？
 
-### 答题思路：根据题目描述，这里主要探讨Vue代码层面的优化
+### 分析
 
+这是一道综合实践题目，写过一定数量的代码之后小伙伴们自然会开始关注一些优化方法，答得越多肯定实践经验也越丰富，是很好的题目。
+
+### 答题思路：
+
+根据题目描述，这里主要探讨Vue代码层面的优化
 
 ### 回答范例
-- 路由懒加载
+
+- 我这里主要从Vue代码编写层面说一些优化手段，例如：代码分割、服务端渲染、组件缓存、长列表优化等
+
+- 最常见的路由懒加载：有效拆分App尺寸，访问时才异步加载
 
   ```js
-  const router = new VueRouter({
+  const router = createRouter({
     routes: [
+      // 借助webpack的import()实现异步组件
       { path: '/foo', component: () => import('./Foo.vue') }
     ]
   })
   ```
 
 
 
-- keep-alive缓存页面
+- `keep-alive`缓存页面：避免重复创建组件实例，且能保留缓存组件状态
 
   ```vue
-  <template>
-    <div id="app">
-      <keep-alive>
-        <router-view/>
-      </keep-alive>
-    </div>
-  </template>
+  <router-view v-slot="{ Component }">
+  	<keep-alive>
+    	<component :is="Component"></component>
+    </keep-alive>
+  </router-view>
   ```
 
 
 
-- 使用v-show复用DOM
+- 使用`v-show`复用DOM：避免重复创建组件
 
   ```vue
   <template>
     <div class="cell">
-      <!--这种情况用v-show复用DOM，比v-if效果好-->
+      <!-- 这种情况用v-show复用DOM，比v-if效果好 -->
       <div v-show="value" class="on">
         <Heavy :n="10000"/>
       </div>
@@ -48,82 +55,98 @@
 
 
 
-- v-for 遍历避免同时使用 v-if
+- `v-for` 遍历避免同时使用 `v-if`：实际上在Vue3中已经是个错误写法
 
   ```vue
   <template>
       <ul>
         <li
           v-for="user in activeUsers"
+          <!-- 避免同时使用，vue3中会报错 -->
+          <!-- v-if="user.isActive" -->
           :key="user.id">
           {{ user.name }}
         </li>
       </ul>
   </template>
   <script>
-  	export default {
-          computed: {
-            activeUsers: function () {
-              return this.users.filter(function (user) {
-               return user.isActive
-              })
-            }
-          }
+    export default {
+      computed: {
+        activeUsers: function () {
+          return this.users.filter(user => user.isActive)
+        }
       }
+    }
   </script>
   ```
 
 
 
-- 长列表性能优化
+- v-once和v-memo：不再变化的数据使用`v-once`
 
-  - 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化
+  ```vue
+  <!-- single element -->
+  <span v-once>This will never change: {{msg}}</span>
+  <!-- the element have children -->
+  <div v-once>
+    <h1>comment</h1>
+    <p>{{msg}}</p>
+  </div>
+  <!-- component -->
+  <my-component v-once :comment="msg"></my-component>
+  <!-- `v-for` directive -->
+  <ul>
+    <li v-for="i in list" v-once>{{i}}</li>
+  </ul>
+  ```
 
-    ```js
-    export default {
-      data: () => ({
-        users: []
-      }),
-      async created() {
-        const users = await axios.get("/api/users");
-        this.users = Object.freeze(users);
-      }
-    };
-    ```
-
-    
-
-  - 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
-
-    ```html
-    <recycle-scroller
-      class="items"
-      :items="items"
-      :item-size="24"
-    >
-      <template v-slot="{ item }">
-        <FetchItemView
-          :item="item"
-          @vote="voteItem(item)"
-        />
-      </template>
-    </recycle-scroller>
-    ```
-
-    > 参考[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)、[vue-virtual-scroll-list](https://github.com/tangbc/vue-virtual-scroll-list)
+  按条件跳过更新时使用`v-momo`：下面这个列表只会更新选中状态变化项
 
-  
+  ```vue
+  <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
+    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
+    <p>...more child nodes</p>
+  </div>
+  ```
 
-- 事件的销毁
+  > https://vuejs.org/api/built-in-directives.html#v-memo
+
+  
 
-  Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 
+- 长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
 
+  ```html
+  <recycle-scroller
+    class="items"
+    :items="items"
+    :item-size="24"
+  >
+    <template v-slot="{ item }">
+      <FetchItemView
+        :item="item"
+        @vote="voteItem(item)"
+      />
+    </template>
+  </recycle-scroller>
   ```
-  created() {
-    this.timer = setInterval(this.refresh, 2000)
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
+
+  > 一些开源库：
+  >
+  > - [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)
+  > - [vue-virtual-scroll-grid](https://github.com/rocwang/vue-virtual-scroll-grid)
+
+  
+
+- 事件的销毁：Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 
+
+  ```js
+  export default {
+    created() {
+      this.timer = setInterval(this.refresh, 2000)
+    },
+    beforeUnmount() {
+      clearInterval(this.timer)
+    }
   }
   ```
 
@@ -143,38 +166,20 @@
 
 - 第三方插件按需引入
 
-  像element-ui这样的第三方组件库可以按需引入避免体积太大。
+  像`element-plus`这样的第三方组件库可以按需引入避免体积太大。
 
   ```js
-  import Vue from 'vue';
-  import { Button, Select } from 'element-ui';
+  import { createApp } from 'vue';
+  import { Button, Select } from 'element-plus';
 
-   Vue.use(Button)
-   Vue.use(Select)
+  const app = createApp()
+  app.use(Button)
+  app.use(Select)
   ```
 
 
 
-- 无状态的组件标记为函数式组件
-
-  ```vue
-  <template functional>
-    <div class="cell">
-      <div v-if="props.value" class="on"></div>
-      <section v-else class="off"></section>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    props: ['value']
-  }
-  </script>
-  ```
-
-  
-
-- 子组件分割
+- 子组件分割策略：较重的状态组件适合拆分
 
   ```vue
   <template>
@@ -199,37 +204,11 @@
   </script>
   ```
 
-  
-
-- 变量本地化
+  但同时也不宜过度拆分组件，尤其是为了所谓组件抽象将一些不需要渲染的组件特意抽出来，组件实例消耗远大于纯dom节点。参考：https://vuejs.org/guide/best-practices/performance.html#avoid-unnecessary-component-abstractions
 
-  ```vue
-  <template>
-    <div :style="{ opacity: start / 300 }">
-      {{ result }}
-    </div>
-  </template>
 
-  <script>
-  import { heavy } from '@/utils'
-  
-  export default {
-    props: ['start'],
-    computed: {
-      base () { return 42 },
-      result () {
-        const base = this.base // 不要频繁引用this.base
-        let result = this.start
-        for (let i = 0; i < 1000; i++) {
-          result += heavy(base)
-        }
-        return result
-      }
-    }
-  }
-  </script>
-  ```
 
-  
+- 服务端渲染/静态网站生成：SSR/SSG
+
+  如果SPA应用有首屏渲染慢的问题，可以考虑SSR、SSG方案优化。参考[SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html) 
 
-- SSR