# MVVM（Model–view–viewmodel）

## 基本流程

1. 获取DOM元素
   ```javascript
   el.cloneNode(true)

//特点：具有移动性，将html中的dom元素剪切成html字符串。

2. 解析元素创建渲染function

3. 构造观察对象

   使用 Object.defineProperty：

   var config = ({
      optionMergeStrategies: Object.create(null),
      ...
   }); // vue的配置
   
   
   strats = config.optionMergeStrategies // 策略，用户策略与默认策略
   
   var configDef = {};
   configDef.get = function() { return config; }; 
   {
      configDef.set = function() {
          warn(
              'Do not replace the Vue.config object, set individual fields instead.'
          );
      };
   }
   Object.defineProperty(Vue, 'config', configDef); // 输出vue实例
   
   
   //关键点1：观察对象的属性需在beforeCreate阶段就已创建，vue实例已经创建完成后添加的属性不享受观察。
   
   //关键点2：观察数组变化需是对象数组[{a:1},{a:4}]可观察
   

4. 使用 computed 和 watch

   • computed：通过get/set函数，实时更新目标，本地响应式。
   • watch：响应式事件触发的回调。

5. 数据实时更新

主要工具：Object.defineProperty

条件渲染

• v-if：不渲染，不适合频繁切换。
• v-show：渲染，但不显示。
  //技巧：可与v-show同时使用，v-if的优先级高于v-show，与位置前后无关。