组件的生命周期

生命周期&生命周期函数

  • 生命周期：指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。
  • 生命周期函数：由vue框架提供的内置函数，会伴随着组件的生命周期，自动按序执行。

生命周期函数的分类

如果没有声明这些函数，运行的时候也会执行这些函数，只是函数体为空。
7a1cc381946d47dd9631da27ce20eced.png

生命周期图示

  1. 创建阶段（只执行1次）：
  • beforeCreate()：基本不用，啥也做不了。
  • created()：
    • 调用methods中的方法来发起ajax请求服务器中的数据。
    • 把请求到的数据转存到data中，供template模板使用。
    • 在created方法里不能操作DOM元素。
  • beforeMount()：没什么意义，也不能操作DOM元素。
  • mounted()：内存中的DOM结构被渲染到页面上，可以操作DOM结构。
  1. 运行阶段（用户和组件会产生交互、最少执行0次、最多执行N次）：
  • beforeUpdate()：
    • 数据发生变化后触发。
    • data数据是新的，UI结构是旧的。（新数据还没有渲染到页面中）
  • updated()：
    • data数据是新的，UI结构也是最新的。
    • 当数据变化后，为了能够操作到最新的DOM，把代码写到updated里。
  1. 销毁阶段（只执行一次）：
  • beforeDestroy()：此时组件仍处于工作状态，尚未销毁。
  • destroyed()：组件在浏览器中对应的DOM结构已被完全移除。
    22eb9458008f49259e5e46623c7918b7.png

组件之间的数据共享

组件之间常见的关系

  • 父子关系
  • 兄弟关系
    77eb444a57fb499783bd0e7fe76cb8c6.png

父子组件之间的数据共享

  1. 父组件向子组件的数据共享
  • 需要使用自定义属性props。
  • 要使用v-bind！
  • 不要直接去修改props里面的数据。
    3fb529ec80c64850a98deeaa047ac767.png
  1. 子组件向父组件的数据共享
  • 使用自定义事件
  • 在子组件中调用$emit来自定义事件
  • 在父组件中，使用@+在子组件中自定义的事件，来绑定事件，此时的形参就是传递的值。
    c78e880e71c043f2b54921d7a4ded8a6.png

兄弟组件之间的数据共享

  • 兄弟组件之间数据共享的方案是EventBus
  • 步骤：
    • 创建eventBus.js模块，并向外共享一个Vue实例对象
    • 在数据发送方，调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
    • 在数据接收方，在created()中调用bus.$on(‘事件名称’,事件处理函数)方法注册一个自定义事件
      ba947b2b158647e2a933ed8f3cdb5bb1.png

如果两个组件之间嵌套关系比较深的话，也可以认为是兄弟组件之间的数据共享。

ref引用

  • jQuery：简化了程序员操作DOM的过程
  • vue优势：MVVM 在vue中，程序员不需要操作DOM，只需要把数据维护好即可（数据驱动视图）
    • 结论：在vue项目中，强烈不建议安装和使用jQuery
  • 假设：在vue中，需要操作DOM，需要拿到页面上某个DOM元素的应用，此时怎么办？？？
    • vue给程序员提供了ref，可以让程序员在不调用DOM API的前提下，拿到DOM元素的引用。

什么是ref引用

用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。

  • 每个vue组件实例上，都包含一个 $ref 对象，里面存储着对应的DOM元素或组件的引用。
  • 默认情况：组件的 $ref 指向一个空对象。

使用ref引用DOM元素

<div ref="divRef">helloworld</div>
methods:{
    change() {
        this.$ref.divRef.style.color = "blue";//操作DOM元素  
    }
}

使用ref引用组件实例

ee246a5055834471b7f2f8a7e236b67e.png

使用场景：在父组件中要调用子组件中的方法，最方便的就是用ref
让文本框自动获得焦点：当文本框显示出来之后，如果希望它立刻获得焦点，则可以为文本框添加ref引用，并调用原生DOM对象的.focus()方法即可。