组件间的传值和钩子函数

                                     组件间的传值和生命周期钩子函数

所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同, this.fetchTodos 的行为未定义。

每个组件都具有生命周期的。

vue里是根据实例化对象来划分的生命周期,组件进行到哪,都可以用生命周期周期划分。

vue里的生命周期相对来说比较细的。

this。

生命周期里提供的钩子函数, 就是用来辅助我们当前组件对象的管理,组件进行的过程,都必须写在声明周期提供的钩子函数里做,组件进行到哪,就执行钩子函数里的业务脚本逻辑,用来管理整个组件成长变化周,处理业务逻辑的。这就是生命周期函数的作用。

钩子函数  总共四个阶段   是有11个函数。、、

创建阶段 (第一个不能拿到数据,第二个可以拿到数据)   挂载阶段()      更新阶段(更新就意味着要发生变更  才有变化)    销毁阶段()

1)beforeCreate   类型Function

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2)created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

组件间的传值和钩子函数

3beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

 

4mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

该钩子在服务器端渲染期间不被调用。

在 beforeCreate函数里可以展示loading表示加载中

在mounted里,设置setimeout用removeloading 关闭

组件间的传值和钩子函数

 

5)beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

该钩子在服务器端渲染期间不被调用。

6)updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

只要数据发生变化 就会触发这两个函数  否则不执行此函数。 必须有条件  比如加一个点击事件  就能执行

组件间的传值和钩子函数

7)beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

 

8)destroyed   this.$destroy()

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

 

调用 $destroy方法才能触发这两个函数

组件间的传值和钩子函数

组件间的传值、

vue父传子主要通过props属性:
在子组建标签上自定义一个属性,属性值为父组建要传递的数据,子元素内部通过props以数组的形式接收该组件属性名, 
vue子传父通过$emit推送事件:
在子组件标签上自定义一个事件,值为父组建的函数,子组件内部通过$emit ('事件名',数据)传递数据,父组件内部通过函数参数进行接受数据

父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息