本文详细介绍了Vue的组件化概念，包括组件化与模块化的区别和优势，如提高开发效率和可维护性。文章讲解了Vue中组件的`.extend`构造器，强调组件`data`必须是函数以避免数据污染。同时，阐述了`template`选项的使用规则以及X-Template和``定义模板的方法。此外，还探讨了组件的全局和局部注册，以及在模块化项目中的注册策略。
vue组件化
1. 了解组件
1-1 组件化
组件 —— 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强，，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件
- 传统
web应用开发方式都是采用插件化形式开发，一个页面引入多个依赖文件（css文件、js文件），依赖关系紊乱不好维护并且代码复用性不高 vue则实现了组件化开发，将页面拆分成多个组件，每个组件依赖的CSS、JS、模板、图片等资源放在一起开发和维护，并且组件是独立的在系统内部可复用，组件和组件之间可以嵌套，可以极大简化代码量，并且对后期的需求变更和维护也更加友好
1-2 模块化
模块 —— 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架
1-3 组件化与模块化优点
- 开发和调试效率高 —— 随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改
- 可维护性强 —— 便于后期代码查找和维护
- 避免阻断 —— 模块化是可以独立运行的，如果一个模块产生了
bug，不会影响其他模块的调用 - 版本管理更容易 —— 如果由多人协作开发，可以避免代码覆盖和冲突
1-4 .extend构造器
.extend 是 Vue 中的构造器，用于创建一个子组件，参数是一个包含组件选项的对象
组件是可复用的 Vue 实例的，它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项
Vue.component注册组件时可以传入一个选项对象，并自动调用Vue.extend。当使用component注册组件时，会默认去找传入的对象并执行extend方法，所以可以简化extend构造器写法，直接省略以对象形式书写
<div id="app">
<head-title></head-title>
</div>
// Vue.extend组件构造器 —— 用于创建子组件，可传入与实例相同的options选项，除了el外
// 创建组件Vue.extend是一个VueComponent组件构造函数， title则为组件实例
// let headTitle = Vue.extend({
// // template 组件模版
// template: '<h3>{
{title}}</h3>',
// data() {
// return {
// title: 'Hello extend'
// }
// }
// })
// 可以省略Vue.extend 当注册组件时传入对象component会自动调用 Vue.extend
let headTitle = {
// template 组件模版
template: '<h3>{
{title}}</h3>',
data() {
return {
title: 'Hello extend'
}
}
}
const vm = new Vue({
el: '#app',
data: function() {
return {
}
},
// components 局部注册组件
components: {
headTitle
}
})
1-5 组件data必须是函数
Vue 源码中判断了 data 是否是个函数，如果是函数，就会使用 getData() 方法执行以下，并将执行后的结果作为最后的值，否则呢，就会直接使用用户自己设置的 data，如果 data是一个对象，那么就会走源码中的 else 代码，直接将用户传入的 data 进行使用，如果有多个组件，就会造成 data 数据共享，这样会形成数据污染
- 为了使每一个组件的状态相互不干扰，不形成数据污染，
data必须是一个函数
创建根实例的时候使用 new 的方式只能创建一个，是一个单例，不会像 vue 组件实例可以创建很多个，就不会发生 vue 组件实例中的数据污染，相互干扰
首先判断下是否是 vue 组件，那么执行 mergeDataOrFn 方法的时候就不会传第三个参数 vm 实例，所以就会进行 function 的校验，但是如果使根实例的时候，在执行 mergeDataOrFn 方法的时候传第三个参数，也就是 vm 实例，所以就会躲避了 function 的校验
Vue中根实例的data是没有限制的，可以是函数也可以是对象
1-6 template选项
-
template选项 —— 一个字符串模板作为Vue实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽-
如果
Vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟DOM直接替换掉Vue实例绑定的元素 -
template选项中的DOM结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素 -
在该属性对应的属性值中可以使用
Vue实例data、methods中定义的数据
-
-
el选项 —— 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例，如果render函数和template属性都不存在，挂载DOM元素的HTML会被提取出来用作模板
el选项只在用new创建实例时生效
<div id="app">
<h3>Hello World</h3>
<head-title></head-title>
</div>
let headTitle = Vue.extend({
// template 组件模版
// template选项只能有一个根元素 多个根元素会报错
// 可以在template中使用data methods computed等定义的数据
template: '<h3>{
{title}}</h3><p>Hello jsx</p>',
data() {
return {
title: 'Hello extend'
}
}
})
const vm = new Vue({
// el提供实例挂在的元素目标 可以是选择器或者元素对象
el: '#app',
// Vue实例中有template属性会替换掉Vue实例绑定的元素 挂载元素的内容都将被忽略
// template: '<h3>{
{title}}</h3>',
data: function() {
return {
title: 'hello vue'
}
},
components: {
headTitle
}
})
1-7 模版定义X-Template
模版定义 X-Template —— 定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去
x-template需要定义在Vue所属的DOM元素外
<div id="app">
<title-head></title-head>
</div>
<script type="text/x-template" id="title-head">
<h3>{
{
title}}</h3
最低0.47元/天 解锁文章
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
