Vue3报错Property “xxx“ was accessed during render but is not defined on instance(1)

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 第一种是完全切合官方的提示，在模板中有使用到某个属性，而在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/>

2. 第二种就是不切合官方提示的场景。由于自己项目重构，使用到的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.`

解决方法

1. 请确保好模板中引用到的属性，在setup语法糖中有定义或被组件传入。
2. Vue3的setup语法糖写法下，在使用elementPlus的表单Form时要注意，ref和v-model不要同名，问题就得到解决了。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它