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