目录
此文章是小编自己总结,如有遗漏,请指出
生命周期
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