vue全局API

 

一。Vue.extend()  

顾名思义  extend  继承，官方给出的解释是   （使用基础 Vue 构造器，建立一个“子类”。参数是一个包含组件选项的对象。）

Vue构造器是指  vue是一个构造函数， 因此在编写代码的时候被称之为构造器

Vue.extend()  看起来和new Vue（） 有点像 他们的区别在于

new Vue是一个实例

vue.extend 组件构造器 须要传入component进行注册

vue.component直接注册组件内部已经自动构造了

 

<div id=app"></div> 
// 建立构造器
 var newApp = Vue.extend({ 
　　template: '<p>{{firstName}} {{lastName}}</p>', 
　　data: function () { return { firstName: 'zhang', lastName: 'San', } } 
})
 // 建立 newApp 实例，并挂载到一个元素上。 
new newApp().$mount('#app')

 

  

 

二。Vue.nextTick（）

官方文档中解释在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。

那么DOM 更新循环是什么 ，何时循环

就是说vue在修改数据后  不会马上去更新dom，须要在同一事件循环结束后才会去统一更新此次有变更的DOM

好比说v-if  记得从网上看到过例子

 

 

这个nexttick  就是在事件循环结束后当即被调用的 在下一个事件循环的上边 和异步回调的感受差很少  等dom更新  当即执行

另外用定时器（settimeout（fun，0））也能够操做更新完以后的DOM

三。vue.set

 官方解释 vue.set向响应式对象中添加一个属性，并确保这个新属性一样是响应式的，且触发视图更新。

它必须用于向响应式对象上添加新属性，由于 Vue 没法探测普通的新增属性 

因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

四。vue.delete

删除对象的属性。若是对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，可是你应该不多会使用它。

 

 

 

delete this.xxx.xxx;//js方法

Vue.delete(this.xxx,'xxx');//vue方法

这两个效果是同样的   注意不能删除vue的实例和根属性

 

五。Vue.directive

Vue.directive这个比较常见  它用于注册自定义指令，注册全局自定义指令  也能够在组建里边局部注册指令

下边是vue提供的一些钩子函数

Vue.directive('my-directive', {
  bind: function () {},//绑定时
  inserted: function () {},//插入时
  update: function () {},//虚拟DOM节点更新以前
  componentUpdated: function () {},//组件和子虚拟DOM更新完成后
  unbind: function () {}//解绑时
})

这些钩子函数会在执行对应操做的时候执行，这些钩子函数里边有不少属性，有时间能够打印一下玩一玩，时间关系不一一介绍了

这个函数做用就是让mv层和V层分离  避免在V层操做DOM

六。Vue.filter

Vue.filter过滤哈  这个很常见   筛选数据常常用到

// 官方的例子
// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

我我的就感受和 Array.includes封装一下没什么区别（刚接触不久，有不对的地方欢迎来喷）

七。vue.mixin

全局混入，会影响注册以后全部建立的每一个 Vue 实例，若是生命周期里的方法重名的话会执行全部方法

谨慎使用全局混入对象，由于会影响到每一个单首创建的 Vue 实例 (包括第三方模板)

具体参考  vue混入

八。propsData

 

 在建立实例的时候给props传值

 

 

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

 

九。watch

 

 watch: {
　　　// a 发生改变的时候会执行下边的方法  传入两个参数  第一个是变化后的值
　　　　　第二个是变化以前的值

    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
// 深度监听
    c: {
　　　　//举个例子  好比说一个对象的属性他仍是一个对象  
那么这个时候浅度监听就不会去监听里边的数值，而深度监听能够监听到

      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始以后被当即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
  }

深度监听的原理 我的感受是递归，一层层的去监听直到没有为止，没有必要的话尽可能不要使用

十。parent

我在个人子组件表格中打印 ，能够访问父实例的值，  注意是父实例

同理还有$children   这个能够访问到该组件子组件的值

不过 $parent 和 $children  我发现他们是有做用域的  他们会一层一层的往上访问  并不会像 props 和 events那样一步到位i

这个我也想到了一个应用场景，咱们在项目中用的是element-ui，表格组件修改有时候是比较麻烦的

就是说咱们的美工有时候会提出一些很难实现（让人匪夷所思。。）的样式  能够用这个修改样式的话感受比较方便

有不足或讲的不对的地方，请批评指正