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

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
36 1
|
2月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
67 0
|
3月前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
34 3
|
3月前
|
缓存 JavaScript UED
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
42 2
|
3月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
3月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
3月前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
33 0