正文
VUE：组件总结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
##### 组件化
//node.js里面 require("./index.js")
模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css
而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的
组件应该拥有的特性：可组合，可重用，可测试，可维护
##### 组件
在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件
也就是说Vue实例和组件的实例有差别但是差别不大，因为毕竟一个是父类一个是子类
一般的应用，会拥有一个根实例，在根实例里面都是一个一个的组件
因为组件是要嵌入到实例或者父组件里的，也就是说，组件可以互相嵌套，而且，所有的组件最外层必须有一个根实例，所以组件分为：全局组件和局部组件
全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用
组件通过不同的注册方法成为全局、局部组件
创建组件：
```
Vue.extend(options)
```
全局注册：
```
var App = Vue.extend({
template:"<h1>hello world</h1>"
})
Vue.component('my-app',App)
```
简便写法：
```
// 创建组件构造器和注册组件合并一起
Vue.component('hello',{ //Vue会自动的将此对象给Vue.extend
template:"<h1>hello</h1>"
})
```
组件通过template来确定自己的模板,template里的模板必须有根节点，标签必须闭合
组件的属性挂载通过：data方法来返回一个对象作为组件的属性，这样做的目的是为了每一个组件实例都拥有独立的data属性
局部注册：
```
new Vue({
el:"#app",
components:{
'my-app':App
}
})
```
简便写法：
```
data:{},
components:{
'hello':{
template:"<h1>asdasdasdasdasdas</h1>"
}
}
```
在实例或者组件中注册另一个组件，这个时候，被注册的组件只能在注册它的实例或组件的模板中使用，一个组件可以被多个组件或实例注册
###### 注意浏览器规则
因为vue在解析模板的时候会根据某些html的规则，例如，在table里只能放tr,td,th..，如果放入组件不会解析 这个时候我们可以放入tr使用is方式来标识这个tr其实是组件
```
<table id="app">
<tr is="hello"></tr>
</table>
```
###### template
我们可以在html的某个地方通过template标签来定义组件的模板，在组件的template属性中通过选择器指定对应的template标签内容就可以了,注意，需要给template标签加id来指定
```
<template id="my-hello">
<div>
<h1>hello world</h1>
<p>hahahah</p>
</div>
</template>
//组件中
template:"#my-hello"
```
###### is切换
在实例、组件的模板中的某一个标签上，可以通过is属性来指定为另一个目标的组件，这个时候我们一般会使用component标签来占位、设置is属性来指定目标组件
```
<component :is="type"></component>
//组件中
data:{
type:'aaa'
},
components:{
'aaa':{template:"<h1>AAAAAAAAAAAAA</h1>"},
'bbb':{template:"<h1>BBBBBBBBBBBBB</h1>"}
}
```
###### 组件嵌套
应用中划分的组件可能会很多，为了更好的实现代码复用，所以必然会存在组件的嵌套关系
组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。
##### 过滤器
vue中可以设置filter(过滤器)来实现数据格式化，双花括号插值和 v-bind 表达式中使用
vue1.0的有默认的过滤器，但是在2.0的时候全部给去掉了
所以在vue中如果想要使用过滤器就需要自定义
自定义的方法有两种：全局定义和局部定义，
全局定义的过滤器在任意的实例、组件中都可以使用，
局部定义就是在实例、组件中定义，只能在这个实例或组件中使用
1. 全局定义
Vue.filter(name,handler)
name是过滤器的名字，handler是数据格式化处理函数，接收的第一个参数就是要处理的数据，返回什么数据，格式化的结果就是什么
在模板中通过 | (管道符) 来使用,在过滤器名字后面加（）来传参，参数会在handler函数中第二个及后面的形参来接收
```
<p>{{msg | firstUpper(3,2)}}</p>
Vue.filter('firstUpper',function (value,num=1,num2) {
console.log(num2)
return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
})
```
2. 局部定义
在实例、组件的配置项中设置 filters，键名为过滤器名，值为handler
```
filters:{
firstUpper:function (value,num=1,num2) {
console.log(num2)
return value.substr(0,num).toUpperCase()+value.substr(num).toLowerCase()
}
}
```
##### 虚拟dom
频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想
(1) 提供一种方便的工具，使得开发效率得到保证
(2) 保证最小化的DOM操作，使得执行效率得到保证
也就是说，虚拟dom的框架/工具都是这么做的：
1. 根据虚拟dom树最初渲染成真实dom
2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法），。得到需要更新的地方之后，更新内容
这样的话，就能大量减少真实dom的操作,提高性能
什么是虚拟dom？与key值的关系？
Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用
虚拟dom进行diff，算出最小差异，然后再修改真实dom。
当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。而虚拟DOM是用javascript对象表示的，而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，最后统一一次更新DOM。因而可以提高性能
[https://blog.csdn.net/mrliber/article/details/79036828]
[https://blog.csdn.net/weixin_42695446/article/details/84680213]
虚拟DOM的缺点：
1. 代码更多，体积更大
2. 内存占用增大
3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快
###### prop 传递数据
组件实例的作用域是孤立的,父组件不能直接使用子组件的数据，子组件也不能直接使用父组件的数据
父组件在模板中使用子组件的时候可以给子组件传递数据
```
<bbb money="2"></bbb>
```
子组件需要通过props属性来接收后才能使用
```
'bbb':{
props:['money']
```
如果父组件传递属性给子组件的时候键名有'-'，子组件接收的时候写成小驼峰的模式
```
<bbb clothes-logo='amani' clothes-price="16.58"></bbb>
////
props:['clothesLogo','clothesPrice']
```
我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件
