目录
2 使用createApp函数后没有调用mount函数挂载到浏览器
3 在mount函数中，忘记引用插值表达式所在标签的定位符如 标签选择器，类选择器等
5 在使用ref定义响应式数据时，对基本数据类型进行赋值需要.value 获取该数据的值
背景：使用模块化开发模式，完成局部引用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)
测试结果
总结
后期在学习过程中，遇到相关的问题会及时更新！