解析：vue.js中组件的data数据为什么是函数？

最新推荐文章于 2021-03-03 16:52:33 发布

chunzhuang9775

最新推荐文章于 2021-03-03 16:52:33 发布

阅读量381

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3490747/blog/911934

版权

1.首先，我先以vue的方法下一个简单的组件。

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件中的数据为什么是函数</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="box">
		<example></example>
	</div>

<!-- - - - 组件模板 - - - - -->
	<template id="ex"><h1>{{msg}}</h1></template>
</body>
</html>

<script>
	var vm=new Vue({
		el: '#box',
		components:{
			//定义了一个名为example的组件
			//它的data数据是一个函数，函数中return出了一个对象，对象中包括了键/值-->msg:"hello"
			example:{
				template:'#ex',
				data:function(){
					return {
						msg:"hello"
					}
				}
			}	
		}
	})
</script>

以上使用vue.js写出的一个example组件。

2.在vue.js中注册一个组件，就相当于是在原生JavaScript中写一个构造函数（构造函数的作用就是用来造对象）。下面我将用JavaScript代码写一个构造函数。

<script type="text/javascript">
var Example=function(){

	};
	Example.prototype.data={  // 设置构造函数中的data 通过prototype向Example对象添加data属性
		a:1,
		b:2
	};
	var components1=new Example();  // 创建实例(components1)
	var components2=new Example();  // 创建实例(components2)
	console.log(components1.data.a)  //打印出1

	components1.data.a=10;  //给components1.data.a赋值为10
	console.log(components2.data.a)  //打印出10
</script>

在上面的这个例子中，对component1进行更改,component2也发生变化了，如果不想出现这种情况, 我们可以将data 保护在一个独立的作用域内(包在一个函数中)。

3.下面这组代码是我将data包在一个函数内。

<script type="text/javascript">
var Example=function(){
		this.data=this.data()  
	};
	Example.prototype.data=function(){  // 将data保护在了一个独立作用域内
		return {
			a:1,
			b:2
		}
	};
	var components1=new Example();
	var components2=new Example();
	
	components1.data.a=300;  //把300赋值给了components1.data.a
	console.log(components1.data.a)  //components1.data.a打印出了300
	console.log(components2.data.a)  // components2.data.a打印出了1
</script>

通过使用原生JavaScript构造函数的分析可以得出：

在vue.js中，组件的数据使用函数，是为了将数据保护在一个独立的作用域中，不受到其他组件的污染。

转载于:https://my.oschina.net/u/3490747/blog/911934