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 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件