Vue

JSX

• 绑定事件<my-component onInput={val => (form.search = val)}></my-component>
  • 饿了吗的部分特性，会被JSX误认为绑定事件。例如<el-input :on-icon-click='doSome'>正确的的写法<el-input {...{ props:{ onIconClick:doSome }}}>
  • 通过 nativeOn 绑定原生事件nativeOnClick={() => getList()}
  • 最为通用的方法on-visible-change={visibleChange}或nativeOn-click={() => getList()}
• 绑定指令

const loadDirctives = [{
    name: 'loading',
    value: other.loading,
    expression: 'other.loading',
    modifiers: {
        fullscreen: true,
        lock: true
    }
}]
<div {...{ directives: loadDirctives }}></div>

• 全局注册的组件，必须使用短横线命名的方式使用<my-component>

vuex 和 bus

• 以下实现了局部bus
  • 通过mixins混入根组件和子孙组件实现局部状态共享
  • 当根组件初始化时重置状态
  • 支持多个局部变量共存，
  • options可以进行优化已支持function

import Vue from 'vue'
const bus = new Vue({
  data:{
    box:{}
  }
})

export default function(options,key='data'){
  const ret = {
    data(){
      return {
        bus:bus.box
      }
    }
  }
  if(options){
    ret.beforeCreate = () => {
      bus.$set(bus.box,key,JSON.parse(JSON.stringify(options)))
    }
  }
  return ret
}

methods、computed、filter、watch

• methods 当引用的响应值改变时也会重新计算，跟 computed 其实一样
• 从性能来看应该是 filter > computed > methods
• watch 的 deep 是指当前对象指向的下一级对象出现改变时触发监听，例如arr[0].attr = any

data、props

• 对一个本来响应的 data 赋值时，内部的所有值都会具备响应
• 数组除了arr[i] = any和arr.length = nub这两种方式无法响应，其他都可以（2.x）
• props.default、data是函数时，会被当前实例调用，this 指向当前实例。
• 但是 props.default 执行时，data、methods等未初始化，所以无法通过 this 访问到。
• data 在 methods、computed 等初始化后执行，可以通过 this 访问到。

生命周期

• create 是由子到父，mounted 是由父到子
• 两个组件切换，新组件先 created 旧组件才 destroyed

mixin、extends

• extends 只能单链继承