路由

vue路由

query

this.$router.push({path:'/select',query:{id:this.id ,}
})
读取参数使用:this.$route.query.id
query参数会显示在地址栏

params

<router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
this.$router.push({name:'/select',params:{id:this.id}
})
获取参数：this.$route.params.num
params传递参数在地址栏是看不到的name和query也可以组合实现页面跳转，但是参数无法正常传递接收

react路由

params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用:this.props.location.query.name

state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用:this.props.location.query.state 

search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用:this.props.location.search

angular路由

queryParams

传递参数

<a [routerLink]="['/book']" [queryParams]="{id:key}">
this.router.navigate(['/book/'],{queryParams:{id:key}})

接收参数

import {ActivatedRoute} from '@angular/router'
constructor(public route:ActivatedRoute) { }
this.route.queryParams.subscribe((res)=>{console.log(res)
})

params

传递参数

<a [routerLink]="['/book',{id:key}]">
this.router.navigate(['/book/',{id:key}])

接收参数

import { Router} from '@angular/router'
constructor(public router:Router) { }
this.route.params.subscribe((res)=>{console.log(res)
})

生命周期

vue生命周期

beforeCreatecreated        能获取到databeforeMountmounted        能获取到dom(beforeUpdate          类似属性监听，会监听data的变化，data变化时触发钩子函数updated               以最小的demo开支重新渲染dom)beforeDestroy              组件销毁之前，仍然能访问到实例，可以做清除事件监听，定时器等destroyed                  组件销毁后调用

props => methods =>data => computed => watch

react生命周期

constructor                        React数据的初始化，必须写super(props),否则会导致this指向错误componentWillMount                 能获取到data，但获取不到dom，React 17已移除componentDidMount                  能获取到domcomponentWillUnmount               组件的卸载和数据的销毁，removeEventListener，定时器componentWillReceiveProps (nextProps)接收父组件传的props，在子组件内，props发生改变时触发，将nextProps的state为当前组件的state，React 17已移除，请使用static getDerivedStateFromProps(nextProps, prevState){}代替。shouldComponentUpdate(nextProps,nextState)    通过返回的布尔值来控制是否重新渲染组件componentWillUpdate (nextProps,nextState)shouldComponentUpdate返回true以后，组件进入重新渲染的流程，nextProps和nextState。React 17    已移除。componentDidUpdate(prevProps,prevState)组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入     这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。首次渲染不会执行此方法。

angular生命周期

constructor            除了使用简单的值对局部变量进行初始化之外，什么都不应该做
ngOnChanges            父子组件传值的时候会触发，首次调用一定会发生在ngOnInit()之前
ngOnInit               请求数据一般放在这个里面，只调用一次
ngDoCheck              自定义变更检测逻辑，手动去更改值,可以捕捉到data属性值的变化
ngAfterContentInit     当把内容投影进组件之后调用，ngDoCheck之后调用，只调用一次
ngAfterContentChecked  组件每次检查内容时调用，ngAfterContentInit和每次 ngDoCheck之后调用
ngAfterViewInit        组件相应的视图初始化之后调用，ngAfterContentChecked之后调用，只调用一次
ngAfterViewChecked     组件每次检查视图调用，ngAfterViewInit和每次ngAfterContentChecked之后调用
ngOnDestroy            销毁指令/组件之前调用并清扫，在 Angular 销毁指令或组件之前立即调用

ngAfterContentInit和ngAfterContentChecked

app.component.html

<app-aftercontent><div style="color:red;" class="red">我是要投影的内容1</div><p>我是要投影的内容2</p><div style="color:yellow;" name="yellow">我是要投影的内容3</div>
</app-aftercontent>

ChildView.component.html

<p><ng-content select=".red"></ng-content><ng-content select="p"></ng-content><ng-content select="[name=yellow]"></ng-content>
</p>
app.component.html中类名为red和p便签，以及name=yellow的元素会被显示

app.component.ts

ngAfterContentInit():void{console.log('父组件投影内容初始化完毕');
}ngAfterContentChecked():void{console.log('父组件投影内容变更检测完毕');
}

ChildView.component.ts

ngAfterContentInit():void{console.log('子组件投影内容初始化完毕');
}
doing(){}
ngAfterContentChecked():void{console.log('子组件投影内容变更检测完毕');
}

ngAfterViewInit和ngAfterViewChecked

导入子组件，ngAfterViewInit，ngAfterViewChecked里能访问到子组件的属性和方法。但不能修改，修改必报错，但值得注意的是，手动修改后的值是能渲染到子视图上的。
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
ngAfterViewInit() : void {console.log(this.viewChild.data)
}
ngAfterViewChecked() {console.log(this.viewChild.data)
}

获取dom元素

vue获取dom元素

<div ref="demo"></div>
this.$refs.demo
this.$refs.demo.style.color = 'red'

react获取dom元素

<div ref="demo"></div>
import  ReactDOM from  'react-dom'
ReactDOM.findDOMNode(this.refs.demo)
demo.style.color = 'red'

angular获取dom元素

<button #demo>goCount</button>
import {ElementRef,ViewChild,Renderer2} from '@angular/core';
constructor( private element: ElementRef, private renderer: Renderer2 ) {}
this.renderer.setStyle(this.demo.nativeElement,'color','red');
this.demo.nativeElement

获取事件源对象

vue获取事件源对象

<div @click="demo($event)">demo</div>
demo(e){console.log(e)
}

react获取事件源对象

<button onClick={this.demo}>demo</button>
demo(e){console.log(e.nativeEvent)
}

angular获取事件源对象

<button (click)="demo($event)">demo</button>
demo(e){console.log(e)
}

指令

vue指令

v-text		不会解析html标签
v-html		会解析html内容
v-show      display，初次渲染dom会执行，渲染后会缓存，css范畴，切换显示和隐藏频率高 就用v-show
v-if	    增删dom，js范畴，v-for 的优先级比 v-if 更高
v-for		<div v-for="(item, index) in items"></div>
v-model     <input v-model="test">

angular指令

 *ngFor			<li *ngFor="let hero of heroes">{{ hero }}</li>*ngIf			<p *ngIf="boolean">boolean</p>[src]			<img [src]="imgUrl">bind-src		<img  bind-src="imgUrl">[(ngModel)]	<input [(ngModel)]="name">[innerHTML]	<span [innerHTML]="html"></span>[ngClass]		<div [ngClass]="class"></div>[NgStyle]		<div [NgStyle]="style"></div>

组件传值

父传子

vue

父组件

<son :msg = 'message' ></son>

子组件

props:{msg:{type: String,default: ''}
}
props:['msg']

react

父组件

<Son data={this.state.data} />

子组件

this.props.data

angular

父组件

<Son [data]="data"></Son>

子组件

import { Input } from '@angular/core';@Input() data:number;

子传父

vue

父组件

<Son @func="getSonData"></Son>
methods:{getSonData(data){}
}

子组件

<button @click="sendData">父传子</button>
methods:{sendData(){this.$emit('func',this.msg)}
}

react

父组件

<Son  parent={ this } />
getChildrenMsg(result, data){result指向子组件的实例
}

子组件

<button onClick={ this.send }>父传子</button>
send(){this.props.parent.getChildrenMsg(this, this.state.data)
}

angular

父组件

<Son [sendChildData]="getChildData"></Son>
getChildData(childData) {alert(childData)
}

子组件

<button (click)="sendParent()">父传子</button>
@Input() sendChildData;
sendParent () {this.sendChildData(686)
}

状态管理

vue

main.js

import store from "store";new Vue({router,store,render: h => h(App)
}).$mount("#app");

store.js

import main from 'main';
export default {state: {相当于data里的数据},getters:{相当于computed里的计算方法},mutations: {相当于methods里不包含异步处理的方法},actions: {actions提交的是mutations方法，这里可以包含异步处理操作},modules: {main}
}

main.js

export default {namespaced:true,			开启命名空间state: {},getters:{},mutations: {},actions: {}
}

vuex和双向数据绑定的实现
<input v-model="modelData">computed:{...mapState('main',['modelData'])		main为模块名modelData: {get () {return this.modelData;},set (value) {this.set_modelData(value);}}
}methods: {...mapMutations('main',['set_modelData'])
}mutations:{set_modelData(state,val){state.searchData = val;}
}

react

安装两个依赖包redux，redux-thunk

App.js

import { store } from "store";
import  { Provider } from 'react-redux';
render(){return (<Provider store={store}>组件</Provider>);}

store.js

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducer from 'reducer';
const middleware = [ thunk ];
export const store = createStore(reducer, {},applyMiddleware(...middleware))

reducer.js

import { combineReducers } from 'redux'
import item from 'item'
export default combineReducers({reducer:item
})

item.js

import { Add ,Post } from "Type";
const states = {pageTitle:686,infoList:68998
}
export  default function (state =states,action) {switch (action.type) {case Add:return {...state,pageTitle:action.data}case Post:return {...state,infoList:action.data}default:return state;}
}

Type.js

export const Add = "Add"
export const Post = "Post"

actions.js

import { Add ,Post } from "Type";
export  const add = (data) =>{return ( dispatch ) =>{console.log(data-1)dispatch({type:Add,data:data + 99})}
}
export  const post = (data) =>{return ( dispatch ) =>{console.log(data)dispatch({type:Post,data:data -100})}
}

Book.js

import React, {Component} from 'react';
import { add } from "action";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';class Book extends Component {componentDidMount(){this.props.add(888);}render() {return (<div>{ this.props.pageTitle }</div>);}
}Book.propTypes = {pageTitle: PropTypes.number
};const mapStateToProps = state => {return {pageTitle:state.reducer.pageTitle,infoList:state.reducer.infoList}
}
export default connect(mapStateToProps, { add })(Book);

angular

安装依赖包@ngrx/store

action.js

import { createAction,props } from '@ngrx/store';
export const increment = createAction('Increment',props<{ data: any }>());
export const decrement = createAction('Decrement');
export const reset = createAction('Reset');

reducer.js

import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from 'action';export interface State {away: number;count: number;
}export const initialState: State = {away: 0,count: 0
};const _counterReducer = createReducer(initialState,on(increment, (state,data) =>{return {...state, count: state.count + data.data}}),on(decrement, state => ({...state, count: state.count - 1})),on(reset, state => ({...state, count: 0})),
);export function counterReducer(state, action) {return _counterReducer(state, action);
}

select.js

import { State } from 'reducer';
import { createSelector } from '@ngrx/store';export const countFeatureFn = (state: State, props) => {return state.away;
};export const countStateFn = (state: State,props) => {return  state.count ;
};export const countStateSelector = createSelector(countFeatureFn, countStateFn);

app.module.ts

import { counterReducer } from 'reducer';
import { StoreModule } from '@ngrx/store';imports: [StoreModule.forFeature('feature', counterReducer),StoreModule.forRoot({})]

book.component.ts

import {State} from "reducer";
import {countStateSelector} from "select";
import {increment,decrement,reset} from "action";
import { Store, select } from '@ngrx/store';count: Observable<number>;
constructor(private store: Store<{feature: State }>,private route:ActivatedRoute) {this.count = store.pipe(select(countStateSelector));
}
increment() {this.store.dispatch(increment({data:686}));
}decrement() {this.store.dispatch(decrement());
}reset() {this.store.dispatch(reset());
}

异步执行问题

同步任务new Promise((resolve,reject)=>{})resolve:允许后续执行then回调reject:允许后续阻止执行回调async函数在执行时是同步的，执行时能执行第一个await函数，每次执行完await函数，之后代码进入微观队列async function test(){await test1();await test2();}异步任务分为微观任务:async/await,then,catch宏观任务:只有setTimeout,setInterval任务执行顺序同步任务->微观任务->宏观任务微观任务执行看进入队列的顺序，先进先出