vue组件中各个属性简单了解

由于刚刚接触vue，以下内容为本人的一些简单的了解，方便知道什么情况下该用哪个

1、name：组件的名称

2、props：父组件传值给子组件（可以是单个值，也可以是一个对象，或者数组等）

3、data：子组件需要的数据定义在这里面

4、computed：称为计算属性，用来控制该组件自己的变量，该变量不在data里面声明，直接在computed里面定义，然后经过一系列的计算等操作之后，返回。所以，computed比较适合对多个变量或者对象进行处理后返回一个结果的值。如果data中的数据不改变的话，直接从缓存中获取结果；否则重新执行

5、methods：里面包含了许多的方法，例如：点击某个按钮执行相应的方法，每次都得重新执行

6、watch：vue提供的一种来监听实例上数据变动的属性——监听属性watch。我们常用的是handler回调，每次都得重新执行。当需要的数据在异步变化或者开销较大时，在执行更新的时候，使用watch会更好一些

7、mapActions：会将store中的dispatch方法映射到组件的methods方法中。和mapState、mapGetters类似，只不过它映射的地方不是计算属性，而是组件的methods对象上。

 

以下是vue生命周期各个步骤的解释：beforeCreate\created\beforeMount\mounted\beforeUpdate\updated\beforeDestroy\destroyed\activated\deactivated\errorCaptured

本文主要说前8个

8、beforeCreate：实际在代码里主要做了以下几件事情

（1）处理该实例的初始化选项

（2）初始化生命周期

（3）初始化事件

（4）初始化render函数

9、created：在上面的初始化完成之后执行的

10、beforeMount：在将模板渲染到显示页面之前会执行

11、mounted：在模板渲染到前端页面之后执行mounted

12、beforeDestroy：在vue实例的生命周期结束前执行

13、destroyed：在vue实例的生命周期结束后执行 

以上两个函数一般不会自动运行，需要通过执行vm.$destroy()才会执行

14、beforeUpdate：是在数据改变之前执行

15、updated：是在数据改变之后执行

 

补充一下，带缓存和不带缓存各钩子函数的执行顺序：

不使用keep-alive的时候，执行顺序为： beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive的时候，执行顺序为： beforeRouteEnter --> created --> mounted --> activated --> deactivated

二次进入缓存的页面，只会触发：beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。