屏幕闪动的问题
v-text
作用:操作网页元素中的纯文本内容。{{}}是他的另外一种写法
v-text与{{}}等价,{{}}叫模板插值,v-text叫指令。
有一点区别就是,在渲染的数据比较多的时候,可能会把大括号显示出来,但v-text不会加载出来,因为此时vue包还没有加载到,俗称屏幕闪动(当网速加载比较的慢的时候vue包没有加载到会出现此问题)
为了解决这种问题,可以采用以下两种方式:
- 使用v-text渲染数据
- 使用{{}}语法渲染数据,但是同时使用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文件就可以看到错误。所以在开发时应该使用开发版本的而不是经过压缩的生产版本。