很多人把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特权方法
这样简单概念的说明是否可以帮助您理解它们之间的区别?如果还有什么不清楚的,随时欢迎交流哈
