(详细及解决方法)关于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博客

目录
相关文章
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
77 3
|
3月前
|
JavaScript 开发者
vue学习之响应式数据绑定
响应式数据绑定
48 0
|
23天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
27 3
|
27天前
|
缓存 JavaScript UED
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
31 2
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
23天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
24 0
|
2月前
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
该文章对比了Vue2与Vue3在响应式原理上的不同,重点介绍了Vue3如何利用Proxy替代Object.defineProperty来实现更高效的数据响应机制,并探讨了这种方式带来的优势与挑战。
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
在 Vue3 中,如何使用 setup 函数创建响应式数据?
在 Vue3 中,如何使用 setup 函数创建响应式数据?