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