vue 数组变化侦测

变更方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

<template>
  <div>
    <p>点击按钮为列表添加元素</p>
    <button @click="clickAddHandle">添加</button>
    <ul>
      <li v-for="(item,index) of result" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    clickAddHandle(){
      this.result.push("d");
    }
  }
}
</script>

 

替换一个数组

 变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变(immutable)方法，例如filter()，concat（) 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。

<template>
  <div>
    <p>点击按钮为列表添加元素</p>
    <button @click="clickAddHandle">添加</button>
    <ul>
      <li v-for="(item,index) of result" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    clickAddHandle(){
      this.result.concat("d");
      console.log(this.result);
    }
  }
}
</script>

点击按钮时页面没有发生变化，但数组已经发生改变，可以在控制台上输出新的数组。

如果想要在页面上显示可以重新赋值

<template>
  <div>
    <p>点击按钮为列表添加元素</p>
    <button @click="clickAddHandle">添加</button>
    <ul>
      <li v-for="(item,index) of result" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{
      result:["a","b","c"]
    }
  },
  //在vue中所有的方法都将写在methods函数中
  methods:{
    clickAddHandle(){
      this.result=this.result.concat("d");
      console.log(this.result);
    }
  }
}
</script>