1.data属性：

通过data属性指定自定义组件的初始数据，要求data必须是一个函数，如果不是函数就会报错

例子：

/*定义组件需要在实例化vue之前*/

Vue.component("my-hello",{

template:"<button @click='count++'>按钮{{count}}</button>",

// 定义组件内部data: 必须通过函数定义

data:function(){

return {count:0};

}

});

new Vue({

el:"#app",

data:{

}

});

2.Props属性

组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。

父子组件的关系可以总结为 props 向下传递，事件向上传递。

父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。

1、在父组件中定义数据

2、在使用组件时，绑定父组件中的数据

3、在子组件中通过props属性声明父组件中传递过来的参数

4、在template属性中使用父组件中的参数

例子：

/*定义组件需要在实例化vue之前*/

Vue.component("my-hello",{

// 声明父组件传递过来的参数

props:["txt1","txt2"],

template:"<div>{{txt1}}：{{txt2}}</div>"

});

new Vue({

el:"#app",

data:{

msg:"来自系统的消息",

txt:"Hello Vue!"

}

});

3.props校验

子组件在接收父组件传入数据时, 可以进行props校验，来确保数据的格式和是否必传。可以指定一下属性：

1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组，只能是对象大写形式

2) required: 指定是否必输

3) default: 给默认值或者自定义函数返回默认值

4) validator: 自定义函数校验

非props属性

引用子组件时，非定义的props属性,自动合并到子组件上,class和style也会自动合并。

4.自定义事件

父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件$on和$emit：

$on监听: 不能监听驼峰标示的自定义事件, 使用全部小写(abc)或者-(a-b-c)

$emit主动触发: $emit(事件名,传入参数)

主动挂载

自定义事件不仅可以绑定在子组件，也可以直接挂载到父组件，使用$on绑定和$emit触发。

5.slot插槽

简单来说就是占座位，有数据传输就现在传输的数据没有就现实原来文本的东西

1.典型的插槽【匹配到对应的位置就替换掉，指定name的slot标签，如若没有匹配到，会被抛弃，但也不会报错】

2.空的 <slot>标签，会将组件内部，没有声明  slot 属性的 所有元素，全部插入进去

6.具名插槽

具名插槽slot, 就是给插槽起个名字。

在子组件定时可以定定义多个<slot>插槽,同时通过name属性指定一个名字,如:<slot name='header'>，父组件引用时使用< slot='header'>进行插槽选择。

7.插槽作用域

作用域插槽slot-scope，

父组件通过<slot>插槽混入父组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据，使用方式:<slot text='子组件数据'>，

父组件通过<template slot-scope="props">进行引用。

8.动态组件

使用<component>标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件。

9.keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令。

10.refs

使用ref 给每个组件起一个固定的名字,方便后续直接引用操作，在父组件中使用$refs访问子组件。

ref(reference 引用/参考 外号)

帮助在父组件中 得到子组件中的数据、方法。

    1.指定ref属性

    <son ref="mySon">    2.根据ref得到子组件实例

    this.$refs.mySon

11.watch

在 Vue 组件中，使用 watch 属性来监听数据的变化，同时可以指定监听那个属性。 

$watch第一个参数是需要监听的属性，第二个是回调函数用法和watch一样。需要取消监听只需拿到监听对象的引用，这个引用是返回一个函数对象，执行该对象就可以取消监听。

同时监听多个属性，可以不指定属性：

12.computed属性

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别：

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，

watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

computed和methods区别：

计算属性使用computed定义, 方法使用methods定义

计算属性使用时不加括号执行符

计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。否则返回之前计算好的值,性能更高!

13.getter 和 setter

当我修改了这个对象的属性时,就要用到getter和setter

get为取值，可以把get看成一个取值的函数，函数的返回值就是它拿到的值。

set为赋值,双向绑定时值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。

14.生命周期

1) created: 实例创建完成后被立即调用

2) mounted: 实例挂载完成后被立即调用

3) beforeUpdate: 实例需要渲染之前调用

4) updated: 实例更新后调用

5) destroyed: Vue 实例销毁后调用

面试题目

1.什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

2.vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。