update: 25-37题

Author: yt0379

README.md

@@ -34,6 +34,19 @@
 22. [说说从 template 到 render 处理过程](public/22-template-render/README.md)
 23. [如果让你从零写一个vue路由，说说你的思路](public/14-router/README.md)
 24. [Vue 3.0的设计目标是什么？做了哪些优化?](public/24-v3-design/README.md)
+25. [你了解哪些Vue性能优化方法？](public/25-performance/README.md)
+26. [Vue组件为什么只能有一个根元素?](public/26-one-root/README.md)
+27. [你有使用过vuex的module吗？](public/27-vuex-module/README.md)
+28. [怎么实现路由懒加载呢？](public/28-route-lazy-load/README.md)
+29. [ref和reactive异同](public/29-ref-reactive/README.md)
+30. [watch和watchEffect异同](public/30-watch-watchEffect/README.md)
+31. [SPA、SSR的区别是什么](public/31-SPA-SSR/README.md)
+32. [你写过自定义指令吗？使用场景有哪些？](public/32-directive/README.md)
+33. [说下\$attrs和$listeners的使用场景](public/33-%24attrs/README.md)
+34. [v-once的使用场景有哪些？](public/34-v-once/README.md)
+35. [什么是递归组件？举个例子说明下？](public/35-recursive-component/README.md)
+36. [异步组件是什么？使用场景有哪些？](public/36-async-component/README.md)
+37. [你是怎么处理vue项目中的错误的？](public/37-error-handle/README.md)
 
 ### 欢迎把你想听的题目以issue的方式提给我
 ### 欢迎你加入村长的项目已pr形式提交题目和解答

public/25-performance/README.md

@@ -0,0 +1,225 @@
+## 25-你了解哪些Vue性能优化方法？
+
+### 分析
+
+这是一道综合实践题目，写过一定数量的代码之后小伙伴们自然会开始关注一些优化方法，答得越多肯定实践经验也越丰富，是很好的题目。
+
+### 答题思路：
+
+根据题目描述，这里主要探讨Vue代码层面的优化
+
+---
+
+### 回答范例
+
+- 我这里主要从Vue代码编写层面说一些优化手段，例如：代码分割、服务端渲染、组件缓存、长列表优化等
+
+- 最常见的路由懒加载：有效拆分App尺寸，访问时才异步加载
+
+  ```js
+  const router = createRouter({
+    routes: [
+      // 借助webpack的import()实现异步组件
+      { path: '/foo', component: () => import('./Foo.vue') }
+    ]
+  })
+  ```
+
+
+---
+
+- `keep-alive`缓存页面：避免重复创建组件实例，且能保留缓存组件状态
+
+  ```vue
+  <router-view v-slot="{ Component }">
+  	<keep-alive>
+    	<component :is="Component"></component>
+    </keep-alive>
+  </router-view>
+  ```
+
+
+---
+
+- 使用`v-show`复用DOM：避免重复创建组件
+
+  ```vue
+  <template>
+    <div class="cell">
+      <!-- 这种情况用v-show复用DOM，比v-if效果好 -->
+      <div v-show="value" class="on">
+        <Heavy :n="10000"/>
+      </div>
+      <section v-show="!value" class="off">
+        <Heavy :n="10000"/>
+      </section>
+    </div>
+  </template>
+  ```
+
+
+---
+
+- `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(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>
+  ```
+
+  按条件跳过更新时使用`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
+
+
+---
+
+- 长列表性能优化：如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
+
+  ```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-grid](https://github.com/rocwang/vue-virtual-scroll-grid)
+
+
+---
+
+- 事件的销毁：Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 
+
+  ```js
+  export default {
+    created() {
+      this.timer = setInterval(this.refresh, 2000)
+    },
+    beforeUnmount() {
+      clearInterval(this.timer)
+    }
+  }
+  ```
+
+
+---
+
+- 图片懒加载
+
+  对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
+
+  ```html
+  <img v-lazy="/static/img/1.png">
+  ```
+
+  > 参考项目：[vue-lazyload](https://github.com/hilongjw/vue-lazyload)
+
+
+---
+
+- 第三方插件按需引入
+
+  像`element-plus`这样的第三方组件库可以按需引入避免体积太大。
+
+  ```js
+  import { createApp } from 'vue';
+  import { Button, Select } from 'element-plus';
+  
+  const app = createApp()
+  app.use(Button)
+  app.use(Select)
+  ```
+
+
+---
+
+- 子组件分割策略：较重的状态组件适合拆分
+
+  ```vue
+  <template>
+    <div>
+      <ChildComp/>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    components: {
+      ChildComp: {
+        methods: {
+          heavy () { /* 耗时任务 */ }
+        },
+        render (h) {
+          return h('div', this.heavy())
+        }
+      }
+    }
+  }
+  </script>
+  ```
+
+  但同时也不宜过度拆分组件，尤其是为了所谓组件抽象将一些不需要渲染的组件特意抽出来，组件实例消耗远大于纯dom节点。参考：https://vuejs.org/guide/best-practices/performance.html#avoid-unnecessary-component-abstractions
+
+
+---
+
+- 服务端渲染/静态网站生成：SSR/SSG
+
+  如果SPA应用有首屏渲染慢的问题，可以考虑SSR、SSG方案优化。参考[SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html) 

public/26-one-root/README.md

@@ -0,0 +1,85 @@
+## 26-Vue组件为什么只能有一个根元素?
+
+这题现在有些落伍，`vue3`已经不用一个根了。因此这题目很有说头！
+
+---
+
+### 体验一下
+
+vue2直接报错，test-v2.html
+
+```js
+new Vue({
+  components: {
+    comp: {
+      template: `
+        <div>root1</div>
+        <div>root2</div>
+      `
+    }
+  }
+}).$mount('#app')
+```
+
+<img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h2tpywiwwkj20ws0hm0va.jpg" style="zoom:33%;" />
+
+---
+
+vue3中没有问题，test-v3.html
+
+```js
+Vue.createApp({
+  components: {
+    comp: {
+      template: `
+        <div>root1</div>
+        <div>root2</div>
+      `
+    }
+  }
+}).mount('#app')
+```
+
+<img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h2tq28fsfoj20xu0biq3x.jpg" style="zoom:33%;" />
+
+---
+
+### 回答思路
+
+- 给一条自己的结论
+- 解释为什么会这样
+- `vue3`解决方法原理
+
+---
+
+### 范例
+
+- `vue2`中组件确实只能有一个根，但`vue3`中组件已经可以多根节点了。
+- 之所以需要这样是因为`vdom`是一颗单根树形结构，`patch`方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个`vdom`，自然应该满足这个要求。
+- `vue3`中之所以可以写多个根节点，是因为引入了`Fragment`的概念，这是一个抽象的节点，如果发现组件是多根的，就创建一个Fragment节点，把多个根节点作为它的children。将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新。
+
+---
+
+### 知其所以然
+
+- patch方法接收单根vdom：
+
+  https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L354-L355
+
+  ```ts
+  // 直接获取type等，没有考虑数组的可能性
+  const { type, ref, shapeFlag } = n2
+  ```
+
+- patch方法对Fragment的处理：
+
+  https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L1091-L1092
+
+  ```ts
+  // a fragment can only have array children
+  // since they are either generated by the compiler, or implicitly created
+  // from arrays.
+  mountChildren(n2.children as VNodeArrayChildren, container, ...)
+  ```
+
+  

public/27-vuex-module/README.md

@@ -0,0 +1,58 @@
+## 27-你有使用过vuex的module吗？
+
+这是基本应用能力考察，稍微上点规模的项目都要拆分vuex模块便于维护。
+
+---
+
+### 体验
+
+https://vuex.vuejs.org/zh/guide/modules.html
+
+```js
+const moduleA = {
+  state: () => ({ ... }),
+  mutations: { ... },
+  actions: { ... },
+  getters: { ... }
+}
+const moduleB = {
+  state: () => ({ ... }),
+  mutations: { ... },
+  actions: { ... }
+}
+const store = createStore({
+  modules: {
+    a: moduleA,
+    b: moduleB
+  }
+})
+store.state.a // -> moduleA 的状态
+store.state.b // -> moduleB 的状态
+store.getters.c // -> moduleA里的getters
+store.commit('d') // -> 能同时触发子模块中同名mutation
+store.dispatch('e') // -> 能同时触发子模块中同名action
+```
+
+---
+
+### 思路
+
+1. 概念和必要性
+2. 怎么拆
+3. 使用细节
+4. 优缺点
+
+---
+
+### 范例
+
+1. 用过module，项目规模变大之后，单独一个store对象会过于庞大臃肿，通过模块方式可以拆分开来便于维护
+2. 可以按之前规则单独编写子模块代码，然后在主文件中通过`modules`选项组织起来：`createStore({modules:{...}})`
+3. 不过使用时要注意访问子模块状态时需要加上注册时模块名：`store.state.a.xxx`，但同时`getters`、`mutations`和`actions`又在全局空间中，使用方式和之前一样。如果要做到完全拆分，需要在子模块加上`namespace`选项，此时再访问它们就要加上命名空间前缀。
+4. 很显然，模块的方式可以拆分代码，但是缺点也很明显，就是使用起来比较繁琐复杂，容易出错。而且类型系统支持很差，不能给我们带来帮助。pinia显然在这方面有了很大改进，是时候切换过去了。
+
+---
+
+### 可能的追问
+
+1. 用过pinia吗？都做了哪些改善？