了解vue APi

阳光那么好，何必自寻烦恼，过好每一个当下，一万个美丽的未来抵不过一个温暖的现在。

一。Vue.nextTick():

该api 是在Dom节点更新结束之后执行的一个延时回调。在修改数据之后，立即使用这个方法，可以获取到更新后的Dom。

使用场景：当修改的时候，将获取到的数据对页面的form进行赋值的时候，可以使用。

或者在created（）钩子函数进行的DOM操作一定要放在Vue.nextTick()方法的回调函数中，因为created（）中还没有对DOM 节点进行渲染，所以此时进行DOM节点的操作是没有意义的，所以，要将DOM节点的操作的JS代码放在Vue,nextTick()回调函数中。

二。Vue.set(target,key,value):

像响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发试图的更新。它必须用于向响应式对象上添加新的属性。因为Vue 无法探测普通的新增属性。

使用场景：在vue 中，我们利用索引直接设置数组中的某一项的时候，赋值成功，但是页面渲染结果不会更改，此时，就需要用到Vue.set()方法。

 <div v-for="(item, index) in list" :key="index">
        <div @click="clickOne(item, index)">{{item}}</div>
 </div>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    clickOne(val, index) {
　　　　// 通过数组的索引去修改数组中的某一项，数据改变，但是页面没有改变
      this.list[index] = '123';
　　　　// this.$set（）方法，既更改了数组中对应索引的值，同时视图也更新了。
      this.$set(this.list, index, '1243')
    },
  }
}
</script>

三。Vue.delete(target, key)

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

<div>
        <div @click="deleteObj"> {{obj.name}}</div>
        <div>{{obj.age}}</div>
</div>
<script>
export default {
  data() {
    return {
      obj: {
        name: 'xiaoxiannv',
        age: 18
      }
    }
  },
  methods: {
    deleteObj() {
      // delete this.obj.name
      this.$delete(this.obj, 'name')
    },
  }
}
</script>

四。Vue.component(id, function/object)

该api 是注册或获取全局组件，注册还会自动使用给定的Id设置组件的名称

五。Vue.mixin(mixin):混入

该api全局注册一个混入，影响注册之后所有创建的每个Vue实例。所以，可以用来给所有的vue实例添加可重复使用的属性，方法，及特性。当然，也可以为自定义对象注入处理逻辑。

当有多个组件中，有多个共同的方法，我们可以使用混入的方法，将公共的方法进行封装，在组件中，调用该混入的方法。

使用场景：mixins.js:封装的混入方法。

export default {
    data() {
        return {
            // data 中公有的数据
        }
    },
    methods: {
        a() {
            console.log('提取公有的方法')
        }
    }
}

a.vue：在页面中引用混入

import mixins  from '@/mixins'
export default {
mixins: [mixins]
}

六。PropsData

该api是用在全局扩展时进行传递数据，我们用propsData传值的步骤：

在全局扩展里加入props进行接收。propsData:{a:1}
传递时用propsData进行传递。props:[‘a’]
用插值的形式写入模板。{{ a }

使用场景：：：

<body>
    <header></header>
</body>
<script type="text/javascript">
    var app = Vue.extend({
        template: `<p>{{message}}---{{a}}</p>`,
        data: function () {
            return {
                message: 'hello vue',
            }
        },
        props: ['a']
    });
    new app({
        propsData: {
            a: 1
        }
    }).$mount('header');
</script>

七。watch 监听数据的变化。只有当数据发生变化，才会走这一步。

{[key: string]: string | Function | Object  }
在watch方法中，key是一个字符串，表示被检测的数据。值可以是一个函数，但是不能使用箭头函数。值也可以是一个对象。
使用场景：

'value'(newVal, oldVal) {
      this.modelVal = newVal;
}

该方法有两个参数，第一个参数代表的是改变之后的值，第二个参数代表的是改变之前的值。当value的值改变的时候，就能触发对modelValue的赋值。

深入监听：watch 是无法监听对象内部的数据的，对象内部属性或者方法发生改变的时候，可以使用深度监听模式。

superiors: {
            handler: function (val) {
                if (val !== null) {
                    this.departmentNames = val
                    this.placeholderInput = ''
                } 
            },
        // deep：true表示 深度监听
            deep: true
}

因为，watch在最初绑定的时候不会执行的，得等到数据的变化才会执行。但是，有些需求是在他最初绑定的时候，就执行，这个时候，就需要使用watch 中的immediate属性。

selectData:{
      handler(newList, oldList) {
        this.loadFlag = false;
        this.listArr = newList;
      },
      immediate: true
 },

八。parent:

指定已创建的实例之父实例，在两者之间建立父子关系，子实例可以用this.$parent访问复实例，子实例被推入父实例的$children数组中。

在子组件中打印this.$parent,展示结果如下：能看到父组件中的data,methods等。

在父组件中，使用this.$children,打印结果如下：显示出父组件中引用的所有的子组件。

$parent,$childeren 方法可以不通过父子组件传值，子组件拿到父组件的值，父组件拿到子组件的值，但是，这只是一个紧急使用手段，正常情况，还是应该使用父组组件传值的方法。