vue3 ts ‘get‘ on proxy: property ‘provider‘ is a read-only and non-configurab

jdjfjgfdgdfg

已于 2022-05-18 16:57:16 修改

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： vue typescript 前端 nodejs webpack

于 2022-04-25 16:19:45 首次发布

本文链接：https://blog.csdn.net/jdjfjgfdgdfg/article/details/124407358

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了在Vue3、TypeScript和Webpack环境下，遇到引入外部JS库并尝试调用其方法时，由于双向绑定(ref, reactive)导致的错误。错误信息涉及到proxy的只读属性问题。解决方案包括避免使用双向绑定，直接将变量挂载到window对象上，或者使用markRaw或toRaw获取原始数据。通过这两种方法，成功解决了调用JS库函数时的异常问题。

摘要由CSDN通过智能技术生成

Vue3 + ts + webpack
在public/index.html引入其他js工具库
调用js库提示以下错误：

‘get’ on proxy: property ‘provider’ is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected ‘#’ but got ‘#’)

调用工具库内部就报错，不调用就不报错，那问题就在这个调用工具库那个区块使用上。
网上大量搜查，发现是赋值的参数绑定这个双向绑定。
js工具库赋值给 ref 或 reactive 声明的变量导致的。
问题代码：
js工具库：test.js

const params = ref(null)
params.value =  testJS.init()
params.value.testJSMethods()  再次调用js工具库内的函数就抛出异常

或

const  dataAll= reactive({
	params: ''
})
dataAll.params =  testJS.init()
dataAll.params.testJSMethods()  再次调用js工具库内的函数就抛出异常

方法一

修正，params参数声明不要使用双向绑定(ref,reactive)。


window.params =  testJS.init()

window.params.testJSMethods()

这个修改就成功了，大家也可以不用绑定在window上，可以用其他的方式存储变量，不是双向(ref,reactive)的就行。

方法二

import { markRaw,toRaw } from 'vue';

const params = ref(null)

params.value = markRaw( testJS.init())  //获取原始数据设置
or 
params.value = toRaw( testJS.init())  //获取原始数据设置

params.value.testJSMethods()