Posted in Javascript onJuly 17, 2020
在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅这篇文章
例如:
<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是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:
使用方法:
// 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>
以上两种方式,均可达到监听数组值变化的效果。
补充知识:vue数组操作不触发前端重新渲染
暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。
此外,能够监听的数组变异方法
https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95
还有就是set
在vue中对数组值变化的监听与重新响应渲染操作
- Author -
_cris声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@