指令、过滤器、watch、computed、mixin

指令

Vue 提供了自定义指令的5个钩子函数：

//bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
//inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
//update：组件更新时调用。
//componentUpdated：组件与子组件更新时调用。
//unbind：指令与元素解绑时调用，只执行一次。

钩子函数的参数：
el:dom对象
binding:指令对象,包含以下属性
name: 指令名,不包括 v- 前缀。
value:指令的绑定值,会进行动态解析,例如:v-my-directive="1 + 1" 中，绑定值为2。
oldValue:指令绑定的前一个值,仅在update和componentUpdated 钩子中可用,无论值是否改变都可用。
expression:字符串形式的指令表达式,不会动态解析,例如v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
arg:传给指令的参数,可选,例如v-my-directive:foo中,参数为 "foo"。
modifiers:一个包含修饰符的对象,例如:v-my-directive.foo.bar中,修饰符对象为{ foo: true, bar: true }。
vnode: Vue编译生成的虚拟节点,移步 VNode API 来了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
注意：
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

指令的定义

//局部指令例：
export default {
    ... ...
    directives: {
        test: {
              bind () {
                console.log('bind')
              },
              inserted () {
                console.log('inserted')
              },
              update () {
                console.log('update')
              },
              componentUpdated () {
                console.log('componentUpdated')
              },
              unbind () {
                console.log('unbind')
              }
        }
    }
}

//全局指令
Vue.directive('bgcolor', {
              bind () {
                console.log('bind')
              },
              inserted () {
                console.log('inserted')
              },
              update () {
                console.log('update')
              },
              componentUpdated () {
                console.log('componentUpdated')
              },
              unbind () {
                console.log('unbind')
              }
  })

指令的使用

//1.给元素添加随机背景---带参数的指令：
  <div v-bgcolor='{color: 'orange'}'>
  
  Vue.directive('bgcolor', {
      bind: function(el, binding) {
          el.style.backgroundColor = binding.value.color;
      }
  })
  // 如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样简写:
  Vue.directive('bgcolor', function (el, binding) {
        el.style.backgroundColor = binding.value
  })
//2.图片加载优化
//自定义指令来优化图片的加载：图片在加载过程中，未加载完成时使用灰色背景占位，图片加载完后直接显示
      Vue.directive('imgUrl', function (el, binding) {
          el.style.backgroundColor = '#FEFEFE' //设置背景颜色
          var img = new Image()
          img.src = binding.value // binding.value 指令后的参数
          img.onload = function () {
              el.style.backgroundColor = ''
              el.src = binding.value
          }
      })

动态指令参数

指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

  <div id="dynamicexample">
    <h3>Scroll down inside this section ↓</h3>
    <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
  </div>
 
  Vue.directive('pin', {
    bind: function (el, binding, vnode) {
      el.style.position = 'fixed'
      var s = (binding.arg == 'left' ? 'left' : 'top')
      el.style[s] = binding.value + 'px'
  
    }
  
  })

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

- 全局过滤器
  <div id="app">
     <p>{{ msg | msgFormat('疯狂','--')}}</p>
  </div>
  <script>
   // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat          Vue.filter('msgFormat',function(msg, arg, arg2) {
  // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
    return msg.replace(/单纯/g, arg+arg2)
    })
  </script>

- 局部过滤器

  methods: {},
  //定义私用局部过滤器。只能在当前 vue 对象中使用
  filters: {
    dataFormat(msg) {
        return msg+'xxxxx';
    }
  }

watch

简介：

1、在vue中watch用来监听数据的变化，一旦发生变化可以执行一些其他操作

2、watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值诞生改变才会执行。如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性，比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的No认知时，也需要执行函数

3、handler方法：immediate表示在watch中首次绑定的时候，是否执行handler，值为TRUE则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化时才执行

4、deep，当需要监听一个对象的变化时，普通的watch方法无法监听带对象内部属性的变化，只有data中的数据才能够坚挺到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多是，每个属性的变化都会执行handler

简单监听

watch: { // 简单监听
    pageSize(newVal, oldVal) {
      console.log(newVal, oldVal) 
    }
}

//注意：
watch中不要使用箭头函数，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象

深度监听

//1.直接监听对象--代码如下
watch:{
  obj:{ //监听的对象
    deep:true, //深度监听设置为 true
    handler:function(newV,oldV){
      console.log('watch中：',newV)
    }，
    // 代表在wacth里声明了firstName这        个方法之后立即先去执行handler方法                                 immediate: true 
  }
}
//2.监听对象下某个属性--代码如下：
data () {
      return {
        obj:{
          name:'夜空中最亮的星星',
          age:18
        }
      }
    },
    watch:{
      'obj.name':{
        deep:true,
        handler:function(newV,oldV){
          console.log('watch中：',newV)
        }
      }
}

//3.data监听：
watch: {
    data： 'changeData' // 值可以为methods的方法名
}，
methods: {
    changeData(curVal,oldVal){
　　　conosle.log(curVal,oldVal)
　 }
}

computed

类型：{ [key: string]: Function | { get: Function, set: Function } }

详细：

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
      computed: {
        aDouble: vm => vm.a * 2
      }
      计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。
      
      例如：
      var vm = new Vue({
        data: { a: 1 },
        computed: {
          // 仅读取
          aDouble: function () {
            return this.a * 2
          },
          // 读取和设置
          aPlus: {
            get: function () {
              return this.a + 1
            },
            set: function (v) {
              this.a = v - 1
            }
          }
        }
      })

watch和computed的区别

1、computed的get必须有返回值（return），而watchreturn可有可无
2、computed支持缓存，只有依赖的数据发生改变，才会重新进行计算，而watch不支持缓存，数据发生改变，会直接触发相应的操作
3、computed可以自定义名称，而watch只能监听和data里面名称相同的属性
4、computed适用于复杂的运算，而watch适合一些消耗性功能，比如Ajax
5、computed不支持异步，当computed内有雨布操作是无效，无法监听数据的变化，而watch支持异步
6、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，而watch监听的函数接受两个参数，第一个是最新的值，第二个是输入之前的值
7、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed，当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch

混入模式

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入的规则：
  1.混入的对象和被混入的都会执行生命钩子函数。
  2.其余选项可类别继承规则，相同的选型优先使用被混入的一方。
  Mixin和Vuex的区别？
  Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
  Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

    - 全局混入

      混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
      // 为自定义的选项 'myOption' 注入一个处理器。
      Vue.mixin({
        created: function () {
          var myOption = this.$options.myOption
          if (myOption) {
            console.log(myOption)
          }
        }
      })
      
      new Vue({
        myOption: 'hello!'
      })
      // => "hello!"

    - 局部混入

      例如：
      // 定义一个混入对象
      var myMixin = {
        created: function () {
          this.hello()
        },
        methods: {
          hello: function () {
            console.log('hello from mixin!')
          }
        }
      }
      
      // 定义一个使用混入对象的组件
      var Component = Vue.extend({
        mixins: [myMixin]
      })
      
      var component = new Component() // => "hello from mixin!"