温故而知新之VUE（五）

混入

混入mixins是一种分发vue组件中可复用功能的非常灵活的方式

// 定义一个混入对象
var myMixin = {
  created: function(){
      this.hello()
  },  
  methods: {
    hello: function(){
      console.log('hello')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
    mixins: [myMixin]
})

var component = new Component() // 'hello'

#选项合并
当组件和混入对象有同名选项时，会以恰当的方式混入

• 数据对象在内部会进行浅合并（一层属性深度），在和组件的数据发生冲突时，以组件数据优先
• 同名钩子函数将混合为一个数组，因此都会被调用，混入对象的钩子会先调用
• 值为对象的选项，如methods， components，directives，将被混合为同一个对象，对象键名冲突时，以组件对象的键值对为先
  注意：Vue.extend（）也使用同一的策略进行合并

全局混入

一旦使用全局混入对象，将会影响到所有之后创建的Vue实例

Vue.mixin({
  
})

谨慎使用全局混入

自定义指令

// 注册全局指令v-focus
Vue.directive('focus', {
  // 当被绑定元素插入DOM中时
  inserted: function(el){
      el.focus()
    }
})

// 使用
<input v-foucs />

#钩子函数

• bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
• update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind 只调用一次，指令与元素解绑时调用

渲染函数&JSX

Vue.component('my-component', {
   render: function(createElement){
      return createElement(
        'h1',
        {...}
    )
  }
})

createElement参数

createElement(
  'div', // 必填，标签名，组件选项对象
  {
    
  } ,// 包含模板相关属性的数据对象
  [
    
   ] // 子虚拟节点
)

h作createElement的别名

深入data对象

函数式组件

functional: true

插件

• 添加全局方法或属性
  Vue.xx=function(){}
• 添加全局资源，指令、过滤器等
• 通过全局mixin方法添加一些组件选项
• 添加Vue实例方法，Vue.prototype上添加
  #使用插件
  Vue.use(), 在new Vue()之前完成
  #开发插件
  install

MyPlugin.install = function(Vue, options){
  
}

过滤器

{{ message | capttalize }} 
// 还可以
<div :id="rawId | formatid" />

// 局部定义
filters: {
  capttalize : function(value){
    
  }
}

// 全局定义
Vue.filter(‘capttalize ’， function(value){
  
})

跟踪运行时错误

全局方法

Vue.config.errorHandler = function(){}