vue2学习笔记6 - 初步了解vue的实例和原型

Vue实例

首先，看看创建Vue实例之后，Vue中都有什么：

open in Live Server，打开开发者模式，在console中，可以看到打印出来的vm对象：

很长很长，未截全。但是，这些数据大概分为两类，以$开头的，和以_开头的。

1、$: Vue中暴露出来，可供用户调用的内置属性和方法

红框中带有$符的，是Vue框架提供的，可供用户调用的内置属性和方法们。从官网API中可看出，它们大概分为4类：实例属性，实例方法/数据，实例方法/事件，实例方法/生命周期。它们用于提供框架的一些功能。

这些实例属性和方法只能在 Vue 实例或组件内部使用。在模板中，我们可以直接访问这些属性和方法，但在 JavaScript 代码中，我们需要通过vue实例来访问它们（以后可能会经常使用this来访问）。

比如通过$data可获取到Vue实例的数据对象data：

执行看看效果，似乎通过$data访问数据对象，和直接访问数据对象，二者效果一样，那为什么要提供两种方式呢？

这里仅提供一个示例了解内置属性，更多的属性和方法以后慢慢学习。

2、_: Vue私有内置属性或方法

以_开头的，都是Vue私有的内置属性或方法，它们不应该直接在模板或计算属性中使用。这是因为在Vue中，以_开头的属性和方法是根据约定不被Vue的响应式系统跟踪的。如果需要在Vue实例中使用私有变量或方法，可以像使用其他变量或方法一样定义它们，但是要注意不要在模板或计算属性中引用它们，除非你明确地告诉Vue应该跟踪这些属性。（不太懂，姑且写在这里）。

原型

打印出来的vm对象继续向下滑动，可以看到除了以$和_开头的字段外，还有一个特殊的prototype，这就是大名鼎鼎的原型了。继续向下滑动，展开，会发现，propotype中还有propotype，想套娃一样，这就是原型链。

贴一段网上查来的解释：

        在JavaScript和Vue.js中，原型是一个重要的概念，它涉及到对象的继承和属性的查找机制。在JavaScript中，每个对象都有一个与之关联的原型对象，这个原型对象可以是另一个对象，它用于查找对象的属性和方法。当尝试访问一个对象的属性时，如果该对象内部不存在这个属性，那么JavaScript引擎会沿着原型链向上查找，直到找到对应的属性或查找到达原型链的顶端（Object.prototype）。这种通过原型实现的继承关系被称为原型链。

        在Vue.js中，原型可以用来添加全局功能或属性到所有的Vue实例中。例如，可以通过在Vue的原型上添加方法或属性，使得这些方法或属性可以在任何Vue组件内部通过this关键字直接访问。这种做法在需要让所有组件共享某些功能或数据时非常有用。

其实，不是很理解这种解释方式，从面向对象语言（java、c++）的角度来理解，这不就是继承么？原型就是从父类中继承来的属性和方法，父类又有父类，于是原型中又有原型，这就是原型链。当然，js中没有类的概念，它叫：原型。。。

而Vue中的原型，感觉是一个全局对象聚集地。当需要创建一个全局共享的数据或方法时，就放在原型中。