vue 关于数组和对象的更新
2023-09-11 14:16:54 时间
在日常开发中,我们用的最多的就是 绑定数据
<div v-for="item in data" :key="item.id">
<!-- 内容 -->
</div>
如果你有ng的开发经验,假设 data 你要更新数据了
this.data=res.data;
但是这在vue中 并不会起到作用,DOM并没有触发变化。
vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢???
看官网 这里才发现 深入响应式原理 列表渲染
vue 关于数组和对象的更新
数组检测更细变异的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
注意事项
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- this.data[index] = res.data;
- this.data.length = 0;
正确的操作方式
- Vue.$set(this.data, 1, {name:"huangenai",age:"22"})
- vm.items.splice(0)
对象
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
<script>
export default {
data(){
return {
userProfile: {
name: 'Anika'
}
user: {
name: "huangenai",
age: 12
}
}
},
mounted() {
this.$set(this.userProfile, 'age', 27)
this.user = Object.assign({}, this.user, {
age: 22,
name: "huangenai"
});
}
}
</script>
Vue提供了如下的数组的变异方法,可以触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
相关文章
- vue_如何判断变量是数组还是对象
- import Vue from 'vue';
- vue - Vue介绍
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- Vue - Router 路由跳转传参(对象 / 数组)目标页面刷新后参数丢失问题解决方案
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- Vue vue-awesome-swiper 的坑
- vue对象追加对象
- vue工程化之公有CSS、JS文件
- vue之$mount
- Vue报错笔记(1)vue.esm.js?efeb:628 [Vue warn]: Property or method “handleClick“ is not defined on the...
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法
- vue中改变数组或对象,页面没做出对应的渲染
- nuxtjs在vue组件中使用window对象编译报错的解决方法
- springboot+vue口腔管理平台(源码+文档)
- vue组件异步渲染
- vue中mixins的使用方法和注意点(详2)(异步请求的情况)
- Django+Vue项目学习第二篇:vue项目创建
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- Vue开发实例(13)之axios和mockjs的安装与使用
- 手写Vue (1) 对象劫持
- VUE 遍历对象