本文主要讲的是有关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创建的属性被覆盖导致框架的毁坏。
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
