vue的这个知识点初学者你需要知道一下----vue实例对象有关`$`符号在vue中的理解

本文主要讲的是有关vue当中对于 $ 符号的理解。 如果你已经明白他的含义了，那么看到这里你已经可以忽略这篇文章了，这是一篇偏向于基础的文章。

官方文档原话是这样说的：

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

用户自己可以给vue对象创建属性与方法，当然，vue自己也给用户暴露了一些属性与方法，为了区分开用户自己定义的属性与方法，那么vue创建的属性与方法都会有一个$ 符号来标识。
那么这样来说的话，就有了下面的这种情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{
     
     {a}}
		</div>

		<script type="text/javascript">
			var data = {
       
       
				a: 1
			};
			var vm = new Vue({
       
       
				el: "#app",
				data: data
			});

			vm.$data.a = "test...."
			//vm.$data  是vue创建的属性
			console.log(vm.$data === data); // true
			//vm.data 是我们自己声明的属性
			console.log(vm.data === data); //false
			console.log(vm.data); // undefined
			//给vm.data 赋值
			vm.data = "vm.data";
			console.log(vm.data === data);   //false
			// 从下面的输出结果来看，两者除了名字长的很像之外，没有任何联系 就像Java 和 JavaScript一样
			console.log(vm.data);		// vm.data
			console.log(vm.$data);		// {"__ob__":{"dep":{"id":2,"subs":{"length":0}},"value":{"__ob__":{"dep":{"id":2,"subs":"Object"},"value":{"__ob__":"Object"},"vmCount":1}},"vmCount":1}}
		</script>

	</body>
</html>

就如同上面的vm.$data这个属性就是vue创建的一个属性，而不是我们创建的，vm.data则是我们创建的属性。

他们两个有着本质上面的区别
- vm.$data这个属性不管我们是否去使用他都已经被vue所创建，这个属性就存在与vue的对象当中。因为他是vue在被创建的时候一起创建的,所以如果我们去尝试用控制台 console.log(vm.$data) 输出这个对象的时候，会发现控制台会给我们返回来一个对象，而这个对象就是我们上面所说的vue在被创建的时候跟随着一起创建的属性。
- ```
	console.log(vm.$data);		// {"__ob__":{"dep":{"id":2,"subs":{"length":0}},"value":{"__ob__":{"dep":{"id":2,"subs":"Object"},"value":{"__ob__":"Object"},"vmCount":1}},"vmCount":1}}
```
- vm.data这个属性最开始在vue的对象中其实并不存在。在vue对象被创建的时候，vm这个对象并没有 vm.data这个属性，所以我们如果尝试去用控制台去console.log(vm.data) 输出一下这个 vm.data属性的时候就会发现控制台给我们返回了undefined这个值，那就说明这个属性并没有被定义。
- ```
console.log(vm.data); // undefined
```
看到这里我想你已经明白了 vm.data 和 vm.$data的区别了吧，两者除了长得像就没有联系了！两者就是为了区分开vue创建的属性和我们自己创建的属性，以便于我们自己在创建属性的时候不会和vue创建的属性发生冲突而导致vue创建的属性被覆盖导致框架的毁坏。

vue的这个知识点初学者你需要知道一下----vue实例对象有关`$`符号在vue中的理解

猜你喜欢