vue-小程序-生命周期-路由守卫-项目优化

知识点

new Vue({
   el:'#app',           //设置挂载点类似于querySelector
   data:{},           //初始数据
   menthods:{},   //自定义函数
   watch:{},       //监听
   computed:{},   //计算属性
   filters:{},       //过滤器
   components:{},   //自定义组件
   beforeCreate(){},   //创建之前
   created(){},       //创建完成
   beforeMount(){},   //挂载之前
   mounted(){},       //挂载完成
   beforeUpdate(){},   //更新之前
   updated(){},       //更新完成
   beforeDestroy(){},//销毁之前
   destroyed(){},   //销毁完成
})

=============小程序=============
onLaunch   生命周期回调——监听小程序初始化。
onShow       生命周期回调——监听小程序启动或切前台。
onHide       生命周期回调——监听小程序切后台。
onError      错误监听函数。
onPageNotFound   页面不存在监听函数。   1.9.90
onUnhandledRejection   未处理的 Promise 拒绝事件监听函数。   2.10.0
onThemeChange   监听系统主题变化

data   Object         页面的初始数据
onLoad   function         生命周期回调—监听页面加载
onShow   function         生命周期回调—监听页面显示
onReady   function         生命周期回调—监听页面初次渲染完成
onHide   function         生命周期回调—监听页面隐藏
onUnload   function         生命周期回调—监听页面卸载
onPullDownRefresh   function         监听用户下拉动作
onReachBottom   function         页面上拉触底事件的处理函数
onShareAppMessage   function         用户点击右上角转发
onShareTimeline   function         用户点击右上角转发到朋友圈
onAddToFavorites   function         用户点击右上角收藏
onPageScroll   function         页面滚动触发事件的处理函数
onResize   function         页面尺寸改变时触发，详见响应显示区域变化
onTabItemTap   function         当前是 tab 页时，点击 tab 时触发

=============vuex=============
数据持久化 vuex-persistedstate插件
state       状态
mutations   修改方法
actions       异步操作mutation
getters       引入计算属性
plugins       设置数据持久化
modules       模块

=============路由守卫=============
全局守卫 /router/index.js
router.beforeEach((to,from,next)=>{
   //to   目标路由地址对象
   //from 来源路由地址对象
   //next    函数，用来执行或者改变默认的路由规则函数
})
router.afterEach((to,from)=>{})

组件守卫具体组件中
beforeRouteEnter(to,from,next){}
beforeRouteLeave(to,from,next){}
beforeRouteUpdate(to,from,next){}

路由独享守卫路由映射表配置
beforeEnter:function(to,from,next)()

=============跨域=============
proxyTable: {//配置代理请求
'/api':{
   target:'http://localhost:3000',//转发目标地址
   changeOrigin:true,//允许跨域
   // pathRewrite:{
   // '^/dyh':'' //替换为空自己填写的
   // }
},
'/uploads':{
   target:'http://localhost:3000',
   changeOrigin:true,
}
},

nginx 反向代理

=============react=============
初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后

运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新

销毁阶段：
componentWillUnmount:组件即将销毁

优化

let 没有变量提升、代码块内有效、不能重复声明



项目问题：
   项目的字段和数据库存储的不匹配问题
       前端展示有一个状态status熟悉判断是用true/false 而数据库存储的是 1/0
       通过一个三目运算解决

项目优化：
   尽量减少http请求，使用promise.all

   封装常用的公共组件

   小图片使用精灵图技术

   减少DOM的操作频率

vue中可优化点：
   Vue的计算属性会根据依赖的data进行缓存
   keep-alive可以缓存常用组件
   Vuex中的getter也会根据依赖的state进行缓存
   v-for中唯一key的使用
   Vue路由懒加载
   Vue组件动态加载

React中可以优化的点：
   在constructor改变this指向代替箭头函数和render内绑定this，避免函数作为props带来不必要的rerender
   shouldComponentUpdate，减少不不必要的rerender
   PureComponent高性能组件只响应引用数据的深拷贝
   使用唯一key优化list diff
   合并setState操作，减少虚拟dom对比频率
   React路由动态加载react-loadable