chaihongjun.me

vue实例和vue组件有什么不同

经过Vue组件的学习,发现Vue组件和我们new Vue实例化的对象有些相似以及不同的地方。

首先相同的地方:

  1. 通过new实例化Vue实例对象的时候传入的参数是一个对象,这个对象里面有很多的Vue选项可以使用,比如el,data,computed,methods,components等等

  2. 同样的通过Vue.component方式声明的全局组件,它的第二个参数也是一个对象,同样也是里面包含很多可用的选项,data,computed,methods,components等等

不同的地方,组件的data是一个function,组件没有el挂载点这个选项。除了这两点,实际基本上可以将Vue实例与Vue组件等同于一个东西来看待。

可以想象我们平时new Vue的实例对象当作一个根组件,这个根组件内部可以含有子组件,这个根组件位于整个组件树的最上层。然后,我们自己创建的组件,一般可以视为子组件,这些组件可以放到根组件内。另外,还有一些所谓的游离组件,通过new Vue().$mount()的方式挂载到页面上,比如页面右侧的客服悬浮窗,比如一些弹窗等等,不属于整个页面整体主要部分,当然这些游离的组件也可以有它们自己的子组件。

对于SPA单页面应用,URL不发生实际跳转,一般通过路由构建SPA结构,SPA的根组件就变成这个应用的组件树的始祖,所以也就是一般意义上SPA只有一个根组件。

所以,可以理解成整个页面是由多个层级的组件构成的,亦或是多个Vue实例组合而成。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»