正文
在重构项目是也是遇到两个场景出现上述报错。
- 第一种是完全切合官方的提示，在模板中有使用到某个属性，而在setup选项中没有定义，包括
defineProps传递进来组件的数据和组件本地数据。
// 请确保模板中使用的属性在setup选项中有定义 <script setup> import { ref } from 'vue' const status = ref(false) </script> <template> <div v-if="status"></div> <template/> // 组件传入参数 <script setup> defineProps({ status: { type: Boolean } }) </script> <template> <div v-if="status"></div> <template/>
- 第二种就是不切合官方提示的场景。由于自己项目重构，使用到的UI库是elementPlus，模板代码和逻辑层代码部分是从Vue2版本直接移植过来，使用Vue3写法修改的。在使用到elementPlus中的表单Form结合Vue3写法就出现了上述问题。
// 在Vue2.x中，elementUi的表单Form中的ref和v-model同名时不会出现问题 <el-form ref="myForm" v-model="myForm"></el-form> 获取 this.$ref.myForm... this.myForm... // 在Vue3.x的setup语法糖下，elementPlus的表单Form中的ref和v-model同名时就会出现同名覆盖的问题，ref的优先级更高 //定义 const myForm = reactive({ name: '小明', age: 18 }) <el-form ref="myForm" v-model="myForm"></el-form> console.log(myForm) // 打印出来的是el-form的组件DOM实例，模板找不到v-model的值，就会报`Property "myForm" was accessed during render but is not defined on instance.`
解决方法
- 请确保好模板中引用到的属性，在setup语法糖中有定义或被组件传入。
- Vue3的
setup语法糖写法下，在使用elementPlus的表单Form时要注意，ref和v-model不要同名，问题就得到解决了。
常用的JavaScript设计模式
- 单体模式
- 工厂模式
- 例模式
函数
- 函数的定义
- 局部变量和全局变量
- 返回值
- 匿名函数
- 自运行函数
- 闭包
