vue检测对象和数组的变化分析

 更新时间:2018年06月30日 09:52:11   作者:zywpurple  
这篇文章给大家分享了vue检测对象和数组的变化的相关知识点与实例代码,有兴趣的朋友参考下。

在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化。

检测对象变化

1、不能检测到对象属性的添加或删除

var vm = new Vue({
 data:{
   data111:{
     a = 1
   }
 }
})

data111.a = 2;//这个可以引起变化

但data111.b = 2;和vm.b = 2这个不能检测到变化

需要用

Vue.set(object, key, value)

比如$set(data111, b, 2);

或者:

$set(key,value)

比如vm.$set(‘b', 2);

检测数组变化

下面两种情况不能检测到变化:

1、直接通过索引设置元素,如arr[0]=12;

2、直接修改数组的长度,如vm.arr.length

Vue.set( object, key, value )

用法:

this.$set(this.arr,0,12)

相关文章

  • ElementUI的this.$notify.close()调用不起作用的解决

    ElementUI的this.$notify.close()调用不起作用的解决

    本文主要介绍了ElementUI的this.$notify.close()调用不起作用的解决,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue-element-admin下载到登录的一些坑

    vue-element-admin下载到登录的一些坑

    本文主要介绍了vue-element-admin下载到登录的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 关于vue-cli3打包代码后白屏的解决方案

    关于vue-cli3打包代码后白屏的解决方案

    这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue多页面配置详情

    vue多页面配置详情

    这篇文章主要介绍了vue多页面配置,单页应用这个概念,是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里,我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue element和nuxt的使用技巧分享

    vue element和nuxt的使用技巧分享

    这篇文章主要介绍了vue element和nuxt的使用技巧分享,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • Vue状态管理之使用Pinia代替Vuex

    Vue状态管理之使用Pinia代替Vuex

    这篇文章主要介绍了Vue状态管理。下面文章主要围绕着使用Pinia代替Vuex的相关资料展开具体内容,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • vue-cli中devServer.proxy相关配置项的使用

    vue-cli中devServer.proxy相关配置项的使用

    这篇文章主要介绍了vue-cli中devServer.proxy相关配置项的使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3动态加载对话框的方法实例

    vue3动态加载对话框的方法实例

    对话框是很常用的组件,在很多地方都会用到,下面这篇文章主要给大家介绍了关于vue3动态加载对话框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Vue实现监听dom节点宽高变化方式

    Vue实现监听dom节点宽高变化方式

    这篇文章主要介绍了Vue实现监听dom节点宽高变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue封装的组件全局注册并引用

    Vue封装的组件全局注册并引用

    这篇文章主要为大家详细介绍了Vue封装的组件全局注册并引用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07

最新评论