搞懂了Vue对象与实例的区别！

很多人把Vue对象和Vue实例混为一谈，但它们还是有区别的

Vue构造函数就像一台智能手机的设计图纸,定义了这款手机的总体结构和组件。而每部依照设计图组装出来的真实手机,就是Vue实例。

设计图上注明了屏幕尺寸、CPU型号等静态信息,对应Vue对象的静态属性;设计图也列出了手机需要具备的功能,例如拍照、打电话,对应Vue对象的静态方法。

而实际生产的每部手机,都可以获取到这些设计信息,也继承了手机需要的各种功能,这是Vue实例获得的静态属性和方法。

另外,每部手机还拥有独特的IMEI码、使用次数等动态信息,以及拨号、安装APP等实例方法。这对应Vue实例特有的实例属性和方法。

为了区分静态信息和实例信息,智能手机会在实例信息前加上特殊标志,如在手机IMEI码前加“#”。Vue同样使用“$”标记实例方法。

所以明确Vue对象与实例的区别,就像理解设计图与实际产品的关系,这可以让我们更准确地使用Vue开发应用。

// Vue 构造函数
const Vue = {} 

// 实例对象 
const vm = {}

// 在 Vue 对象上定义静态方法
Vue.print = function() {
  console.log('hello')
} 

// 在实例上定义实例方法
vm.print = function() {
  console.log('world')
}

// 调用静态方法 
Vue.print() // hello

// 调用实例方法
vm.print() // world

在这个简单示例中:

Vue 对象就是一个普通的对象,我们在上面定义了一个静态方法 print
vm 对象代表 Vue 实例,在上面定义了一个实例方法 print
通过 Vue 和 vm 分别调用它们自己的 print 方法

所以区别在于:

静态方法定义在 Vue 构造函数对象上
实例方法定义在 Vue 实例对象上，另外注意带$的不一定都是实例方法哈

准确地说,在 Vue 中:

实例方法是定义在 Vue.prototype 上的方法,可以通过实例访问;
静态方法是定义在 Vue 构造函数上的方法,可以通过 Vue 直接访问。

Vue实例方法

定义在Vue.prototype上,通过Vue实例的this访问:

// 定义
Vue.prototype.$hello = () => console.log('hello')

// 调用 
const vm = new Vue()
vm.$hello() // hello

Vue静态方法

定义在Vue构造函数上,直接通过Vue访问:

// 定义
Vue.install = () => {
  // ...
}

// 调用
Vue.install()

带$的Vue静态方法

一些全局API方法带$,但也是定义在Vue上,通过Vue直接调用:

Vue.$nextTick(() => {
  // ...
})

它们的调用方式和作用域不同,但可以实现同名同功能的方法,这展示了 Vue 对象和实例的区别。

实例方法在原型prototype上,需要通过实例访问;静态方法在Vue构造函数上,可以直接调用。

$的意义很广,主要代表Vue特权方法

这样简单概念的说明是否可以帮助您理解它们之间的区别?如果还有什么不清楚的,随时欢迎交流哈

搞懂了Vue对象与实例的区别！

猜你喜欢