(详细及解决方法)关于Vue.prototype中定义的变量不是响应式

简介: (详细及解决方法)关于Vue.prototype中定义的变量不是响应式



当时第一眼看到下面的图,就想这个不会是写错了吧,咋还能这样写,在这里我承认,我以前说话确实很大声了

一、背景

在项目中需要将全局变量存放到Vue的实例对象上面

Vue.prototype.CustomBar = "我是字符串"

然后在所有页面上就可以通过插值语法访问

<view class="">
      {{CustomBar}}
</view>

听起来没有错误,但是用起来就会发现,这个数据是undfinde???我已经定义了啊这是为什么呢

二、原因

这个变量确实已经挂载到vue原型对象上面了,但是,在这个page/index/index页面实例对象上面 这个不是响应式的数据

三、解决方法

在data里面讲对应的变量给他赋值,

CustomBar:this.CustomBar的意思为,将Vue原型对象上的变量,赋值給当前页面的变量

!!!大家看到这里可能不明白,这不是多次一举吗,这是干啥呢

其实不然,大家请仔细翻看我的这篇博客(里面详细记载了,页面中什么数据是响应式的,以及怎么解决不是响应式的)

(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况__揽的博客-CSDN博客

四、扩展

(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况__揽的博客-CSDN博客

(详解错误情况,及解决方法)Vue 数据更新了但页面没有更新的情况__揽的博客-CSDN博客

目录
相关文章
|
19天前
|
JavaScript 前端开发 开发者
响应式原理:Vue 如何跟踪数据变化
【4月更文挑战第22天】Vue 的响应式系统是其核心,通过数据双向绑定实现视图与数据同步。依赖收集和观测数据使Vue能跟踪变化,变化通知组件更新视图。高效的更新策略如批量更新和虚拟DOM提升性能。组件化和可组合性支持有效通信和代码复用,强调数据驱动开发。开发者应合理组织数据、谨慎处理变更并充分利用组件化优势,以提高效率和用户体验。
|
19天前
Vue3响应式数据ref
Vue3响应式数据ref
|
19天前
|
JavaScript
Vue响应式数据的判断
Vue响应式数据的判断
|
19天前
|
JavaScript API
Vue3的响应式原理
Vue 3 中的响应式原理是通过使用 ES6 的 `Proxy 对象`来实现的**。在 Vue 3 中,每个组件都有一个响应式代理对象,当组件中的数据发生变化时,代理对象会立即响应并更新视图。
|
3天前
|
缓存 JavaScript 前端开发
Vue 3的响应式系统
【5月更文挑战第31天】Vue 3的响应式系统
8 1
|
18天前
|
资源调度 JavaScript 前端开发
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起(Vue实战系列)
|
19天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
19天前
|
JavaScript 前端开发 API
Vue 3的响应式系统相比Vue 2有哪些改进?
Vue 3 响应式系统升级亮点:使用 Proxy 替换 `Object.defineProperty`,实现更细粒度的变更跟踪与高性能;自动追踪嵌套属性,无需 `$set` 或深度监听;支持懒响应式,提升初始化性能;改进数组响应式,直接使用原生数组方法;递归侦听器增强灵活性;静态属性追踪;自定义响应式容器;统一 `ref` 和 `reactive` API;引入 `toRefs` 函数;优化响应式 API,如 `markRaw`, `shallowRef` 等,大幅提升效率和开发体验。
|
19天前
|
JavaScript 前端开发 开发者
Vue的响应式原理:深入探索Vue的响应式系统与依赖追踪
【4月更文挑战第24天】Vue的响应式原理通过JavaScript getter/setter实现,当数据变化时自动更新视图。它创建Watcher对象收集依赖,并通过依赖追踪机制精确通知更新。当属性改变,setter触发更新相关Watcher,重新执行操作以反映数据最新状态。Vue的响应式系统结合依赖追踪,有效提高性能,简化复杂应用的开发,但对某些复杂数据结构需额外处理。
|
19天前
|
JavaScript 前端开发 开发者
Vue是如何实现响应式系统的
【4月更文挑战第16天】Vue.js 的响应式系统基于 `Object.defineProperty` 监听数据变化,通过依赖收集和setter触发更新。当数据变化时,Watcher对象通知组件异步更新视图,优化性能。对数组的特殊处理确保视图同步。这套机制让开发者专注于业务逻辑,保证了性能和稳定性。
23 0