【Vue】datav入门/datav怎么不能显示图像/复制粘贴data数据没反应/datav错误The “data“ option should be a function

看着手册学习datav，在理解完指令、组件的概念；对文档上使用的出发点就是，导入包之后，直接复制标签，然后再export default载入数据即可，所以一直理解不了data这个加载是怎么个逻辑，最后的结论原来是在config的设置上。

错误的做法：

直接把代码复制，这样就会直接报错The "data" option should be a function
。
照着网上的调整了返回data函数的写法，还是不行。

虽然说默认输出的data，但是 图标标签指向的是config属性，所以数据得放在config里面。

那么在手册上面可以找到这么一个表，来去对照config需要设置什么。

也就是格式得这样设置

然后而这样还不够，会报另外一个错——渲染的属性没定义或者config属性就没有被定义


因此，最后的解决办法是，参考了b站的视频，在和这个config解构前面补充了data(){ return { xxxxx } }，和 data: function() { return {}对比就是少了这个部分: function，作用就完全不一样了。

	export default {
		data() {
			return {
				config: {
					data: [{
							name: '周口',
							value: 55
						},
						{
							name: '南阳',
							value: 120
						},
						{
							name: '西峡',
							value: 78
						},
						{
							name: '驻马店',
							value: 66
						},
						{
							name: '新乡',
							value: 80
						}
					],
					radius: '90%',
					lineWidth: '20',
					showOriginValue : true,
				}
			};
		}
	}

总结，对这个东西的理解就是，首先该标签通过data(){}指向这个标签dv-active-ring-chart，然后再通过config传入图标的配置信息。

gpt了一下跳出这个datav这个东西的一个解释，data() 方法的作用如下：

提供了组件内部的数据存储和管理机制：通过在 data() 方法中返回的对象中定义数据，Vue 实例会自动将这些数据转换为响应式的，即当数据发生变化时，相关的视图会自动更新。
将组件的数据与视图进行绑定：定义在 data() 方法中的数据可以直接在模板中使用，通过双花括号插值语法（{{ }}）或者指令（如 v-bind、v-model）将数据绑定到视图上。
提供了对组件内部状态的访问和修改：在组件的其他方法中（如 methods、computed、watch 中），可以直接通过 this 访问 data() 方法返回的对象，以读取或修改组件内部的数据。

补充：export default 和 var app = new Vue两种方式实现实例的差别

export default 和 var app = new Vue 是两种不同的语法，用于在 Vue.js 中创建和导出 Vue 实例的方式。

var app = new Vue({…})：

这是 Vue.js 早期版本中常用的方式，用于创建一个 Vue 实例并将其存储在变量 app 中。
通过 new Vue({…}) 创建的 Vue 实例可以直接在代码中使用，例如通过 app.$mount(‘#app’) 将实例挂载到指定的 HTML 元素上。

export default：

这是 ES6 模块系统中的导出默认值的语法，用于将某个变量、函数、类或对象作为模块的默认导出。
使用 export default 导出的 Vue 实例，通常是在单文件组件 (Single File Components) 或者模块化开发中使用的。例如，在一个名为 App.vue 的单文件组件中，可以这样导出 Vue 实例：export default { … }。
使用 export default 导出的 Vue 实例，在其他文件中可以使用 import 语法导入并使用该实例。

主要区别：

var app = new Vue({…}) 是在 Vue.js 中常见的旧的创建 Vue 实例的方式，而 export default 则是 ES6 模块系统中用于导出默认值的语法。
前者用于直接在当前文件中创建 Vue 实例并存储在变量中，后者用于将 Vue 实例作为模块的默认导出，以便在其他文件中引用和使用。

所以 如果是通过UMD单文件的方式去操作，只能通过vue实例：

var app = new Vue({
		el: '#app',
		data() {
				return {
					config: {
						data: [{
										name: '周口',
										value: 55
									},
									{
										name: '南阳',
										value: 120
									},
									{
										name: '西峡',
										value: 78
									},
									{
										name: '驻马店',
										value: 66
									},
									{
										name: '新乡',
										value: 80
									}
								],
								radius: '90%',
								lineWidth: '20',
								showOriginValue : true,
					}
					}
				}
		
	  })