Vue2知识点总结

1. v-if和v-show的区别

命令	原理	注意事项
v-if	通过是否渲染对应dom控制显隐	不能和v-for一起使用
v-show	通过display属性控制显隐	权限相关不建议使用，手动修改样式可让隐藏元素显示

2. Vue2响应式的实现

vue2的响应式是基于Object.defineProperty实现的，实现读写对象属性触发视图更新
缺点：
深度监听，需要递归到底，比较耗性能;
无法监听属性新增和删除（Vue.set|Vue.delete）
无法原生监听数组，需要特殊处理

const obj = {
  name: "jack",
  address: {
    city: "beijing",
    mail: {
      id: "330001",
    },
  },
  disCount:[15]
};

function updateView() {
  console.log("更新视图");
}

//重写原型监听数组
const oldArrayProperType = Array.prototype;
const ArrayProp = Object.create(oldArrayProperType);
//重写原型方法
["push", "unshift", "pop", "shift"].forEach(function (method) {
  ArrayProp[method] = function () {
    updateView();
    oldArrayProperType[method].call(this, arguments);
  };
});

//重新定义属性，监听起来
function defineReactive(target, key, value) {
  //深度监听
  observer(value);

  Object.defineProperty(target, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        //赋值引用类型，需深度监听
        observer(newValue);

        value = newValue;
        updateView();
      }
    },
  });
}

//监听对象
function observer(target) {
  if (typeof target !== "object" || target == null) {
    return target;
  }

  //数组需要对
  if (Array.isArray(target)) {
    target.__proto__ = ArrayProp;
  }

  for (const key in target) {
    defineReactive(target, key, target[key]);
  }
}

observer(obj);
obj.name;
obj.name = "222"; //更新视图
obj.address.mail.id = "111111111111"; //更新视图
obj.address.mail = { id: "000" }; //更新视图
obj.disCount.push(10)

3. 虚拟DOM

用js模拟真实dom结构,通过计算，以改动最小的方式进行dom渲染

{
    "tag":"div",
    "props":{
        "style":{},
        "id":"container"
    },
    "children":[
        {
            "tag":"ul",
            "props":{
                "style":{},
                "className":"list"
            },
            "children":[
                  {
                      "tag":"li",
                      "children":"list item"
                  }
              ]
        }
    ]
}

4. v-for中为何需要加key属性，且key必须唯一

Vue中数据变化触发DOM重新渲染,key可以提升diff算法效率，减少渲染次数，提高渲染性能。

5. Vue2组件生命周期

6. Vue父子组件生命周期执行顺序

• 父组件 beforeCreate
• 父组件 created
• 父组件 beforeMount
• 子组件 beforeCreate
• 子组件 created
• 子组件 beforeMount
• 子组件 mounted
• 父组件 mounted

更新过程中:

• 父组件 beforeUpdate
• 子组件 beforeUpdate
• 子组件 updated
• 父组件 updated

销毁过程中：

• 父组件 beforeDestroy
• 子组件 beforeDestroy
• 子组件 destroyed
• 父组件 destroyed

7. 描述组件渲染/更新流程

8. MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。ViewModel是连接View和Model的中间件。

• ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
• ViewModel能够监听到视图的变化，并能够通知数据发生变化。

9. data为什么是一个方法

因为export default暴露出去的是一个类，使用到的地方是组件的实例，如果不使用函数返回，会造成多个实例共享同一个属性。