Vue2 Api 总结大全

全局配置 ignoredElements

须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。

就是你在页面用一个标签的时候，这个是一个自定义元素，并不是自已定义的组件，这时候就会抛出一个警告，要想不想让他抛出这个警告就要在全局设置main.js 里面

Vue.config.ignoredElements = ["hhe"];

keyCodes

在按下键盘某个键的时候触发，可以触发的事件，可以在点击两个中的某一个就会触发

 
当按下空格或者删除按钮的时候就会触发enter函数

-------------main.js
Vue.config.keyCodes = {
  hehe: [8,13],
};  

另外两种方法

performance

......用的不多，没怎么理解..?懂得可以给我讲一下

productionTip

设置为 false 以阻止 vue 在启动时生成生产提示。
设置为 true允许vue 在启动时生成生产提示

 全局API  vue. extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

就是用来创建一个组件

例如：

先通过extend创建组件
let xixi = Vue.extend({ template: '你好世界'})
然后通过component进行创建
Vue.component('MyComponent',xixi)

//可以简写
Vue.component('my-component',{
    template:'
你好世界
'
  })

nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。【用在异步请求数据的时候】

   created() {
        setTimeout(() => {
          this.list = [
            'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
            'https://t7.baidu.com/it/u=1330338603,908538247&fm=193&f=GIF',
            'https://t7.baidu.com/it/u=2259261418,2370578071&fm=193&f=GIF'
          ]
         
          // 浏览器帧率60 = 1s刷新60 16~17ms
          // setTimeout(() => {  //用setTimeout 效果是一样的
          //   this.init()
          // },17)
          // 上一次数据修改引起真实dom更新后执行回调
          this.$nextTick(() => {
            this.init() //轮播图中再下次数据更新，也就是异步获取到数据的时候才会触发轮播图的初始化函数init()         })
        }, 1000)

Vue.set  

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

例如

 {{arr}}      
{{obj}}
data() {
    return {
      test: "hehe",
      arr: [1, 2, 3],
      obj: {
        us: "王一",
        ps: 123,
      },
    };
  },

change() {
     
      // this.arr[0] = 5;//而只是单纯的改变数组中的某一项的时候并不会在页面上显示
      // console.log(this.arr);//但是打印出来数组的第一项是5
  this.arr.push(1);//在数组中添加一项改变数组会在页面中显示出来，是因为push方法改变了this.arr了，在封装的方法中返回了一个新的数组，所以就会页面改变
     
      // const arr = [...this.arr];//这里的方法就是改变this.arr
      // arr[0] = 5;
      // this.arr = arr;
      // this.$set(this.arr, 0, 5);//这是通过set方法改变

      // this.arr[0] = 5;
      // this.$forceUpdate(); 改变
      // 修改数组内部属性无法引起页面的更新 （没说数据不变）
      // 方案1 直接对数组整体赋值
      // 方案2 通过set vue.set() this.$set(要修改的元素,key/idx,要修改的值)
      // 通过this.$forceUpdate() 强制更新页面


      // this.obj.us = "heheh"; //可以改变因为现在是一个对象类型，不跟数组一样

      // 动态添加或者减少对象内部的属性不会引起页面变化 （我没说数据不变）
      //this.obj.test = "test"; //不可以新添加，因为初始化完成后obj并没有text这个属性
      // delete this.obj.us;//页面不变
      
      // 方案1 通过set vue.set() this.$set(要修改的元素,key/idx,要修改的值)
      // this.$set(this.obj, "test", 123);  页面改变
      // 方案2  通过this.$forceUpdate() 强制更新页面
      // this.obj.test = "test";
      //  delete this.obj.us;
      this.$forceUpdate();
      // 方案3删除的Api方法vue.delect可以直接删除
      // this.$delete(this.obj, "us");
    },

总结：

1、如果我们在初始化之后想要添加一个响应式数据，可以使用 set 方法，改方法传递三个参数，分别是：targe( 需要向哪个目标对象中添加 )，key( 添加的属性 )，val( 属性的值 )

2、Vue.set() 和 vm.$set() 这两个方法的作用一样，传参也一样，不一样的是一个是挂载在Vue上的全局api，一个是挂载到 Vue实例对象上的方法

3、使用 set() 方法添加属性时，不能直接添加到 vm实例对象上，也不能直接添加到根数据data中，需要添加到 data 中的某一个对象上才能生效，就如上面的obj

4、因为Vue的数据代理，所以我们在使用 set() 方法时，获取目标对象时，可以使用 vm.xxx，也可以使用 vm._data.xxx

vue.delect

删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它

例子在Vue.set  最后删除obj.us用过

Vue.directive 

vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层 *** 作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom *** 作，并且是可以复用的，

  //页面刷新就会自动获取焦点

export default {
data(){},
directives: {  //放在与data一级
    focus: { 
//自定义了一个指令，v-focus,就会执行el.focus()加上这个指令的dom节点就会自动获取焦点
      inserted(el) {
        el.focus();  
      },
    },
  }
}

1、vue.directive 有两个参数：id（string）和[definition](function|object)

2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind

2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置

2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）

2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有

2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用

2.5、unbind：只调用一次，指令与元素解绑时调用

3、钩子函数参数

el，binding（name,value,oldValue,expression,arg,modifiers）， vnode，oldvnode 

4、动态指令参数

指令的参数可以是动态的，例如，v-focue:[argument]="value"中，argument参数可以根据组件实例数据进行更新 

Vue.filter

过滤器 对数据进行处理，切记处理完数据要返回，必须要return

在全局里面使用过滤器，需要写在new Vue({})实例前面

{{ 要处理的数据 | 过滤器}}
 Vue.filter('过滤器的名字',(data,params1,params2...) => {

  data 要处理的数据

  params 其他的参数

  return 处理完的数据

})

在局部的时候用：filters

例子：

  
    {{time|timeFilter(1,2,3) }}
  
//在全局使用的过滤器
Vue.filter('timeFilter',(data,a,b,c)=> { //这里的data就是上面调用时候的time,也就是new Vue里面的time,a,b,c就是传进去的数据，可以通过这些数据对data进行增删改查
  // 处理数据逻辑
    console.log(data,a,b,c)
  // 返回处理完的数据
    return '🙂' //返回处理完成的数据
})

  new Vue({
    data: {
      name:'arui',
      time: '11233',
    },
    // filters: {
    //   timeFilter(data,a,b,c) {  //这里是局部过滤器
    //     console.log(data,a,b,c)
    //     return '呵呵'
    //   }
    // }
  }).$mount('#app')

Vue.component

注册组件

Vue.component('my-component',{
    template:'
你好世界
'
  })

Vue.use Vue.mixin

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。

一.区别

1.mixin混入对象和Vuex的区别：

　　　　Vuex是状态共享管理，所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的；

　　　　mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；

　　　　mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

　　　　mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖

2.与公共组件的区别

同样明显的区别来再列一遍哈~

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

二.怎么用？

举个栗子：

定义一个混入对象

把混入对象混入到当前的组件中

用法似不似相当简单呀

mixins的特点 1 .方法和参数在各组件中不共享

混合对象中的参数num

组件1中的参数num进行+1的 *** 作

组件2中的参数num未进行 *** 作

看两组件中分别输出的num值

大家可以看到，我在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值

2. 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的

混入对象中的方法

组件中的方法

打印台的输出

3 .值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

组件函数中的console

打印台的打印

Vue.version

看Vue版本号

inheritAttrs: false  

属性除了class不会被传递

例如：

//在用这个组件的时候
//除了class 会变成拼接，其余不会渲染到dom上