1.updated
当页面传入的新的数据的时候,就重新渲染,
updated() {
const startY = this.$refs['A'][0].offsetTop;
},
methods: {
handleClickLetter (e) {
this.$emit("change", e.target.innerText)
},
handleTouchStart (){
this.touchStart = true;
},
handleTouchMove (e){
if(this.touchStart){
if(this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
const touchY = e.touches[0].clientY - 79;
const index =Math.floor((touchY - this.startY) / 20);
if(index>=0 && index< this.letters.length){
this.$emit("change", this.letters[index])
}
}, 16)
}
}
2.截流
定时器截流。
data() {
return {
touchStart: false,
startY: 0,
timer: null
}
},
handleTouchMove (e){
if(this.touchStart){
if(this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
const touchY = e.touches[0].clientY - 79;
const index =Math.floor((touchY - this.startY) / 20);
if(index>=0 && index< this.letters.length){
this.$emit("change", this.letters[index])
}
}, 16)
}
}
3.对全局事件的解绑
activated () {
window.addEventListener(‘scroll’, this.handleScroll)// 对全局事件的绑定对别的也有影响。
}
解决
deactivated () {
window.removeEventListener(‘scroll’, this.handleScroll)
}
使用keep-alive后会多出这两个生命周期函数,离开时解绑
4.移动端滚动问题
在某一个页面滚动后 切到别的页面,也同样滚动到了同样位置,在理由中写上如下代码,则可让其初始值均为0;
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
5.ip地址可以直接访问项目
Package.json
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
}
重点是 --host 0.0.0.0
6.promise 兼容问题
babel-polyfill//解决白屏问题
npm install bable-polyfill —save
./main.js
import ‘babel-polyfill'
7.打包优化
./config/index.js
箭头处修改打包后的名字
8.异步组件
按需加载 ./router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home’)//按需加载
}],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
<!— 在组件中异步组件 —>
components: {
DetailBanner: () => import(‘./components/Banner’)
}
//缺点:http请求会多次请求。当http请求变得特别大的时候,当app.js 打包后超过几mb的时候,我们才建议这样拆分。