未在实例上定义，但在渲染期间引用，但可以按我的意愿工作
Posted
技术标签:
【中文标题】未在实例上定义，但在渲染期间引用，但可以按我的意愿工作【英文标题】：is not defined on the instance but referenced during render but works as i want 【发布时间】：2021-09-16 02:37:59 【问题描述】：现在我正在学习 vuejs，但遇到了一些问题， 我希望有人可以帮助我。
我有 index.html 和 app.js，当我在控制台中的浏览器中运行时，它会打印：
vue.js:634 [Vue 警告]：属性或方法“count”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
但问题是，为什么当我点击按钮时该功能仍然有效？
这是我的完整代码：
Vue.component('click-counter',
template: '<button @click="count++"> count </button>',
data()
return
count: 0
)
Vue.component('click-counter-using-defined-template',
template: '#click-counter-template',
data()
return
count: 0
)
new Vue(
el: '#app'
)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning</title>
</head>
<body>
<div id="app">
<h1>learning component</h1>
<!-- basic component -->
<click-counter></click-counter>
<!-- component template -->
<!-- Remember! Component template must contain exactly one root element. -->
<click-counter-using-defined-template></click-counter-using-defined-template>
<script type="text/x-template" id="click-counter-template">
<div style="border: 1px dashed orange;">
<p>we re counter</p>
<button @click="count++"> count </button>
</div>
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>【问题讨论】：
【参考方案1】：在您的代码中，“text/x-template”实际上位于 vue 实例所附加到的 div 中。 Vue 文档指出，这种方式的模板定义需要在附加的 DOM 元素之外，通过将模板代码移到附加的 div 之外，警告就会消失。
https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates
您的 x-template 需要在 Vue 所附加的 DOM 元素之外定义。
在您的代码中，Vue 在附加的 div 中遇到了“count”，但实际上并未在根实例中定义“count”。警告很可能源于此。
【讨论】：
以上是关于未在实例上定义，但在渲染期间引用，但可以按我的意愿工作的主要内容，如果未能解决你的问题，请参考以下文章
属性或方法“sendResetMail”未在实例上定义，但在渲染期间引用