- 页面自己调用自己时的方法
watch: {
$route(val) {
if (val.query.bookid) {
this.init() // 自己调用自己，重新初始化
this.$refs.scroll.scrollTo(0, 0, 0)
}
}
},
// 离开路由钩子
beforeRouteLeave(to, from, next) {
// 在这里可以询问用户是否离开当前页面 是就 next()
next() // 调用next() 路由就会跳转
},
// 重复调用组件的钩子
beforeRouteUpdate(to, from, next) {
next()
},
- mounted() 钩子执行的内容依赖 computed计算属性时 延迟20ms执行
setTimeout(() => {
// 内容...
}, 20)
- vue 生命周期
1、beforeCreate
在实例初始化之后，数据观测和event/watcher时间配置之前被调用
2. created
实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
(不需要set 的属性可在这里定义)
3、beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4、mounted
可以使用ref定义的钩子
该钩子在服务端渲染期间不被调用。
(用于请求数据)
5、beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用
该钩子在服务器端渲染期间不被调用。
(如导航条可以滚动，那么可在该周期设置导航条位置)
8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
9、beforeDestroy
【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步，实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。
- <router-view/>
// keep-alive缓存组件 有2个属性
// include="name" 缓存所有name=name的组件
// exclude="name" 除了name 其他都缓存
<keep-alive exclude='detail'>
<router-view class='child-view'></router-view>
</keep-alive>
使用include/exclude 属性需要给所有vue类的name赋值
（注意不是给route的name赋值 不生效）
是组件里的name
-
移动web 性能优化
- 要减少对DOM的操作
- 尽量缓存可以缓存的数据
- 尽量使用transform 动画 代替DOM操作
- 不要给非statice定位元素加css3动画，(
如absolute、relative)，原因：会成倍增加性能开销 - 适当使用硬件加速(
使用canvas、或添加transform: translate3d(0,0,0)会触发硬件加速)
-
window.performance.timing
页面加载速度 的时间戳
- props 里 设置数组默认值时 要这样
props: {
searches: {
type: Array,
default: () => []
}
},
- Unable to preventDefault inside passive event listener due to target being treated as passive.
* //css里加上这个 即可没有警告提示
touch-action: none
-
vue data() {} 里定义的属性有get、set
reated() {} 里定义的属性只有get -
新版vue-cli中使用dev-server代理的方法
在webpack.dev.config.js中
// 1.引包
const axios = require('axios');
const express = require('express');
const apiRoutes = express.Router();
// 2.配置
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({sourceMap: config.dev.cssSourceMap, usePostCSS: true})
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer:{
//在这里添加一个before方法 上面的都是自带的
before(apiRoutes){
apiRoutes.get('/api/getDiscList',(req,res)=>{
const url = '这里是要链接的api地址';
axios.get(url, {
headers: {
referer: '配置api地址referer',
host: '配置api地址host'
},
params: req.query //这是请求的query
}).then((response) => {
//response是api地址返回的，数据在data里。
res.json(response.data)
}).catch((e) => {
console.log(e);
})
});
// app.use('/api', apiRoutes);
}
}
- this.$nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
- 在
created()钩子函数执行DOM操作要放在nextTick()里，因为created时DOM 其实并未进行任何渲染 - 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。意思是在
$nextTick里的操作，会等待vue根据数据变化更新完DOM后再执行.
-
使用
rem自适应布局时，如果要操作DOM,和获取元素width、height，那么被操作的元素width、height属性必须是整数如3rem -
获取dom元素相对于页面位置属性
dom.
// 属性用x, y, right, left, bottom, top, width, height
dom.getBoundingClientRect()
// vue
this.$refs.元素.getBoundingClientRect()
// dom.offsetTop 相对于父元素的top值
-
获取触摸元素的位置属性e.touches[0]
-
自适应rem要放在app的created()里面 页面才不会闪屏
created() {
let html = document.getElementsByTagName('html')[0]
setHTMLSize()
window.onresize = () => setHTMLSize()
function setHTMLSize () {
let width = window.innerWidth || document.body.clientWidth
if (width > 640) {
width = 640
}
html.style.fontSize = width / 160 * 4.4 + `px`
}
}
- sass引入字体文件
url不能换行
@font-face
font-family: 'music-icon'
src: url('../fonts/music-icon.eot?2qevqt')
src: url('../fonts/music-icon.eot?2qevqt#iefix') format('embedded-opentype'),url('../fonts/music-icon.ttf?2qevqt') format('truetype'),url('../fonts/music-icon.woff?2qevqt') format('woff'),url('../fonts/music-icon.svg?2qevqt#music-icon') format('svg')
-
路由选中页面自动加
.router-link-active -
可以在根目录
package.json安装的需要库
//添加库名: 版本 然后cnpm install安装
"dependencies": {
"babel-runtime": "^6.0.0", // 转义ES6语法
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"fastclick": "^1.0.6", // 点击无300ms延迟
"jsonp": "^0.2.1" // jsonp跨域
},
- 对url进行编码
encodeURIComponent(val) - Object.assign 合并对象
Object.assign（target，... sources）
目标对象、源对象
将所有可枚举属性的值从一个或多个源对象复制到目标对象。后面的值会覆盖前面相同的值,
它会返回目标对象。
网友评论