[VueJS] V1 与 V2 组件实体之差异

Posted 2021-05-01 前端乖乖

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[VueJS] V1 与 V2 组件实体之差异相关的知识，希望对你有一定的参考价值。

狂贺！终于正式发布！

关于 Vue 2.0 的新特性，作者也在官方 Blog - ()一文中叙述地相当详细，这里就不多说。

如果你也与我一样是从 V1 就开始接触的开发者，一定都知道 VueJS 最核心的一部分是 Component，而 Component 是由实体 (VueInstance) 来实现。我们谈谈 Vue 1.x 与 2.x 组件实体的差异。

Vue 2.0 组件实体注册

像上面这样的网站，我们可以将它抽象化为一棵「组件树」，而每个组件树都会有个根节点，或称为根实体 (root Vueinstance)。

那么，每个 Vue 组件树的根实体其实是透过 Vue 这个建构函式所产生：

var vm = new Vue({
// options
});

将 Vue 组件与实体 DOM 结合的方式有两种，一种是直接写在 el option 内：

var vm = new Vue({
el: '#app'
});

而另一种方式则是透过 $mount 来指定节点：

var vm = new Vue({
// options without 'el'
});

vm.$mount('#app');

这部分跟 Vue 1.x 的注册是完全一样的，但是需要注意的是，在 vue 1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，但到了 VueJS 2.0 后，只能透过独立的节点挂载，如: div 等。否则会产生错误，警告讯息如下：

“Do not mount Vue to <html> or <body> - mount to normal elements instead.“

换成用独立的 DOM 节点，如 <div id="app"></div>，就可以正常运作了。

Vue 2.0 组件实体的生命周期

[VueJS] V1 与 V2 组件实体之差异

基本上 Vue 2.0 实体生命周期中，大部分的阶段都与 Vue 1.x 是一样的，最大的不同在于 lifecyclehook 名称的改变，以及在组件被挂载 mounted 之后，还新增了 beforeUpdate 以及 updated 这两组侦测更新的 hook。

vue 1.x 的 init 变成 beforeCreate ， beforeCompiled 改为 beforeMount。而原本的 complied 与 ready 则是统一收敛成 mounted。

另外需要注意的是，若组件本身是透过 server-siderendering 的话，除了 beforeCreate 以及 created 以外的所有 hook 都不会被呼叫（https://vuejs.org/api/#Options-Lifecycle-Hooks）。

有关组件 V-DOM 的重新渲染与更新后面再提，其他部分则与 Vue 1.x 大同小异。

Vue 2.0 组件与模板的编译 - RenderFunction

在大部分情况下，透过组件的 template 属性，或是直接写在 HTML 中就已经足够操作你的组件了。不过若是你想完全透过 javascript 来操作你的组件，那么可以使用 render 这个 function 直接来写底层的 virtual-DOM 来取代 template 属性。 VueJS 2.0 的 virtual DOM 机制，是采用这个 virtual DOM 的 library 来实作的。

可以使用 createElement 这个 function 来建立你的组件内容：

// @returns {VNode}
createElement(
// {String | Object | Function}
// An HTML tag name, component options, or function
// returning one of these. Required.
'div',
// {Object}
// A data object corresponding to the attributes
// you would use in a template. Optional.
{
// (see details in the next section below)
},
// {String | Array}
// Children VNodes. Optional.
[
createElement('h1', 'hello world')
createElement(MyComponent, {
props: {
someProp: 'foo'
}
}),
'bar'
]
)

官方也提供了一个完整的 render function 范例：

var getChildrenTextContent = function (children) {
return children.map(function (node) {
return node.children
? getChildrenTextContent(node.children)
: node.text
}).join('')
}
Vue.component('anchored-heading', {
render: function (createElement) {
// create kebabCase id
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\\W+/g, '-')
.replace(/(^\\-|\\-$)/g, '')
return createElement(
'h' + this.level,
[
createElement('a', {
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default)
]
)
},
props: {
level: {
type: Number,
required: true
}
}
})

当然，你可能跟我一样觉得一层又一层的 createElement 看了总是让人厌烦，你也可以透过这个 Plugin: ，来做 JSX 语法的转换，如果你曾是 react 应用程序的开发者，应该对 JSX 语法不陌生。写起来会像这样：

import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})

在预设情况中，VueJS 2.0 会将 template 内的 HTML 透过 parse 转换成 AST，再自动转换优化成 renderfunction 去建立 virtual DOM。在建立 virtual DOM 之后，透过 observe 机制与数据进行绑定，再compile 成实体的 DOM 并渲染至网页上：

[VueJS] V1 与 V2 组件实体之差异

前面说过，VueJS 2.0 会将 template 内的 HTML 自动编译成 render function，下面这是官方文件以 Vue.compile 提供的 demo：

<div>
<h1>I'm a template!</h1>
<p v-if="message">
{{ message }}
</p>
<p v-else>
No message.
</p>
</div>

// render:
function anonymous() {
with(this){return _h('div',[_m(0),(message)?_h('p',[_s(message)]):_h('p',["No message."])])}
}

// staticRenderFns:
_m(0): function anonymous() {
with(this){return _h('h1',["I'm a template!"])}
}

Vue 2.0 组件的追踪变化

最后，我们来看看组件内状态的追踪变化。有写过 VueJS 1.x 的朋友应该知道，组件实体内有个 option 叫 data，这个 data 对象就是用来存放组件内状态/数据的地方。

与 Vue 1.x 相同的地方是，data 对象透过 Object.defineProperty() 来为组件内各属性设定「getter」与「setter」。就在 data 属性被存取修改时，会透过 getter/setter 来通知对象内属性的变化，当先前设定好的 setter 被呼叫的时候，会去触发 watcher 重新计算，也就会导致 DOM 的更新与重新渲染。