This knowledge point of vue, beginners, you need to know ---- vue instance object about the understanding of `$` symbol in vue

This article mainly talks about the understanding of the $ symbol in vue. If you already understand his meaning, then you can ignore this article when you see it here. This is an article that is biased towards the basics.

The original words of the official document say this:

In addition to data properties, Vue instances also expose some useful instance properties and methods. They all have a prefix $to distinguish them from user-defined properties.

Users can create properties and methods for vue objects. Of course, vue itself exposes some properties and methods to users. In order to distinguish user-defined properties and methods, the properties and methods created by vue will have a $symbol to identify them.
So if you put it this way, the following situation

<!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>

Just as the above vm.$dataattribute is an attribute created by vue, instead of what we created, vm.datait is an attribute created by us.

The two of them have essential differences
- vm.$dataThis property has been created by vue no matter whether we use it or not, and this property exists in the vue object. Because he was vue created together when they were created, so if we try to use the console console.log(vm.$data)output when this object, we will find that the console will return to an object, and this object is what we said above in vue When it is created, it follows the attributes created together.
- ```
	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.dataThis property did not actually exist in the Vue object at the beginning. When vue object is created, vmthis object is not vm.datathe property, so if we try to go with the console console.log(vm.data)output at this vm.dataproperty when we return to console you will find the undefinedvalue, it shows that this property has not been definition.
- ```
console.log(vm.data); // undefined
```
See here I think you have to understand vm.dataand vm.$datadistinguish the bar, in addition to the two it looks like no contact! The two are to distinguish the properties created by Vue from the properties created by ourselves, so that when we create the properties, we will not conflict with the properties created by Vue and cause the properties created by Vue to be overwritten and lead to the destruction of the framework.

This knowledge point of vue, beginners, you need to know ---- vue instance object about the understanding of `$` symbol in vue

Guess you like