Vue生命周期和小程序生命周期的区别

• 在使用vue和小程序时，会发现一些生命周期钩子函数的异同之处

  • vue生命周期钩子函数

  • 这是8个vue生命周期钩子函数

         //vue生命周期钩子函数（常用8种）
         beforecreate(){
         //在实例初始化之后，数据观测（data observer）和event／watcher 事件配置之前被调用。
         }
         created() { 
         //在实例创建完成后被立即调用，在这一步，实例已完成以下的配置；数据税测（data observer），属性和方法的运算，watch／event 事件回调，然而，挂载阶段还没开始，se1 属性目前不可见。
         }
         beforeMounted(){ 
             //在挂载开始之前被调用：相关的 render 函数首次被调用。
             //该询子在服务器瑞渲染期间不被调用。
         }
         mounted() {
             //e1 被折创建的 vm，sel 替换，并挂载到尖例上去之后调用该钩子。如果 root 实树挂载了一个文档内元素，当 mounted 被调用时 vm．sel也在文档内。
             //注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都信染完毕，可以用 vm．SnextTick 替换掉 mounted：
         }
         beforeupdate(){ 
             //数据更新时调用，发生在虚拟IXM 打补丁之前。这里适合在更新之前访问现有的DOM，比如于动移除已添加的事件监听器。
             //该钩子在服务器端油染期向不被调用，因为只有初次谊染会在服务端进行。
         }
         updated() { 
             //由于数据更改导致的虚拟 DCM 重新谊染和打补丁，在这之后会调用该博子。
             //当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖DOM的操作。然而在大多数情况下，你应该避免在此期问更改状态，如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
         }
         beforeDestroy(){ 
             //实例销毁之前调用。在这一步，实例仍然完全可用。
             //该钩子在服务器端渲染期问不被调用
         }
         destroyed(){ 
             //Vue 实例销毁后调用，调用后，Vue 实例示的所有东西都会解绑定，所有的事件监听器会被移除，所有的实例也会被销毁。
             //该购子在服务器端渲染期间不被调用。
         }
  

  • 以下三种生命周期钩子函数是针对 keep-live 和 识别子元素错误时调用

          activated(){
              //keep-alive 组件激話时调用。
              //该钩子在服务器端渲染期问不被调用。
          }
          deactivated(){ 
              //keep-alive 组件停用时调用。
              //该钩子在服务器端渲染期间不被调用。
          }
          errorCaptured(){ 
              //当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数；错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误维续向上传播。
          }
  

  • 小程序生命周期钩子函数

  • 这是小程序常用页面生命周期

           onLoad:function(options){
               //页面创建时执行
           }
           onShow: function(){ 
               //页面出现在前台时执行
           }
           onReady:function(){
               //页面首次渲染完毕时执行
           }
           onHide: function(){
               //页面从前台变为后台时执行
           }
           onUnload:function(){ 
               //页面销毁时执行
           }
           onPul1DownRefresh:function(){ 
               //触发下拉刷新时执行
           }
           onReachBottom:function(){ 
               // 页面触底时执行
           }
           onShareAppMessage:function(){ 
               //页面被用户分享时执行
           }
           onPageScroll:function(){ 
               //页面滚动时执行
           }
           onResize: function(){ 
               //页面尺寸变化时执行
           }
  

  • 小程序其他页面函数

            onTabItemTap(item){
                //tab 点击时执行
                console.log(item.index)
                console.log(item.pagePath)
                console.log(item.text)
            }
            //事件响应函数
            viewTap: function(){
                this.setData({
                    text: 'Set some data for updating view.'
                    },function(){
                        // this is setData callback
                    })
            }
            //自由数据
            customData:{
                hi:'MINA'
            }
  

  • 总结：以上我们可以看到两种页面生命周期函数的异同点：

  • vue中都具备页面创建，页面渲染，和页面销毁时候的调用钩子，但是在小程序中，结合其特别的存在，前后台执行、滑动滚动执行这一类钩子函数都为开发者配备的比较齐全；
  • 另外还需要注意的是，在vue中的数据改变使用this.data直接进行更改即可，但是在小程序中，数据的改变需要调用this.setData() 进行改变！