复杂数据类型vue数据响应式特点

对于vue页面的数据同步具有响应式来说:
复杂数据对象类型是引用类型,当子组件采用父传子拿到父组件的对象,修改父对象里面原对象属性的值,或者直接对原对象点上一个新的属性进行添加值,页面的值会同步发生变化,父组件的vue值也会同步改变,这是因为对象地址指向是相同的,页面监听数据的变化会有响应式的效果,但是如果子组件对父组件里面的对象直接覆盖赋值的话,就会改变原对象的地址了,页面显示值会变化,但是一刷新又会恢复原样,原因是因为虽然子组件的值变化了,但是父组件的vue数值是没有跟随改变的,此时父组件的对象和子组件的对象指向的地址不同,子组件修改父组件的值就不会同步变化了。
解决这个问题,向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,

因为 Vue 无法探测普通的新增属性
(比如 this.myObject.newProperty = ‘hi’),
你会发现vue官网是 vue.set,
vue.set的用法,连接https://cn.vuejs.org/v2/api/#Vue-set,

调用方法:this.$set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值

对于export的数据暴露,对象指向问题来说:
对象可以修改里面属性的值,但是不能直接赋值,直接赋值就改变了原对象的地址,相当于用了一个新的对象,例如exprot的数据暴露,对象指向问题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2 和 Vue 3 在数据响应式原理上有一些区别。以下是它们之间的主要区别: 1. Reactivity API(响应式 API): - Vue 2:Vue 2 使用 Object.defineProperty() 来追踪属性的变化,并通过 getter 和 setter 来劫持属性的访问和修改,从而实现数据响应式。 - Vue 3:Vue 3 引入了一个新的响应式系统,使用 Proxy 对象来实现数据响应式。Proxy 可以拦截对象上的各种操作,包括属性的读取、设置、删除等。 2. 引入了 Proxy 对象: - Vue 2:Vue 2 没有使用 Proxy 对象。 - Vue 3:Vue 3 使用 Proxy 对象来代替 Vue 2 的 Object.defineProperty()。Proxy 具有更强大和灵活的功能,可以捕获更多类型的操作,并且可以直接监听整个对象或数组,而不需要遍历每个属性。 3. 响应式侦听(Reactivity Tracking): - Vue 2:Vue 2 使用递归遍历来追踪数据的变化,这意味着在大型对象或数组上可能会有性能问题。 - Vue 3:Vue 3 使用了基于依赖图的跟踪机制,只追踪实际使用的属性,而不是整个对象。这样可以提高性能并减少不必要的侦听。 4. 静态树优化(Static Tree Optimization): - Vue 2:Vue 2 的虚拟 DOM 对比算法是基于深度优先遍历的,无法识别静态子树,导致在重新渲染时可能会重复创建和销毁组件。 - Vue 3:Vue 3 引入了静态树优化,通过标记和提升静态节点,可以跳过对它们的对比和渲染过程,从而提高性能。 总的来说,Vue 3 在数据响应式上采用了 Proxy 对象和基于依赖图的跟踪机制,提供了更强大和高效的响应式系统,并引入了一些优化技术来提高性能。这些改进使得 Vue 3 在处理大型应用程序和复杂数据结构时更加高效和灵活。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值