面试官一共有三个，少了一个，你来吗？(Vue,React,微信小程序)
无特殊说明这里的小程序都是微信小程序，文章Github，求个Star模板语法vue模板语法
{{msg}}
reactjsx模板语法
{state.msg}
小程序模板语法
{{message}}数据绑定vueexportdefault{data(){return{msg:'vuedatabinding'}}}reactclassAppextendsReact.Component{constructor(){super()this.state={msg:'reactdatabinding'}}}小程序类似于vue，但是vue返回Page({data函数中的data:{msg:'小程序数据绑定'}})类和样式绑定vue绑定
data:{hide:true}reactbindingconstItem=()=>{const[red,setRed]=useState('red')return}小程序绑定类似于vue列表渲染vuelist//数组渲染（数组元素，数组下标）{{index}}:{{item}}//对象渲染（属性值，属性，下标){{index}}.{{name}}:{{value}} reactlist使用map函数循环constList=()=>{return(
{list.map((item,index)=>{return{item}})}
)}小程序列表wx:for-item指定数组的当前元素名wx:for-item指定数组的下标名array
{{row}}条件渲染vue条件v-ifDOM元素未渲染v-showDOM元素渲染//v-ifyouseeDidyou?IsawitIsawit//v-show你看到了吗React条件使用JavaScript三目运算constList=()=>{return({isTrue?
rendered
:null})}小程序条件渲染看到了吗我看到了我看到了事件处理vue事件绑定事件处理方法定义在methodsbtn方法上：{handleClick(){console.log('buttonbinding')}}reactevent通过bind指向改变this//继承类AppextendsReact.Component{handleClick(e){console.log(e)//event}render(){return}}//HooksconstReact,{useState}来自'react'constHook=(props)=>{const[value,setVale]=useState('state')return({setValue('ChangeState')}}>)}applet//对象中定义的方法Page({handleClick(e){console.log(e)//元素的属性}})表单处理vue表单处理v-model指令在表单元素上创建双向数据绑定，可以在元素上绑定相应的事件...data(){return{msg:''}},methods:{onChange(){console.log(this.msg)//输入cor响应输入值}}react表单处理类PageextendsReact.Component{constructor(){super(...arguments)this.state={name:''}}handleChange(event){this.setState({name:event.target.value//通过表单中的事件属性元素访问})}render(){return(
);}}小程序表单处理小程序自带表单组件Page({data:{msg:''},onChange(event){const{detail:{value}}=eventthis.setData({msg:value})}})自定义组件vue组件通常简称为vuecomponent.vue文件是通过Vue.component()挂载的组件，组件之间通过props进行通信组件通过$emit通知父组件。详细的组件方法可以在官网找到Vue.component('Item',{props:['title'],template:'{{title}}
'})reactcomponent中的各个函数react可以成为一个组件通信是通过propsconstItem=props=>{return{props.title}
}小程序组件小程序需要通过component构造函数定义组件Component({behaviors:[],properties:{myProperty:{//属性名type:String,value:''},myProperty2:String//简化定义方法},data:{},methods:{}})VueReact小程序的生命周期beforeCreate（初始化前）componentWillMount（组件即将渲染到页面之前）onLoad（页面开始创建时）created（完成初始化）beforeMount（挂在$el之前）mounted(挂在dom之后)componentDidMount(组件已经渲染完成；可以操作dom元素)onShow(页面出现在前台)onReady(页面第一次渲染完成)beforeUpdate(更新完成，但是dom还没有更新)componentWillUpdate(组件更新前触发)updated(dom元素已经更新)componentDidUpdate(更新后触发；生成新的dom元素)beforeDestory(组件更新前触发)nent被销毁)componentWillUnmount(组件销毁后触发)onHide(页面从前台到后台)destroyed(组件销毁后触发)onUnload(页面销毁时)routingvue路由管理VueRouter,for具体使用请参考React路由react-router，不过它衍生自两个路由管理库，react-router-dom和react-router-native，具体使用请参考小程序自带的路由管理wx.switchTab//只能跳转到tab页，关闭所有其他非tabBar页面wx.reLaunch//关闭所有页面，打开应用中的一个页面wx.redirectTo//关闭当前页面，跳转到一个应用内页面不允许跳转到tabbar页面wx.navigateTo//保持当前页面，跳转到应用内页面。但是不能跳转到tabbar页面wx.navigateBack//关闭当前页面返回上一页或多级页面状态管理vue状态管理VueximportVuexfrom'vuex'conststore=newVuex.Store({state:{num:0},mutations:{increment(state){state.num++}}})store.commit('increment')console.log(store.state.num)//1Reactstatemanagement状态管理工具React中包括Redux、Mobx等，这里使用react-redux来演示；文中代码可见react-testtocreateactionexportconstinsert=(id)=>({type:'INSERT',payload:{id}})tocreatereducersconstinitState=[{id:1,title:《西游记》,作者:"吴承恩",star:55}]exportdefault(state=initState,action)=>{switch(action.type){case'INSERT':returnstate.map(v=>{if(v.id===action.payload.id){v.star++}returnv});默认值：返回状态；}}createstoreimport{createStore}from'redux'importrootReducerfrom'./reducers'exportdefaultcreateStore(rootReducer)视图更新//views/Redux.jsimportReact,{useState}from'react'importt{insert}from'./../store/actions/books'constReduxPage=props=>{conststate=props.getState().booksconst[books,setBooks]=useState(state)constadd=(id)=>{道具。dispatch(insert(id))setBooks(props.getState().books)}return(...+...
);};exportdefaultReduxPage小程序状态管理小程序可以使用App挂在全局对象上进行状态管理，也可以使用小程序自身的Storage本地客户端缓存来管理全局状态
