开发中遇到的问题

屏幕闪动的问题

v-text

作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法

v-text与{{}}等价，{{}}叫模板插值，v-text叫指令。

有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，但v-text不会加载出来，因为此时vue包还没有加载到，俗称屏幕闪动（当网速加载比较的慢的时候vue包没有加载到会出现此问题）

为了解决这种问题，可以采用以下两种方式：

1. 使用v-text渲染数据
2. 使用{{}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译），v-cloak要放在什么位置呢，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以
   • 步骤一

   <div id="app" v-cloak>
           <p>{{value.name}}</p>
       </div>
              

   • 步骤二

   //此处可以说明指令相当于html中的属性选择器
       <style>
           [v-cloak]{
               display: none;
           }
       </style>
              

react中使用编程式导航组件引入方式

出现错误TypeError: Cannot read property ‘push’ of undefined

原因：不是被路由所管理的页面使用编程式导航就会出现如上的错误

不是被路由所管理的就没有history属性

解决方式：withRouter:让不是路由切换的组件也具有路由切换组件的三个属性（location，match，history）

import React, { Component } from 'react'
import {NavLink,withRouter} from "react-router-dom"
 class topbar extends Component {
    fun=()=>{
        // 编程式导航
        this.props.history.push("/phone")
    }
    render() {
        return (
            <div>
                <NavLink to="/home">首页</NavLink>
                <NavLink to="/phone">手机</NavLink>
                <hr /> 
                <button onClick={this.fun}>点我去phone</button>
            </div>
        )
    }
}
// 使用withRouter高阶组件来进行完成
export default withRouter(topbar)
           

路由懒加载—首页白屏问题

原因：

当我们的项目体积越来越大的时候，首次页面加载可能会把所有的路由页面渲染只有才进行显示，那么这个时候就会造成首页渲染过慢 首页白屏的问题，就需要使用路由懒加载技术来避免 懒加载按需加载（当你需要这个路由的时候才会去加载这个路由）懒加载可以分割代码块，提高页面的初始加载效率。

props验证出现问题没有提示

生产版本也就是压缩版的文件删除了警告，所以使用非压缩版的js文件就可以看到错误。所以在开发时应该使用开发版本的而不是经过压缩的生产版本。