1. 全局API及部分全局配置

   • Vue.config.optionMergeStrategies.要合并的属性

     Vue.config.optionMergeStrategies.data = (parent,child)=>{ //这里是vue中的data属性会受到合并策略的影响 console.log(‘调用‘,parent,child); if (!parent) { return child } if (!child) { return parent } return Object.assign(parent,child) }

   • mixins：实质上除App.vue外的每个组件都会有mixin,只不过初始值都是undefine

     export default { name: "HelloWorld", mixins:[hello], //这里parent：helloworld中的data函数，child是mixin中hello的data函数

     实际上借助上面optionMergeStrategies中的打印函数，我们看到了不止1次打印

     一：mixins自己也有mixin(undefine，mixin)、二：组件内部正常打印(mixin,组件内data函数)、三：每个组件有默认的mixins(即使没写出来，也会打印undefine,自己的data函数)

   • 使用Vue.extend(已使用Vue.component)

     Cannot create property ‘_Ctor‘ on string ‘xxx‘

     更改Vue.extend产生的组件构造函数的函数名即可

     Vue.extend产生构造函数,调用后产生一个组件--直接挂载即可，不能放在vue的components（里面的是对象未经过编译）属性中

   • Vue.nextTick( [callback, context])：vue中DOM操作是异步的,可能在同步代码中得到undefine

     Vue.set( target, propertyName/index, value )：给响应式新增一个属性(响应式的,直接添加不是响应式的)

     Vue.delete( target, propertyName/index )：与上面相反

     this.msg = ‘msg‘ //要操作DOM（即使用到DOM的api），不是操作vue组件中的属性 this.$nextTick(()=>{ //放里面能获取到 this.msg1 = this.$refs.msgDiv.innerHTML }) //放外面获取不到 this.msg2 = this.msg1 this.$set(this.obj,‘num‘,100)

     把后面依赖异步的代码放到nextTick中的回调函数中执行

   • Vue.directive(id,[definition])：自定义指令

     // 全局定义 import Vue from ‘vue‘; Vue.directive(‘focus‘,{ inserted:function(el){ el.focus() } }) // 局部定义 export default { data(){return{}} directives:{ focus : { inserted : function(el){el.focus()}} } filters:{ //自定义过滤器 upper: function(val){return val.toUpperCase()}, addol: function(val){return val+‘ol‘} } }

     id：指令名(使用时以v-开头)、第二个参数：对象(多个生命周期钩子函数)

   • Vue.filter( id, [definition] )：自定义过滤器

     过滤器函数名，局部/全局使用方式同directive

     下面展示2种使用方法

     // 双花括号使用{{}} <div>{{obj.name | upper | addol}}</div> // v-bind，这个可以在父组件向子组件传参时使用 <api v-bind:id="apiId | upper"></api> props:[‘id‘],

   • Vue.component( id, [definition] )：注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

     // 注册组件，传入一个扩展过的构造器 Vue.component(‘my-component‘, Vue.extend({ /* ... */ })) <p>// 注册组件，传入一个选项对象 (自动调用 Vue.extend)<br> Vue.component(‘my-component‘, { /* ... */ })</p> <p>// 获取注册的组件 (始终返回构造器)<br> var MyComponent = Vue.component(‘my-component‘)<br> // -------------------实际使用-------------------------<br> Vue.component(‘com‘,{<br> mounted() {<br> alert(‘开始ile‘)<br> },<br> })<br> var MyComponent = Vue.component(‘com‘)<br> export default {<br> components:{ com } //这里给的构造函数<br> //----或者-------<br> components:{<br> com: { // 这里给的对象 ，与平时import子组件一样<br> mounted:function() {<br> alert(‘开始ile‘)}}<br> }}<br> }<br>
     
   
   
   • 
     

     Vue.use( plugin )：{Object | Function} plugin

     
     

     如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用 new Vue() 之前被调用。

     
     

     当 install 方法被同一个插件多次调用，插件将只会被安装一次。

     
     
   
   
   • 
     

     Vue.compile( template ):{string} template,将一个模板字符串编译成 render 函数。只在完整版时可用

     
     

     如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用 new Vue() 之前被调用。

     
     

     当 install 方法被同一个插件多次调用，插件将只会被安装一次。

     
     
   
   
   • var res = Vue.compile(‘
     {{ msg }}
     ‘)
     

     Vue.compile( template )

     
     <br> var res = Vue.compile(‘<div><span>{{ msg }}</span></div>‘)<br> new Vue({<br> data: {<br> msg: ‘hello‘<br> },<br> render: res.render,<br> staticRenderFns: res.staticRenderFns<br> })<br>
     
   
   
   • 
     

     Vue.compile( template )

     
     <br> var res = Vue.compile(‘<div><span>{{ msg }}</span></div>‘)<br> new Vue({<br> data: {<br> msg: ‘hello‘<br> },<br> render: res.render,<br> staticRenderFns: res.staticRenderFns<br> })<br>
     
   
   
   • 
     

     Vue.observable(object):让一个普通对象可相应

     
     

     返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景

     
     

     Vue2中返回的对象和源对象是同一个对象，Vue3中是返回一个新的对象

     
     <br> const state = Vue.observable({ count: 0 })<br> const Demo = {<br> render(h) {<br> return h(‘button‘, {<br> on: { click: () => { state.count++ }}<br> }, <code>count is: ${state.count}</code>)<br> }<br> }<br>
     
   
   
   • 
     

     Vue.version：返回一个版本号

     
     

Vue api整理