vue/react/小程序的生命周期、传值方式区别

目录

生命周期

vue

reacte

小程序

页面

app对象(全局)

组件

传值方式

vue

react

小程序

设置响应式数据

vue

react

小程序

---

此文章是小编自己总结,如有遗漏,请指出

生命周期

vue

beforeCreate        创建前

created                  创建后

beforeMount          挂载前

Mounted                挂载后

beforeUpdate        更新前

updated                 更新后

这里注意

vue2的最后两个

beforeDestory         销毁前

destoryed                销毁后

vue3的最后两个

beforeUnmount        卸载前

unmounted               卸载后

补充

父子组件生命周期执行顺序

父 beforeCreate

父 created

父 beforeMount 

子 beforeCreate

子 created

子 beforeMount

子 Mounted 

父 Mounted 

reacte

componentWillMount        挂载前

componentDidMount        挂载后

componentWillUpdate      更新前

componentDidUpdate      更新后

componentWillUnmount   卸载前

小程序

页面

Onload                  页面加载

OnReady               页面初始渲染完成

OnShow                页面显示

OnHide                  页面隐藏

OnUnload              页面卸载

app对象(全局)

OnLaunch                监听小程序初始化

OnShow                   监听小程序启动显示

OnHide                     监听小程序隐藏

OnUnLaunch            监听小程序结束

组件

created                      组件创建    

attached                    组件进入页面节点树

ready                         组件在视图层布局完成

moved                       组件被移动到节点树另一个位置

detached                   组件被从页面节点树移除   

error                          组件方法抛出错误

传值方式

vue

1、父传子：父组件用自定义属性传递

2、子传父：父组件使用自定义方法传递，子组件通过$emit调用

3、非父子：bus总线

4、后代传值：provide、inject

5、路由传值：query、params

6、vuex：commit、dispatch

react

1、父传子、子传父：都映射到props里面，注意，子传父，在父组件传方法的时候要把this指向修改好

2、redux：getState获取值，dispatch 调用createStore里面的回调

3、路由传值：props.history.push配合props.location.search，props.history.push配合props.math.params

小程序

1、父传子：自定义属性，子用properties接收

   /**
    * 里面存放的是 从父组件中接收的数据
    */
   properties: {
     // 接收的数据的名称
     aaa: {
       // type  接收的数据的类型 
       type: String,
       // value  默认值没传的话就是默认值
       value: ""
     }
   },

2、子传父：自定义事件，子用this.triggerEvent

//子组件wxml 
<view class="tabs">
   <view class="tabs_title">
     <view 
     wx:for="{{tabs}}"
     wx:key="id"
     class="title_item {{item.isActive?'active':''}}"
     bindtap="hanldeItemTap"
     data-index="{{index}}"
     >
     {{item.name}}
   </view>
   </view>
 </view>

//子组件js
 methods: {
     hanldeItemTap(e) {
       /* 
       ......
        5 点击事件触发的时候 
           触发父组件中的自定义事件 同时传递数据给  父组件  
           this.triggerEvent("父组件自定义事件的名称",要传递的参数)
        */
       //  2 获取索引
       const { index } = e.currentTarget.dataset;
       // 5 触发父组件中的自定义事件 同时传递数据给  
       this.triggerEvent("itemChange", { index });
     }
   }

3、路由传值：

        ①navigateTo        

        不能跳tabBar

        不能直接传对象，query传参长度有限

        解决方法：使用eventChannel.emit和eventChannel.on

//传        
        wx.navigateTo({
            url: '/pages/detail/detail',
            success: res => {
                res.eventChannel.emit("theshy", this.data.obj)
            }
        })
 
//接收
 
    // 创建 eventchanel 对象
        const eventChannel = this.getOpenerEventChannel()
 
        eventChannel.on('theshy', function (data) {
            console.log(data)

}

        ②reLaunch

        所有都能跳，不能返回

        ③switchTab

        专门跳tabBar

        ④redirectTo

        类似replace

        ⑤navigator标签

<navigator url="/pages/detail/detail?x=10">查看详情--navigator</navigator>

以上传递接收的值在onLoad的options里面

//接收的值在onLoad的options里面
 Page({  
  onLoad: function(options) {  
    this.setData({  
      title: options.title  
    })  
  } 

设置响应式数据

vue

vue2 定义到data中的数据，都是响应式，直接赋值即可

vue3 setup 中，使用ref、toRef、reactive、toRefs

react

使用 this.setState

小程序

使用 this.setData