Merge branch 'master' of github.com:57code/vue-interview

57code · 57code · commit 17e76180dd8d · 2022-06-01T10:03:37.000+08:00
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 ## 目录
 1. [v-if和v-for哪个优先级更高？](public/01-vif-vfor/README.md)
 2. [你知道key的作用吗？](public/02-key/README.md)
-3. [能说说双向绑定以及它的实现原理吗？](public/03/README.md)
+3. [能说说双向绑定以及它的实现原理吗？](public/03-v-model/README.md)
 4. [你了解diff算法吗？](public/04-diff/README.md)
 5. [vue中组件之间的通信方式？](public/05-communication/README.md)
 6. [简单说一说你对vuex理解？](public/06/README.md)
diff --git a/public/01-vif-vfor/README.md b/public/01-vif-vfor/README.md
@@ -1,6 +1,6 @@
 ## v-if和v-for哪个优先级更高？
 
-分析：此题考查常识，文档中曾有[详细说明](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81)；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。
+分析：此题考查常识，文档中曾有详细说明[v2](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81)|[v3](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。
 
 
 
@@ -18,7 +18,7 @@
 
 回答范例：
 
-1. v-for优先于v-if被解析
+1. 在 `Vue 2` 中，`v-for` 优先于 `v-if` 被解析；但在 `Vue 3` 中，则完全相反，`v-if` 的优先级高于 `v-for`。
 
 2. 我曾经做过实验，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件
 
@@ -40,7 +40,7 @@
 
 知其所以然：
 
-做个测试，[01.html](./01.html)
+在 `Vue 2` 中做个测试，[test.html](./test.html)
 两者同级时，渲染函数如下：
 
 
@@ -51,7 +51,30 @@ with(this){return _c('div',{attrs:{"id":"app"}},_l((items),function(item){return
 }
 ```
 
+在 `Vue 3` 中做个测试，[test-v3.html](./test-v3.html)
+两者同级时，渲染函数如下：
+
+```js
+(function anonymous(
+) {
+const _Vue = Vue
+
+return function render(_ctx, _cache) {
+  with (_ctx) {
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, toDisplayString: _toDisplayString, createCommentVNode: _createCommentVNode } = _Vue
+
+    return shouldShowUsers
+      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(items, (item) => {
+          return (_openBlock(), _createElementBlock("div", { key: item.id }, _toDisplayString(item.name), 1 /* TEXT */))
+        }), 128 /* KEYED_FRAGMENT */))
+      : _createCommentVNode("v-if", true)
+  }
+}
+})
+```
 
 
-源码中找答案compiler/codegen/index.js 
+源码中找答案：
+`Vue 2`：[compiler/codegen/index.js](https://github1s.com/vuejs/vue/blob/dev/src/compiler/codegen/index.js#L65-L69)
+`Vue 3`：[compiler-core/src/codegen.ts](https://github1s.com/vuejs/core/blob/main/packages/compiler-core/src/codegen.ts#L586-L587)
 
diff --git a/public/01-vif-vfor/test-v3.html b/public/01-vif-vfor/test-v3.html
@@ -8,25 +8,34 @@
 </head>
 
 <body>
-  <div id="app">
-    <!-- 过滤列表中项目 -->
+  <!-- 过滤列表中项目 -->
+  <!-- 浏览器控制台会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'isActive') -->
+  <!-- <div id="app">
     <div v-for="item in items" :key="item.id" v-if="item.isActive">
       {{ item.name }}
     </div>
+  </div> -->
+
+  <!-- 避免渲染应该被隐藏的列表 -->
+  <div id="app">
+    <div v-for="item of items" :key="item.id" v-if="shouldShowUsers">
+      {{ item.name }}
+    </div>
   </div>
   <script src="http://unpkg.com/vue@3"></script>
   <script>
     const app = Vue.createApp({
       data() {
         return {
+          shouldShowUsers: true,
           items: [
             { id: 1, name: '张三', isActive: true },
             { id: 2, name: '李四', isActive: false }
           ]
         }
       },
     }).mount('#app')
-    console.log(app.$options.render);   
+    console.log(app.$options.render);
   </script>
 </body>
 
