本文主要讲的是有关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.datavm.$data的区别了吧,两者除了长得像就没有联系了!两者就是为了区分开vue创建的属性 和我们自己创建的属性,以便于我们自己在创建属性的时候不会和vue创建的属性发生冲突而导致vue创建的属性被覆盖导致框架的毁坏。

Logo

前往低代码交流专区

更多推荐