更新Vue

07.Vue.md

@@ -29,6 +29,11 @@ Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对
 
 **Compile（指令解析器）** : Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图
 
+
+
+传送门：☞ [20分钟吃透Diff算法核心原理](https://juejin.cn/post/6994959998283907102#heading-2)
+
+
 ### 谈谈对vue生命周期的理解？
 
 每个`Vue`实例在创建时都会经过一系列的初始化过程，`vue`的生命周期钩子，就是说在达到某一阶段或条件时去触发的函数，目的就是为了完成一些动作或者事件
@@ -95,6 +100,65 @@ Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对
 
     当 Vue.js 用 `v-for` 更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。重复的key会造成渲染错误。
 
+
+### 数组扁平化转换
+
+在说到模版编译的时候，有可能会提到数组的转换，一般就用递归处理
+将 [1,2,3,[4,5]] 转换成 
+```
+{
+    children:[
+        {
+            value:1
+        },
+        {
+            value:2
+        },
+        {
+            value:3
+        },
+        {
+            children:[
+                {
+                    value:4
+                },
+                {
+                    value:5
+                }
+            ]
+        },
+    ]
+}
+```
+
+```js
+// 测试数组
+var arr =[1,2，3，[4,5]];
+// 转换函数
+function convert(arr){
+    //准备一个接收结果数组
+    var result = [];
+    // 遍历传入的 arr 的每一项
+    for(let i=0;i<arr.length;i++){
+        //如果遍历到的数字是number，直接放进入
+        if(typeof arr[i] == 'number'){
+            result.push({
+                value:arr[i]
+            });
+        } else if(Array.isArray(arr[i])){
+            //如果遍历到这个项目是数组，那么就递归
+            result.push({
+                children: convert(arr[i])
+            });
+        }
+    }
+    return result;
+}
+
+var o = convert(arr);
+console.log(o);
+```
+
 ### vue组件的通信方式
 
 -   `props`/`$emit` 父子组件通信