Vue易混淆知识点

• Vue生命周期
  常用钩子函数：
  beforeCreate、created(this.$data)、beforeMount(this.$el)、mouted(this.$el replaced)
  
  Alt text
• Vue中Component的data属性必须为Function
  解释:
  如果不采用Function，所有的Component实例都会共享一个data对象。那么，在一个组件中对data的修改，将会影响到所有的组件实例。
• Vue中v-for注意事项
  默认采用in-place-patch策略进行渲染，当包含form表单元素和子组件时要当心出错(利用key属性强制重绘)。
• Vue中computed与methods对比
  对于计算属性computed，我们都可以通过调用method达到相同效果。但是区别在于采用computed计算属性，我们可以对属性进行缓存，只有在依赖属性change时，才会对计算属性进行重新计算。
  eg:

//该计算属性不再发生变化，因为Date.now()不是响应式依赖
computed:{
    now:function(){
        return Date.now()
    }
}

使用场景：
对于性能开销比较大的属性，适合采用computed属性。
实现原理：

// 通过for..in.. 遍历computed属性的所有子属性，然后利用Object.defineProperty设置getter属性
    Vue.prototype._initComputed = function () {
      var computed = this.$options.computed;
      if (computed) {
        for (var key in computed) {
          var userDef = computed[key];
          var def = {
            enumerable: true,
            configurable: true
          };
          if (typeof userDef === 'function') {
            def.get = makeComputedGetter(userDef, this);
            def.set = noop;
          } else {
            def.get = userDef.get ? userDef.cache !== false ? makeComputedGetter(userDef.get, this) : bind(userDef.get, this) : noop;
            def.set = userDef.set ? bind(userDef.set, this) : noop;
          }
          Object.defineProperty(this, key, def);
        }
      }
    };

• Vue中directive与component的区别以及使用场景
  在Vue2.0中，对代码复用和抽象是组件，但是如果需要对纯DOM元素进行底层操作，就需要使用指令。
  常用钩子函数：
  bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
  inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
  update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）
  componentUpdated:被绑定元素所在模板完成一次更新周期时调用
  unbind:只调用一次， 指令与元素解绑时调用
• Vue中mixin与extend区别 参考
  全局注册混合对象，会影响到所有之后创建的vue实例，而Vue.extend对单个实例进行扩展。
• 注意，不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this不会像预想的一样是 Vue 实例，而是 this.myMethod未被定义。
• Vue2.0取消$dispatch和$broadcastapi。因为基于组件树的时间流比较混乱，而且不利于扩展。在Vue2.0中推荐使用new Vue()创建eventHub进行事件通信，而且可实现兄弟组件通信。
• Mustache不能在html属性中使用，推荐使用v-bind指令