在vue中对数组值变化的监听与重新响应渲染操作

<script>
 export default {
 data(){
 return {
 objVal: {
  name: 'obj',
  type: 'obj'
 }
 }
 },
 watch:{
 objVal:{
 handler(val,oldval){
 
 },
 deep: true,
 }
 },
 methods:{
 changeObj(){
 this.objVal.name = 'newobj';
 }
 }
 }
</script>

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 watch: {
 arrList: {
 handler(val, oldval) {
 
 },
 deep: true
 }
 },
 methods: {
 changeArr() {
 // 无效
 this.arrList[0] = 10;
 }
 }
};
</script>

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为：
 this.arrList.splice(0, 1, 10);
 }
 }
};
</script>

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为：
 this.$set(this.arrList, 0, 10);
 }
 }
};
</script>