[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declar

已于 2022-08-19 16:26:51 修改
阅读量1.7k 收藏 1
点赞数 4
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-08-19 16:19:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55869175/article/details/126426953
版权
在将Vue2项目升级到Vue3的过程中，遇到一个bug，问题在于input标签的双向绑定与ref属性冲突。在Vue2中，`ref`用于获取DOM元素，但在Vue3中，如果setup中的变量名与ref属性相同，会导致变量被替换为DOM元素。解决方案是避免使用相同的名称，以保持预期的数据绑定。参考官方文档可了解更多Vue2到Vue3的ref使用变化。
摘要由CSDN通过智能技术生成

在开发中，这是一个vue2的老项目改成vue3的。突然遇到一个bug，寻找了最后发现是vue2和vue3版本不同造成问题。
在这里插入图片描述

大概就是 input标签双向绑定一个对象里面的某个字段。

setup部分

const form = ref({ pushContent: "" });
    return {
      form,
    };

html部分

<el-form ref="form"  :model="form" size="small" label-position="top">
      <h3>推送设置</h3>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="推送内容">
            <el-input
              v-model="form.pushContent"
              placeholder="请输入推送内容"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
    </el-form>

问题所在：在这里插入图片描述

把这里的ref属性设置的值，不能和setup里面需要用到双向绑定的变量的名字一样。

在这里插入图片描述

  • 因为在vue2中 ，这样子使用ref，可以用$refs.form得到这个dom。
  • 但是在vue3中，本身定义变量的会使用到ref,所以如果你用ref定义的变量和你在标签中ref属性的值一样，那么vue会自动转换成类似于vue2中的$refs的用发，上面的form的值就不是我自己定义的对象，而是标签中的dom。

关于vue2中ref在vue3中的使用 可参考官网地址 ： 点击进入官网

也是够够的了
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
前端开发：Vue项目报错[Vue warn]：Property “visible“ must be accessed with “$data.visible“ because…问题解决方法
软贱开发攻城狮
02-01 1万+
前几天在开发项目的时候遇到一个报错提示，然后具体报错提示如下所示： vue.runtime.esm.js?a593:619 [Vue warn]: Property "visible" must be accessed with "$data.visible" because properties starting with "$" or "_" are not proxied in the Vue instance to prevent conflicts with Vue internals. See
Avoid adding reactive properties to a Vue instance or its root $data at runtime
Misnice的博客
11-17 1万+
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root dataatruntime−declareitupfrontinthedataoption.![在这里插入图片描述](https://img−blog.csdnimg.cn/0657961c352a4a77b5cf032ad72f4f3e.png)报错原因：this.data at runtime - declare it upfront in the dat
报错：Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfr
热门推荐
HELLO WORLD
04-01 3万+
报错内容： Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 报错代码 为啥会报错？ 知识点 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转...
vue2.7[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime -
最新发布
qq_42372534的博客
09-19 428
经过排查,报错原因是因为setup语法糖中返回了。使用vue2.7的setup语法糖中,绑定了。的变量同名了,改一下使其不同名字即可。
vue.runtime.esm.js?ff9b:619 [Vue warn]: You are using the runtime-only build of Vue where the templa
与其终的知识小窝
08-05 4613
vue错误提示： vue.runtime.esm.js?ff9b:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in < Root >)
【Vue】报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent
Pulse的博客
05-15 1万+
当我们直接改变父组件的 props 值是会报以下警告： [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “facomment” 会报错的原
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
软贱开发攻城狮
07-25 6527
前端开发中，在使用Vue开发的时候，经常会遇到一些很共性的报错提示，而且有时候提示已经很明确的告诉开发者问题出现在哪里，尤其是在Chrome的控制台输出上面，只要看一下输出日志就知道问题所在。但是对于一些刚入行的开发者来说，看日志的意识还没有养成，需要借助外力来解决问题，这样不是不可以，主要是要学会看输出的日志以及提示，这样才能很好的“对症下药”。httpshttpshttps。...
Avoid adding reactive properties to a Vue instance or its root $da
2201_75783276的博客
06-20 424
避免在运行时向Vue实例或其根$data添加反应性属性-在数据选项中预先声明它。在页面中声明对象，直接修改即可。
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declar
weixin_42091569的博客
06-20 3074
大家好我是王超朋: 想更快更有效率的结局bug,那就必须迅速的定位问题,找出和原因,但是我们在使用第三方框架时,有是有的bug让人找不到眉目.最简单的办法,就是吧他们的源码阅读一遍. 咋们看一下抛出该异常的代码块: /** vue.$set 函数 */ function set (target , key, val) { // 在生产模式下,isPrimitive是不是基本类型, if (process.env.NODE_ENV !== 'production' &&.
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront
qq_40860800的博客
02-22 7633
小程序中 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 上面报错的意思是没有在data中预先声明某一变量； 昨天不是说了在uni-app项目中重写了setData方法嘛，我记得微信小程序中使用this.setData({})时不提前声明变量是可以的，所以就习惯性的使用了，结果就一直报这
vue.runtime.esm.js:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritte
oschina_kk的博客
09-02 1万+
文章目录问题描述解决方案父组件子组件 问题描述 使用element-ui的el-dialog做二次封装时修改visible.sync绑定值报错； 这是由于父组件通过props传参子组件，子组件改变自身的props值引起的 解决方案 父组件 <NoteBookLimitFlow :isVisible="isShowFlowSearch"></NoteBookLimitFlow> 子组件 <template> <el-dialog title="XX
Vue问题五：Vue报错（Property or method “XXX?“ is not defined on the instance but referenced during render.）
Hawking的博客
05-03 3485
[Vue warn]: Property or method "animationData1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 今天写 uniapp 的..
Vue.set()和this.$set()介绍
weixin_53731501的博客
07-21 267
作用场景：数据修改后视图未更新（$set会触发整个页面重新渲染） 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } }
解析vue响应式原理1
weixin_45032957的博客
01-21 213
import Dep from ‘./dep’ import VNode from ‘…/vdom/vnode’ import { arrayMethods } from ‘./array’ import { def, warn, hasOwn, hasProto, isObject, isPlainObject, isPrimitive, isUndef, isValidArrayIndex, isServerRendering } from ‘…/util/index’ const arrayKeys
[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
06-02
这是一个 Vue.js 的警告，意思是在运行时避免向 Vue 实例或其根 $data 添加响应式属性，而应该在 data 选项中提前声明它。这是因为 Vue.js 在初始化时会对 data 中已经存在的属性进行响应式处理，但是对于后添加的属性则无法实现响应式更新。因此，为了避免出现不可预期的问题，建议在 data 选项中提前声明所有需要响应式处理的属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值