What to see in from Vue

1. Basic instruction:

• v-show
• v-if
• V-else
• v-for
• v-bind Jane (:) vue setter getter methods will be added in the process instance to monitor changes worth
• v-click Jane (@)

2.vue the monitor window events:

　Thanks  smallW 

　According to the change of the window to change the width of the canvas?

   Solution one very common:

• Definition of a recording width attribute data initialization time
  

  Data: { 
      screenWidth: // document.body.clientWidth here is to give to a default value (this is very important) 
  }

• Vue mounted inside the loading hook function resize method

  mounted () {
     const that = this
     window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
         })()
     }
  }

• Monitor changes, changing the size of the

  watch: {
      screenWidth (val) {
            if (!this.timer) {
              this.screenWidth = val
              this.timer = true
              let that = this
              setTimeout(function () {
                  that.screenWidth = that.$store.state.canvasWidth
                  console.log(that.screenWidth)
                  that.init()
                  that.timer = false
              }, 400)
            }
     }
  }

   Solution two:

　　　　When mounted monitor (fast, but generally couples would choose the first)

3.vue source of what some say:

• The life cycle

 

• vue is something new to do what?

1. new a new object
2. The prototype of this new object points to the member object constructor prototype
3. The constructor of this points to the new object
4. Returns a new object

　　Expansion: new a new object, what in the end did? (Interview questions)

1. Instead of manually create a new obj, new'll help you create
2. Not the new obj __proto__ point of the prototype constructor Common, new will help you do it.
3. Constructor this scope will be pointed instance itself.
4. Instead of manually return the new obj, new will help you return.
5. new出来的实例的__proto__会指向构造函数的prototype。构造函数的方法，实例可以直接调用。

•  vue实例化的构造函数在哪？

　　   项目的 vue 文件夹下 core ／ instance ／ index.js （ 感谢 smallW）

         

• Vue 2.0 为什么选用 Flow 进行静态代码检查而不是直接使用 TypeScript？

　　    尤神回复

• vue源码的三要素vm，compiler，watcher
• 核心代码init初始化了什么？

1. 生命周期initLifecycle
2. 事件initEvents
3. 初始化渲染initRender(vm)
4. initInjections
5. initState

　　具体参考：vue.js源码解析四

• Vue实现数据监听以及单向数据流的主要方式：

export function defineReactive(obj, key, val, customSetter, shallow) {
  const dep = new Dep();

  const property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return;
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get;
  const setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  let childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || newVal !== newVal && value !== value) {
        return;
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter();
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify();
    }
  });
}

4.vue源码中的神奇用法：

1. 判断是否为 undefined

   let isUndef = function(v) {
       return v === undefined || v === null
   }

2. 判断是否不为空

   let isDef = function(v) {
       return v !== undefined && v !== null
   } 

3.  判断是否为原始数据类型

   let isPrimitive = function(value) {
     return typeof value === 'string' || typeof value === 'number' ||
     typeof value === 'symbol' || typeof value === 'boolean';
   }

4. 判断是否为 Object 类型

   let isPrimitive = function(value) {
     return obj !== null && typeof obj === 'object';
   }

5. Determine whether the original object

   const _toString = Object.prototype.toString; // object inherits the original method 
   
   the let isPlainObject = function (obj) { 
       return _toString.call (obj) === '[Object Object]'; 
   }

6. To determine whether the object is positive

   const _toString = Object.prototype.toString; // object inherits the original method 
   
   the let isRegExp = function (V) { 
       return _toString.call (V) === '[Object the RegExp]'; 
   }

Vue 5.React and the like, and do first interception route before the jump. Plus method needs to be added in the page and statistical code.