feat:vue知识点更新

docs/.vitepress/sidebar.config.json

@@ -1 +1 @@
-[{"collapsible":true,"text":"JS.TS","items":[{"collapsible":true,"text":"ES6","items":[{"text":"index","link":"/JS.TS/ES6/index.md"},{"text":"Iterator","link":"/JS.TS/ES6/Iterator.md"},{"text":"promise","link":"/JS.TS/ES6/promise.md"},{"text":"Symbol","link":"/JS.TS/ES6/Symbol.md"},{"text":"解构赋值","link":"/JS.TS/ES6/解构赋值.md"},{"text":"运算符","link":"/JS.TS/ES6/运算符.md"}]},{"text":"JS上下文和执行栈","link":"/JS.TS/JS上下文和执行栈.md"},{"collapsible":true,"text":"TS","items":[{"text":"is","link":"/JS.TS/TS/is.md"},{"text":"索引","link":"/JS.TS/TS/索引.md"}]},{"collapsible":true,"text":"基础","items":[{"text":"Eventloop","link":"/JS.TS/基础/Eventloop.md"},{"text":"Js中的map和weakMap","link":"/JS.TS/基础/Js中的map和weakMap.md"},{"text":"new操作符","link":"/JS.TS/基础/new操作符.md"},{"text":"一文搞懂map函数","link":"/JS.TS/基础/一文搞懂map函数.md"},{"text":"垃圾回收","link":"/JS.TS/基础/垃圾回收.md"}]},{"collapsible":true,"text":"设计模式","items":[{"text":"发布订阅模式","link":"/JS.TS/设计模式/发布订阅模式.md"}]}]},{"collapsible":true,"text":"React","items":[{"text":"index","link":"/React/index.md"},{"collapsible":true,"text":"ReactHooks","items":[{"text":"useCallback","link":"/React/ReactHooks/useCallback.md"},{"text":"useContext","link":"/React/ReactHooks/useContext.md"},{"text":"useEffect","link":"/React/ReactHooks/useEffect.md"},{"text":"useRef","link":"/React/ReactHooks/useRef.md"},{"text":"useState","link":"/React/ReactHooks/useState.md"}]},{"text":"redux","link":"/React/redux.md"}]},{"collapsible":true,"text":"tips","items":[{"text":"2023.3.5","link":"/tips/2023.3.5.md"}]},{"collapsible":true,"text":"Vue","items":[{"collapsible":true,"text":"CSS","items":[{"text":"scroll","link":"/Vue/CSS/scroll.md"}]},{"collapsible":true,"text":"源码分析","items":[{"text":"VNode与diff算法","link":"/Vue/源码分析/VNode与diff算法.md"}]},{"collapsible":true,"text":"组件通信","items":[{"text":"Api-attrs","link":"/Vue/组件通信/Api-attrs.md"},{"text":"Api-parent","link":"/Vue/组件通信/Api-parent.md"},{"text":"Api-props","link":"/Vue/组件通信/Api-props.md"},{"text":"Api-provide","link":"/Vue/组件通信/Api-provide.md"}]}]},{"collapsible":true,"text":"开发总结","items":[{"text":"Adobe-pr插件","link":"/开发总结/Adobe-pr插件.md"},{"collapsible":true,"text":"canvas","items":[{"text":"canvas","link":"/开发总结/canvas/canvas.md"}]},{"text":"github-deploy","link":"/开发总结/github-deploy.md"},{"text":"v-for和v-if","link":"/开发总结/v-for和v-if.md"},{"collapsible":true,"text":"常用的库","items":[{"text":"css","link":"/开发总结/常用的库/css.md"}]}]},{"collapsible":true,"text":"算法","items":[{"collapsible":true,"text":"二叉树","items":[{"text":"层序遍历","link":"/算法/二叉树/层序遍历.md"}]},{"collapsible":true,"text":"面试算法题","items":[{"text":"1.15七牛云春招笔试题","link":"/算法/面试算法题/1.15七牛云春招笔试题.md"},{"text":"1.7字节","link":"/算法/面试算法题/1.7字节.md"}]}]},{"collapsible":true,"text":"计算机基础","items":[{"collapsible":true,"text":"git","items":[{"text":"git规范","link":"/计算机基础/git/git规范.md"},{"text":"git设置两个ssh密钥","link":"/计算机基础/git/git设置两个ssh密钥.md"},{"text":"index","link":"/计算机基础/git/index.md"},{"text":"tips","link":"/计算机基础/git/tips.md"},{"collapsible":true,"text":"命令","items":[{"text":"init","link":"/计算机基础/git/命令/init.md"},{"text":"merge","link":"/计算机基础/git/命令/merge.md"},{"text":"常用","link":"/计算机基础/git/命令/常用.md"}]},{"collapsible":true,"text":"场景及解决方案","items":[{"text":"发版","link":"/计算机基础/git/场景及解决方案/发版.md"},{"text":"开发新功能","link":"/计算机基础/git/场景及解决方案/开发新功能.md"},{"text":"紧急bug","link":"/计算机基础/git/场景及解决方案/紧急bug.md"}]}]},{"text":"HTTP","link":"/计算机基础/HTTP.md"},{"text":"index","link":"/计算机基础/index.md"}]},{"collapsible":true,"text":"面试","items":[{"collapsible":true,"text":"CZ前端","items":[{"text":"HTML+CSS","link":"/面试/CZ前端/HTML+CSS.md"},{"collapsible":true,"text":"JS基础","items":[{"text":"作用域和闭包","link":"/面试/CZ前端/JS基础/作用域和闭包.md"},{"text":"原型和原型链","link":"/面试/CZ前端/JS基础/原型和原型链.md"},{"text":"变量类型和计算","link":"/面试/CZ前端/JS基础/变量类型和计算.md"},{"text":"异步","link":"/面试/CZ前端/JS基础/异步.md"}]}]},{"collapsible":true,"text":"NONI","items":[{"collapsible":true,"text":"JS","items":[{"collapsible":true,"text":"ES6","items":[]},{"collapsible":true,"text":"JS基础","items":[{"text":"new操作符实现原理","link":"/面试/NONI/JS/JS基础/new操作符实现原理.md"},{"text":"数组原生方法","link":"/面试/NONI/JS/JS基础/数组原生方法.md"}]}]},{"collapsible":true,"text":"Vue","items":[]}]},{"collapsible":true,"text":"前端","items":[{"text":"flexandgrid","link":"/面试/前端/flexandgrid.md"},{"collapsible":true,"text":"HTTP","items":[{"text":"HTTP的优先级","link":"/面试/前端/HTTP/HTTP的优先级.md"}]},{"collapsible":true,"text":"url到页面","items":[{"text":"总章","link":"/面试/前端/url到页面/总章.md"}]},{"collapsible":true,"text":"事件","items":[{"text":"事件循环","link":"/面试/前端/事件/事件循环.md"},{"text":"事件机制","link":"/面试/前端/事件/事件机制.md"}]},{"text":"客户端存储","link":"/面试/前端/客户端存储.md"},{"text":"跨域","link":"/面试/前端/跨域.md"}]}]}]
+[{"collapsible":true,"text":"JS.TS","items":[{"collapsible":true,"text":"ES6","items":[{"text":"index","link":"/JS.TS/ES6/index.md"},{"text":"Iterator","link":"/JS.TS/ES6/Iterator.md"},{"text":"promise","link":"/JS.TS/ES6/promise.md"},{"text":"Symbol","link":"/JS.TS/ES6/Symbol.md"},{"text":"解构赋值","link":"/JS.TS/ES6/解构赋值.md"},{"text":"运算符","link":"/JS.TS/ES6/运算符.md"}]},{"text":"JS上下文和执行栈","link":"/JS.TS/JS上下文和执行栈.md"},{"collapsible":true,"text":"TS","items":[{"text":"is","link":"/JS.TS/TS/is.md"},{"text":"索引","link":"/JS.TS/TS/索引.md"}]},{"collapsible":true,"text":"基础","items":[{"text":"Eventloop","link":"/JS.TS/基础/Eventloop.md"},{"text":"Js中的map和weakMap","link":"/JS.TS/基础/Js中的map和weakMap.md"},{"text":"new操作符","link":"/JS.TS/基础/new操作符.md"},{"text":"一文搞懂map函数","link":"/JS.TS/基础/一文搞懂map函数.md"},{"text":"垃圾回收","link":"/JS.TS/基础/垃圾回收.md"}]},{"collapsible":true,"text":"设计模式","items":[{"text":"发布订阅模式","link":"/JS.TS/设计模式/发布订阅模式.md"}]}]},{"collapsible":true,"text":"React","items":[{"text":"index","link":"/React/index.md"},{"collapsible":true,"text":"ReactHooks","items":[{"text":"useCallback","link":"/React/ReactHooks/useCallback.md"},{"text":"useContext","link":"/React/ReactHooks/useContext.md"},{"text":"useEffect","link":"/React/ReactHooks/useEffect.md"},{"text":"useRef","link":"/React/ReactHooks/useRef.md"},{"text":"useState","link":"/React/ReactHooks/useState.md"}]},{"text":"redux","link":"/React/redux.md"}]},{"collapsible":true,"text":"tips","items":[{"text":"2023.3.5","link":"/tips/2023.3.5.md"}]},{"collapsible":true,"text":"Vue","items":[{"collapsible":true,"text":"CSS","items":[{"text":"scroll","link":"/Vue/CSS/scroll.md"}]},{"collapsible":true,"text":"源码分析","items":[{"text":"VNode与diff算法","link":"/Vue/源码分析/VNode与diff算法.md"}]},{"collapsible":true,"text":"组件通信","items":[{"text":"Api-attrs","link":"/Vue/组件通信/Api-attrs.md"},{"text":"Api-parent","link":"/Vue/组件通信/Api-parent.md"},{"text":"Api-props","link":"/Vue/组件通信/Api-props.md"},{"text":"Api-provide","link":"/Vue/组件通信/Api-provide.md"}]}]},{"collapsible":true,"text":"开发总结","items":[{"text":"Adobe-pr插件","link":"/开发总结/Adobe-pr插件.md"},{"collapsible":true,"text":"canvas","items":[{"text":"canvas","link":"/开发总结/canvas/canvas.md"}]},{"text":"github-deploy","link":"/开发总结/github-deploy.md"},{"text":"v-for和v-if","link":"/开发总结/v-for和v-if.md"},{"collapsible":true,"text":"常用的库","items":[{"text":"css","link":"/开发总结/常用的库/css.md"}]}]},{"collapsible":true,"text":"算法","items":[{"collapsible":true,"text":"二叉树","items":[{"text":"层序遍历","link":"/算法/二叉树/层序遍历.md"}]},{"collapsible":true,"text":"面试算法题","items":[{"text":"1.15七牛云春招笔试题","link":"/算法/面试算法题/1.15七牛云春招笔试题.md"},{"text":"1.7字节","link":"/算法/面试算法题/1.7字节.md"}]}]},{"collapsible":true,"text":"计算机基础","items":[{"collapsible":true,"text":"git","items":[{"text":"git规范","link":"/计算机基础/git/git规范.md"},{"text":"git设置两个ssh密钥","link":"/计算机基础/git/git设置两个ssh密钥.md"},{"text":"index","link":"/计算机基础/git/index.md"},{"text":"tips","link":"/计算机基础/git/tips.md"},{"collapsible":true,"text":"命令","items":[{"text":"init","link":"/计算机基础/git/命令/init.md"},{"text":"merge","link":"/计算机基础/git/命令/merge.md"},{"text":"常用","link":"/计算机基础/git/命令/常用.md"}]},{"collapsible":true,"text":"场景及解决方案","items":[{"text":"发版","link":"/计算机基础/git/场景及解决方案/发版.md"},{"text":"开发新功能","link":"/计算机基础/git/场景及解决方案/开发新功能.md"},{"text":"紧急bug","link":"/计算机基础/git/场景及解决方案/紧急bug.md"}]}]},{"text":"HTTP","link":"/计算机基础/HTTP.md"},{"text":"index","link":"/计算机基础/index.md"}]},{"collapsible":true,"text":"面试","items":[{"collapsible":true,"text":"CZ前端","items":[{"text":"HTML+CSS","link":"/面试/CZ前端/HTML+CSS.md"},{"collapsible":true,"text":"JS基础","items":[{"text":"作用域和闭包","link":"/面试/CZ前端/JS基础/作用域和闭包.md"},{"text":"原型和原型链","link":"/面试/CZ前端/JS基础/原型和原型链.md"},{"text":"变量类型和计算","link":"/面试/CZ前端/JS基础/变量类型和计算.md"},{"text":"异步","link":"/面试/CZ前端/JS基础/异步.md"}]}]},{"collapsible":true,"text":"NONI","items":[{"collapsible":true,"text":"JS","items":[{"collapsible":true,"text":"ES6","items":[]},{"collapsible":true,"text":"JS基础","items":[{"text":"DOM和BOM","link":"/面试/NONI/JS/JS基础/DOM和BOM.md"},{"text":"new操作符实现原理","link":"/面试/NONI/JS/JS基础/new操作符实现原理.md"},{"text":"数组原生方法","link":"/面试/NONI/JS/JS基础/数组原生方法.md"}]}]},{"collapsible":true,"text":"Vue","items":[{"text":"v-if和v-for同时使用问题","link":"/面试/NONI/Vue/v-if和v-for同时使用问题.md"}]}]},{"collapsible":true,"text":"前端","items":[{"text":"flexandgrid","link":"/面试/前端/flexandgrid.md"},{"collapsible":true,"text":"HTTP","items":[{"text":"HTTP的优先级","link":"/面试/前端/HTTP/HTTP的优先级.md"}]},{"collapsible":true,"text":"url到页面","items":[{"text":"总章","link":"/面试/前端/url到页面/总章.md"}]},{"collapsible":true,"text":"事件","items":[{"text":"事件循环","link":"/面试/前端/事件/事件循环.md"},{"text":"事件机制","link":"/面试/前端/事件/事件机制.md"}]},{"text":"客户端存储","link":"/面试/前端/客户端存储.md"},{"text":"跨域","link":"/面试/前端/跨域.md"}]}]}]

docs/面试/NONI/Vue/v-if和v-for同时使用问题.md

@@ -0,0 +1,111 @@
+# v-if和v-for同时使用问题
+
+在vue2的官方文档中提到了不推荐v-if和v-for同时使用，给出的解释是在两者中，v-for具有比v-if更高的优先级（vue2）。
+
+## 实例
+
+```html
+<ul>
+ <li
+  v-for="user in users"
+  v-if="user.isActive"
+  :key="user.id"
+ >
+  {{ user.name }}
+ </li>
+</ul>
+```
+
+当 Vue 处理指令时，`v-for` 比 `v-if` 具有更高的优先级，因此上面的代码将会经过如下运算：
+
+```js
+this.users.map(function (user) {
+ if (user.isActive) {
+  return user.name
+ }
+})
+```
+
+## 不推荐使用原因
+
+如果`v-for` 和 `v-if`同时使用， 会导致页面可能只要渲染一小部分用户的元素，但也会在每次重新渲染的时候遍历整个列表的情况。如果有1000个元素，但只有1个元素符合`v-if`的条件，最终只会渲染这个符合条件的元素，那么就浪费了999个`v-if`的计算。
+
+
+
+## 替代方法
+
+### 方法一
+
+以上一个例子为例，将其更换为在一个计算属性上遍历：
+
+```html
+<ul>
+    <li
+  v-for="user in activeUsers"
+  :key="user.id"
+ >
+  {{ user.name }}
+	</li>
+</ul>
+```
+
+```js
+computed: {
+ activeUsers: function () {
+  return this.users.filter(function (user) {
+   return user.isActive
+  })
+ }
+}
+```
+
+#### 适用场景
+
+该方法在计算属性中将列表过滤，在`v-for`中直接使用过滤后的列表，更倾向于使用在当需要对数据进行复杂的处理或计算的情况，使用计算属性可以方便地将处理逻辑封装起来，使模板更加清晰简洁，并且计算属性在处理数据的同时能够提高页面性能。
+
+#### 优点
+
+- 过滤后的列表只会在 `users` 数组发生相关变化时才被重新运算，过滤更高效。
+- 使用 `v-for="user in activeUsers"` 之后，我们在渲染的时候只遍历符合条件的元素，渲染更高效。
+- 将渲染页面的逻辑和业务逻辑分离开来，使它们彼此独立，可维护性 (对逻辑的更改和扩展) 更强。
+
+#### 缺点
+
+- 对于较大的数组，计算属性可能会影响性能。因为每当计算属性被访问时，都会重新遍历整个`users`数组。
+
+### 方法二
+
+通过将 `v-if` 移动到容器元素ul上，不会对列表中的每个元素检查是否符合`v-if`的条件，只需要检查容器元素是否符合展示条件，且不会在条件为否的时候运算 `v-for`。如果没有容器元素，则可以在外层嵌套`template`，在这层进行`v-if`的判断。
+
+```html
+<ul v-if="shouldShowUsers">
+ <li
+  v-for="user in users"
+  :key="user.id"
+ />
+  {{ user.name }}
+ </li>
+</ul>
+
+```
+
+#### 适用场景
+
+该方法避免了渲染本应该被隐藏的列表。如果需要根据某个条件动态渲染一组元素时，可以使用`v-if`指令。
+
+#### 优点
+
+- 使用`v-if`指令可以更加灵活地控制元素的显示和隐藏，可以根据需要动态地添加或删除DOM元素。
+- 在容器元素上使用`v-if`可以提高页面性能，因为只有在`shouldShowUsers`为`true`时才会渲染列表，而不是在每个列表项上都进行判断。
+
+#### 缺点
+
+- 在模板中嵌套过多的指令可能会使代码变得难以理解和维护。
+
+
+
+## 总结
+
+- 在vue2中，不要把`v-if` 和 `v-for` 同时用在同一个元素上，会带来性能上的浪费，即每次渲染都会先循环再进行条件的判断。
+- 替代方法一，可通过计算属性`computed`提前过滤掉那些不需要显示的项来实现最终效果。
+- 替代方法二，可通过在外层添加`v-if`判断，内部进行`v-for`循环的方法来实现最终效果。