在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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
javascript操作referer详细解析
Mar 10 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
简单的页面缓冲技术
2006/10/09 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
表单内同名元素的控制
2006/11/22 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python中的字典使用分享
2016/07/31 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python3 kubernetes api的使用示例
2021/01/12 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
岗位廉洁从政承诺书
2014/03/27 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android