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


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

Javascript 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
You might like
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
php生成微信红包数组的方法
2019/09/05 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python实现基于POS算法的区块链
2018/08/07 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
什么是python的列表推导式
2020/05/26 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python中常用的数据结构介绍
2021/01/12 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
限期整改通知书
2015/04/22 职场文书
信用卡工作证明范本
2015/06/19 职场文书
网络营销实训总结
2015/08/03 职场文书
初中班主任心得体会
2016/01/07 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫