vue2里的重要API整理（一）

1.$nextTick
当动态地渲染html时，接着又要这个动态html做DOM操作时，可以使用这个API来实现。它的功能与updated的功能类似。

methods: {
    // ...   
example: function(){
      // 修改数据   
  this.message = 'changed'     
// DOM 还没有更新   
  this.$nextTick(function(){
 // DOM 现在更新了       
// `this` 绑定到当前实例       
this.doSomethingElse()
      })
    }
  }

2.$forceUpdate()

vue响应式是有缺陷的。当声明式变量嵌套层级过深时，其响应式是没有作用的，也就是说“声明式变量明明已经发生了变化，但视图不更新”。这时使用这个api来强制触发更新视图。

changeInfo() {
 this.info.list[0].a.b.c.d.e = 200
 // 假如：明明data更新成功了，但视图不更新。
 this.$forceUpdate()
}

3.watch

watch 用于监控数据修改，其属性即为所监控的数据，当数据修改会执行相应的处理方法。

watch 的使用有多种方式，包括 string 方式，function 方式， array 方式和 object 方式。

string方式

 watch: {
        name: 'handleNameChange'
    },
    methods: {
        handleNameChange() {
            console.log('name change') // 1s 后 name change
        }
    }

function 方式

 watch: {
        name() {
            console.log('name change') // 1s 后 name change
        }
    },

array 方式

 watch: {
        name: [
            function() { console.log('name change 1') }, // 1s 后 name change 1
            function() { console.log('name change 2') }, // 1s 后 name change 2
        ]
    },

object 方式

deep 属性：深度监听多层嵌套对象类型数据的属性变化。

data() {
        return {
            person: {
                name: 'ming',
                age: 18,
                obj: {
                    a: {
                        data: 1
                    }
                }
            }
        }
    },
    watch: {
        person: {
            handler() {
                console.log('name change') // 1s 后 name change
            },
            deep: true, // 深度监听对象，对象属性为对象时，设置 true 可以检测内部深层对象属性的修改
        }
    }

immediate 属性：立即执行属性，数据监听初始立即执行 watch 的处理函数，属性修改会再次执行

watch: {
        name: {
            handler() {
                console.log('name change') // 执行后 name change，1s 后再次 name change
            },
            immediate: true, // 初始化后立即调用 handler
        }
    }

注意：watch 可以监听 data 数据是否发生修改，做相应的操作，同样也可以监听路由发生修改，执行相应的操作。

watch: {
   $route(to, from) {
       // to 跳转至页面，from 来源页面
   }
}