VUE中解决不能检测数组中基本数据类型的方法及$set的使用方法

在Vue中当你修改数组中一个基本类型的数值时，页面不会响应，也不会更新数据，但是元素是对象的时候可以检测并发生响应。如下例子，中数组arr的第一个元素再点击后重新赋值时页面没有响应。

<template>
    <div>
        {{arr}}
        <button @click="changeEle">更改数组[0]的值</button>
    </div>
</template>
<script>
export default {
    data() {
            return {
                arr: [1, 2, {
                    id: 1
                }]
            }
        },
        watch: {
            arr: {
                handler: function() {

                },
                deep: true
            }
        },
        methods: {
            changeEle() {
                //this.arr[0] = 19; //这样vue不会去处理在数组中基本数据类型的观察setter/getter,同时触发视图更新,第一个参数不能是Vue的实例或者根属性，类似this.$data

                //手动通知vue完成观察，this.$set(obj,propName,value)
                this.$set(this.arr, 0, 19);
            }
        }
}
</script>
<style>
</style>

可以使用$set进行监视，以下是API