关于vue学习的经常性错误
目录
常见问题：
1关于引用本地下载es6模块文件，报404错误
2 使用createApp函数后没有调用mount函数挂载到浏览器
3 在mount函数中，忘记引用插值表达式所在标签的定位符如 标签选择器，类选择器等
4在直接使用Vue3函数时，没有import导入
5 在使用ref定义响应式数据时，对基本数据类型进行赋值需要.value 获取该数据的值
6 在return 中忘记 提供给标签需要的响应数据或函数
背景：使用模块化开发模式，完成局部引用vue工程
如下代码所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><div id="app"> {{name}} <h5>名字：{{objData.name}}，年龄：{{objData.age}}</h5><p>{{array[0]}},{{array[1]}},{{array[2]}}</p><p>{{a}}</p></div><script type="module">// 模块化开发模式import{reactive,createApp,ref} from './vue.esm-browser.js'createApp({setup(){const objData = reactive({"name": 'objData','age':20})const a=ref("Hello Vue!!!!!!!!!!!!!!!!!!")return{name: 'Hello Vue',objData,array:[11,22,33],a}}}).mount('#app')</script>
</body>
</html>测试结果
常见问题：
1关于引用本地下载es6模块文件，报404错误
解决：在网络通畅的条件下，从Vue官网上引用 es6文件链接
https://unpkg.com/vue@3/dist/vue.esm-browser.js
2 使用createApp函数后没有调用mount函数挂载到浏览器
错误：
Failed to load resource: the server responded with a status of 404 (Not Found)
测试结果
3 在mount函数中，忘记引用插值表达式所在标签的定位符如 标签选择器，类选择器等
错误：
vue.esm-browser.js:2260 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.
4在直接使用Vue3函数时，没有import导入
错误：
Uncaught ReferenceError: reactive is not defined
测试结果
5 在使用ref定义响应式数据时，对基本数据类型进行赋值需要.value 获取该数据的值
错误：
[Vue warn]: Unhandled error during execution of native event handler at <App>
warn$1 @ vue.esm-browser.js:2260
logError @ vue.esm-browser.js:2471
handleError @ vue.esm-browser.js:2463
callWithErrorHandling @ vue.esm-browser.js:2409
callWithAsyncErrorHandling @ vue.esm-browser.js:2414
invoker @ vue.esm-browser.js:11274
vue.esm-browser.js:2476 Uncaught TypeError: Assignment to constant variable.at changeData (ref和reactive错误.html:20:25)at callWithErrorHandling (vue.esm-browser.js:2407:19)at callWithAsyncErrorHandling (vue.esm-browser.js:2414:17)at HTMLButtonElement.invoker (vue.esm-browser.js:11274:5)
测试结果
6 在return 中忘记 提供给标签需要的响应数据或函数
错误：
[Vue warn]: Property "changeData1" was accessed during render but is not defined on instance. at <App>
warn$1 @ vue.esm-browser.js:2260
vue.esm-browser.js:2260 [Vue warn]: Property "data1" was accessed during render but is not defined on instance. at <App>
warn$1 @ vue.esm-browser.js:2260
vue.esm-browser.js:2260 [Vue warn]: Unhandled error during execution of render function at <App>
warn$1 @ vue.esm-browser.js:2260
VM23:15 Uncaught TypeError: Cannot read properties of undefined (reading 'name')at Proxy.render (eval at compileToFunction (vue.esm-browser.js:18210:18), <anonymous>:15:86)at renderComponentRoot (vue.esm-browser.js:8652:16)at ReactiveEffect.componentUpdateFn [as fn] (vue.esm-browser.js:7469:46)at ReactiveEffect.run (vue.esm-browser.js:588:19)at setupRenderEffect (vue.esm-browser.js:7604:5)at mountComponent (vue.esm-browser.js:7379:7)at processComponent (vue.esm-browser.js:7332:9)at patch (vue.esm-browser.js:6861:11)at render (vue.esm-browser.js:8129:7)at mount (vue.esm-browser.js:6129:13)
测试结果
总结
后期在学习过程中，遇到相关的问题会及时更新！