在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下JScript和HREF的执行顺序
Jan 12 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python 队列详解及实例代码
2016/10/18 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
挂职思想汇报
2013/12/31 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
元旦联欢会主持词
2014/03/26 职场文书
安全生产月演讲稿
2014/05/09 职场文书
工商管理专业自荐信
2014/06/03 职场文书
服务行业口号
2014/06/11 职场文书
语文教研活动总结
2014/07/02 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
污水处理保证书
2015/05/09 职场文书
初中团委工作总结
2015/08/13 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers