路由
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生命周期
beforeCreate
created 能获取到data
beforeMount
mounted 能获取到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 能获取到dom
componentWillUnmount 组件的卸载和数据的销毁，removeEventListener，定时器
componentWillReceiveProps (nextProps)
接收父组件传的props，在子组件内，props发生改变时触发，将nextProps的state为当前组件的state，React 17已移除，请使用static getDerivedStateFromProps(props, state){}代替。
static getDerivedStateFromProps(props, state){
若state的值在任何时候都取决于props，可使用
props能获取到<count name={123} />的name，state为当前this.state
必须有返回值，返回值为null或一个对象
return {count：100}
会影响this.state.count的值，且不管this.state.count值如何更改，this.state.count都为100
}
getSnapshotBeforeUpdate(prevProps, prevState){
getSnapshotBeforeUpdate()在将最新呈现的输出提交给DOM之前，立即调用。它使您的组件可以在DOM可能发 生更改之前从DOM中捕获一些信息（例如，滚动位置）。此生命周期返回的任何值都将作为参数传递给 componentDidUpdate(prevProps,prevState,snapshot)
必须要有返回值
}
shouldComponentUpdate(nextProps,nextState) 通过返回的布尔值来控制是否重新渲染组件
componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后，组件进入重新渲染的流程，nextProps和nextState。React 17 已移除。
componentDidUpdate(prevProps,prevState)
组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入
这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。首次渲染不会执行此方法。
可以做数据监听
this.forceUpdate() 强制更新dom
新版本生命周期·
componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate
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
任务执行顺序
同步任务->微观任务->宏观任务
微观任务执行看进入队列的顺序，先进先出
DOM
获取节点
div.hasChildNodes 是否有子节点
div.parentElement 返回父元素节点
div.children 返回子元素节点
div.children.length 返回子元素节点的个数
div.firstElementChild 返回第一个子元素结点
div.lastElementChild 返回最后一个子元素节点
div.nextElementSibling 返回下一个兄弟元素结点
div.previousElementSibling 返回上一个兄弟元素子节点
插入节点
//往父节点的最后一个字节点后追加节点
span = document.createElement('span');
div = document.getElementsByTagName('div')[0];
div.appendChild(span); //只能传一个节点，且不直接支持传字符串
div.append(span); //可以同时传入多个节点或字符串，没有返回值
//在此之前插入节点
div.inserBefore(span,p); //在p标签之前插入span标签
//在此之后插入节点
Element.prototype.insertAfter = function (targetNode,afterNode){
var beforNode = afterNode.nextElementSibling;
if(beforNode == null){
this.appendChild(targetNode);
}
else{
this.insertBefore(targetNode,beforNode);
}
};
div.insertAfter(p,span); //把p标签插入到span后面
替换节点
div.replaceChild(p,span); //拿p标签替换span标签
删除节点
div.removeChild(span); //只是剪切掉，可以在删除前找一个变量存储着
span.remove(); //直接删除
布局方式
弹性布局
flex-direction 弹性容器中子元素排列方式
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
事件
阻止默认事件
event.preventDefault(); //W3C标准，IE9以下不兼容
event.returnValue = false; //兼容IE
取消冒泡
W3C标准 event.stopPropagation(); //但不支持ie9以下版本
IE独有 event.cancelBubble = true; //chrome上也有这个方法
Object上的方法
Object.is
比较两个值是否相等，你可以用恒等理解，但是值得注意的是，两个点
Object.is(+0,-0); false
Object.is(NaN,NaN); true
Object.assgin
枚举对象里的属性
Object.assgin(target,source1,source2)
把source1,source2对象里的属性复制到target对象里，若有同名属性，后者覆盖前者
值得注意的是，这里的复制是浅复制，如果复制的属性值是对象，那么target拿到的是对象的引用
Object.getPrototypeOf
Object.getPrototypeOf(obj)
返回参数对象的原型，获取原型对象的标准方法
值得注意的是
Object.getPrototypeOf({}) Object.prototype
Object.getPrototypeOf(Object.prototype) null
Object.getPrototypeOf(Function.prototype) Object.prototype
Object.setPrototypeOf
Object.setPrototypeOf(a,b)
把a的原型设置为对象b,a就可以共享b的属性
Object.create
创建对象，其实也可以理解成复制对象
a = {count:1}
obj = Object.create(a) obj = {count:1} 以a作为原型创造一个对象
值得注意的是:
如果你想创造一个对象的原型没有toString(),valueOf() 等方法得对象，你可以使用obj = Object.create(null),创造一个空对象
Object.create(a)会实时的监控a对象的属性的增删改查，然后实时的更新obj的值
Object.defineProperty
Object.defineProperty(obj,prop,{
value:val，
writable:’值是否可以被修改,此处为布尔值’
}
)
obj为传入的对象，prop为属性，如果obj.prop存在，那么就修改它的值，如果不存在，那就追加obj.prop属性，obj.prop值为val
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false // 是否可以改变
});
object1.property1 = 77; 赋值无效，值不可以被修改
console.log(object1.property1); 42
Object.getOwnPropertyNames
Object.getOwnPropertyNames(obj)
返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的键名
Object.keys
Object.keys(obj)
obj为对象的话，遍历属性，返回值为一个由属性组成的数组，obj为数组的话，遍历索引，返回值为一个由索引组成的数组。数组元素皆为字符串
isPrototypeOf
obj1.isPrototypeOf(obj2)
检测obj2原型链上是否有obj1对象
var o1 = {};
var o2 = Object.create(o1)
var o3 = Object.create(o2)
o2.isPrototypeOf(o3) true
o1.isPrototypeOf(o3) true
hasOwnProperty
obj.prototype.hasOwnProperty(‘a’)
判断obj.prototype是否有a属性，不包含原型继承的属性
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
