Vue当中的api小结

 

1.2.6 Vue.component()

作用：在实际开发过程中，我们可能需要全局注册一些组件，比如全局搜索框，全局计数器等等。。。这个时候使用全局注册组件，就不用在每一个组件中单独的进行注册了，提高代码复用率

语法：Vue.component('my-component', { /* ... */ })

1.2.7 Vue.use(plugin)

作用：使用插件，比如element ui中每一个组件其实就是一个插件，我们需要通过Vue.use(ELE) 来进行使用  实际上原理是 Vue会自动的帮你去执行组件的install 方法，该方法中封装了 Vue.component()的方法，将其注册到了全局，因此，如果要定义一个插件，则必须为插件提供一个install方法。

语法：Vue.use( plugin )

1.2.8 Vue.mixin()

作用：在之前的开发中，我其实很少用到，但是实际上仔细一想，混合其实拥有很强大的工作，全局来看，它可以为全局的每一个实例组件提供混合的方法。这样倘若项目中有每一个组件都需要用到的函数体功能体，那么就可以使用mixin ，组件中，某一部分组件如果也拥有相同的函数需要使用，也可以在单个组件中注入minxin这样也可以提高代码复用的效率。

 

语法：

全局的mixin：

<script>

Vue.mixin({
  // 在混合中的Mixin的生命周期会优先于组件中的生命后期执行，并且代码块并不是冲突的，
  //vue会帮我们去做一个合并的操作

  created: function () {

    var myOption = this.$options.myOption

    if (myOption) {

      console.log(myOption)

    }

  }

})

</script>

 

这样每一个new Vue的实例创建出来时，都会执行created中的函数体

 

局部：

<script>

//a.vue  文件a中定义的混合

var mixin = {

  methods:{

        formMixin(){

            console.log('form mixin')

        }

    }

}

// 导出你所定义的混合
export default mixin

</script>


<script>

//b.vue

import a from './a.vue'

new Vue({

    mixins:[a],

    mounted(){

        this.formMixin()  // 可以直接使用混合中定义的方法

    }

})


//==>  form mixin

</script>

 

值得注意的是，如果是相同钩子函数，混入的函数体会优先于组件中钩子函数执行，如果是方法，那么方法名重复时，组件中的方法会覆盖mixin中的方法，这样的设计可以帮助我们更好的扩展mixin的功能，更好的使用mixin

 

1.2.9 Vue.compile(template)  

作用：之前还没有注意过这个api,但仔细一想，这个其实也是很有用的，动态生成DOM节点，将其挂在到页面当中，其实也是很有用的。用于将一个模板字符串编译成 render 函数。只在完整版时可用。

 

语法：

<script>

var res = Vue.compile('<div><span>{{ msg }}</span></div>')


new Vue({

  data: {

    msg: 'hello'

  },

  render: res.render,

  staticRenderFns: res.staticRenderFns

})


</script>

 

渲染一个字符串的html ，测试失败

 

实际上：也可以使用render函数来进行渲染

<script>

// a.vue

export default {

  data(){

    return {

      msg:'msg'

    }

  },

  render(h){

    console.log(this.$slots.default)     

    return h('h1',this.$slots.default)

  },

}

</script>

其中h函数 接受两个参数，一个是渲染的标签 一个是虚拟DOM的节点

 

//b.vue

//在Vue当中还支持使用render函数进行开发

<script>

data(){

    return {

        msg:'msg'

    }

},

render(){  

    return (

        <ul>

            <li>{this.msg}</li>

        </ul>

    )

},

</script>

可以在render函数中写jsx的语法，Vue的脚手架内置了babel的编译环境

 

1.2.10  Vue.observable({ count: 0 })

作用：用于添加响应式的数据

语法：

<script>

const state = Vue.observable({ count: 0 })


const Demo = {

  render(h) {

    return h('button', {

      on: { click: () => { state.count++ }}

    }, `count is: ${state.count}`)

  }

}


</script>

 

1.3.0  provide | inject

作用：这个其实最为主要的作用就是能够允许一个祖先组件向其所有子孙后代注入一个依赖 , 子孙组件的嵌套关系无论有多么深都可以收集的到，只要在自己组件中写入一个inject:[] 就好了

// 父级组件提供 'foo'

<script>

var Provider = {

  provide: {

    foo: 'bar'

  },

  // ...

}


// 子组件注入 'foo'

var Child = {

  inject: ['foo'],

  created () {

    console.log(this.foo) // => "bar"

  }

  // ...

}

</script>

 

1.3.1 delimiters 

作用：用来改变插值语法的符号  

限制：这个选项只在完整构建版本中的浏览器内编译时可用

 

语法：delimiters:['${', '}'],

 

1.3.2 functional 函数式组件

作用：用于做一些简单的业务逻辑不太复杂的组件，这样开销会相对来说小很多

 

语法:

<script>

var options = {

  functional:true,

  render(h,context){

    //其中 context是一个对象，其中包含了Propos children  slots  data parent listeners 等属性的对象

  }

}


</script>

 

或者

<template functional>

</template>

 

1.3.3 model 

作用：用于更快更方便的将子组件与父组件的数据进行实时的绑定 用这个方法有2个好处，一是组件自己不用维护状态，统一在父组件中进行维护，可以少写一个方法，目前看来，我感觉就这两个好处，感觉没有这个api其实也可以做到

 

语法：

父组件： <Model v-model="foo" :value="foo"/>

子组件：

<script>

const options ={

  model: {

    // prop: 'value',

    event: 'change'  //可自动维护一个函数   这个函数用于将传递的数据 更新到父组件v-model绑定的数据当中

  },

  props:{

    value:{

      type:String|Number,

      default:''

    },

  },

  methods:{

    change(e){

      this.$emit('change',e.target.value)

    }

  },

}


</script>

 

1.4.0  vm.$data

作用：实际上就是 实例自生的data监听的对象

 

1.4.1 vm.$props

作用：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问

 

1.4.2 vm.$slots  

作用：当一个子组件在父组件中应用时，在子组件中可以通过vm.$slots得到插槽中的VNode节点

 

1.4.3 vm.$isServer 

作用：这个api专门用来判断当前的Vue实例是否运行在服务器端

 

1.4.4 vm.$attrs 与 vm.$listeners

作用：这两个api讲真我在开发过程中真的很少用的，在借鉴别人封装svg组件时看到过，可能是由于自己还没有遇到响应的场景，不过深入了解我觉得还是有很大的学习意义，其实$attrs 它能够接受所有没有被当前组件用props接受的（当然除了style 和 class 以外），特别有捡漏的嫌疑 并且他还有一个作用就是向自己的子孙组件去注入这些被它捡漏得到的剩余参数，特别像一个拾荒的老父亲，别人不要的，他捡漏，然后把这些都留给自己的子孙使用

 

语法：  以三层模型组件为例，在中间组件文件中 孙组件上中使用 v-bind="$attrs" 或者在自己的任意调用方法中通过 this.$attrs也可以获取的到

 

作用：理解了$attrs之后，$listeners就很好理解了，它其实也很简单，就是能够收集到父组件中通过@符号也就是v-on绑定的方法，并且是可以进行调用的，（亲测如果不是用v-on进行绑定的，$listeners是收集不到的），如果要给自己的孩子进行注入也很简单，就是在当前中间组件中使用v-on（温馨提示：这里是v-on了，向下注入收集的方法） ，注入之后，今后在孙组件中也可以通过$listeners进行收集方法，并且调用这些方法，由于函数是在顶级父组件中那么实际上会作用于顶级父组件上，对于爷孙通信之类的场景是非常好的方法。

 

1.4.5 vm.$watch

作用：讲真的，有一说一，通过我自己的测试，我感觉，这个和实例自身的watch的作用是一模一样的，我还真没发现有什么比较好的优势，不过我觉有有一点还是值得肯定的，就是因为这个是一个api，我们可以动态的来处理是否监听某个状态，这样的话在性能上应该是比较好的，叫做按需监听，因为用watch的话，是需要直接写死在options当中的，这样的话，如果某些场景下，我其实不需要使用监听，那这种监听的消耗的浪费了，因此这个api我还是比较看好的。希望未来有一天能够使用到它。

 

语法：

<script>

export default {

  data(){

    return {

      msg:{

        name:'小鹏',

        age:'60',

        arr:[1,2,3,4,5,6]

      }

    }

  },

  methods:{

    handleClick(){

      this.msg.arr = []

    }

  },

  render(){

    return (

     <div>

      <button onClick={this.handleClick}>点击清楚 </button>

      <h2>

        <ul>

          { this.msg.arr.map(e=><li>{e}</li>)}

        </ul>

      </h2>

     </div>

    )

  },

  mounted(){

    this.$watch('msg.arr',(newVal,oldVal)=>{

      console.log(newVal,oldVal)

    })

  }

}

</script>

 

如果我们觉得有的时候又需要取消了，我们可以通过

 

<script>

unwatch = this.$watch('msg.arr',(newVal,oldVal)=>{

  console.log(newVal,oldVal)

})

unwatch()

</script>

 

调用unwatch()之后，这种监听就取消了，对于一些比较少用到，但有不得不使用监听的方式来完成的业务场景是非常好用的.

 

1.4.6 vm.$set  

作用：讲真的，这个api还是挺棒的，在开发当中还是能够经常用到的，这个api是用于动态的添加响应式数据的，将一个数据动态的维护到状态当中，是一个很常用的api

 

语法：

<script>

export default {

  data(){

    return {

      msg:{

        name:'小鹏',

        age:12

      }

    }

  },

  mounted(){

    this.$set(this.msg,'arr',[1,2,3,4,5])

  }

}

</script>

 

从此这个组件中就会多一个响应式的arr数据，当然你也可以动态的添加 原理主要是调用 reacitve方法，将数据响应式化

 

1.4.7 vm.$forceUpdate()

作用：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

调用这个方法后实例会重新渲染，重新走一遍声明周期