1.price部分垂直居中为啥要采取
line-height: 24px
margin-top: 12px
而不采取
line-height: 48px
原因： 因为右边有一个border-right,如果采取第二种则会让线长至整个高度
- seller传入deliveryPrice和minPrice时，是通过app的router-view传入seller给goods组件，goods组件再传给shopcart,通过props传入。
那么为啥之前没有通过router-view导入seller，goods组建任然可以使用seller数据，但不能由goods传给其他组件呢？ - 当字符串为单纯字符串，不含变量时需要将``反协号改为单引号。
-
重绘与重排
image.png
最佳实践
- 避免在document上直接进行频繁的DOM操作, 如果确实需要可以采用off-document方式进行;
- 集中修改样式
- 缓存layout属性值
- 设置position为absolute或者fixed
- 权衡动画速度和CPU性能
- 不要使用table布局
- 不要在css中写expression
浏览器执行流程
浏览器每次从服务器下载完页面后就会对页面进行渲染(Render), 这里面就包含了重绘以及重排。每种浏览器虽然工作原理略有差别, 但也遵循以下流程:浏览器引擎会解析HTML文档来构建DOM树。树的每个节点都是标签, 有大小边距等等的属性, 这是因为每个HTML元素都遵循盒子模型(隐藏元素不包括在文档树中, 浏览器不会将其渲染)。渲染树构建完毕后, 浏览器就能够确定每个元素的位置并将元素放到正确的位置上, 再根据树节点的样式属性绘制出页面元素.(由于浏览器的流布局的方式, 对渲染树的计算通常只需要遍历一遍即可。)但table及其内部元素除外, 可能需要执行多次计算才能确定好在渲染树中的属性, 这个过程通常要耗费3倍以上的时间。这也是我们要避免使用table标签的其中一个原因。
- document.getBoundingClientRect
6.Unexpected side effect in "listShow" computed property
报错代码
istShow() {
if (!this.totalCount) {
this.fold = true;
return false;
}
let show = !this.fold;
return show;
}
}
因为这样是只读的，要更改，就报错了，想更改，就要用get和set方法
listShow: {
get: function () {
return this.fold
},
set: function () {
if (!this.totalCount) {
this.fold = true
return false
}
let show = !this.fold
return show
}
}
这时当前的俩个this.fold将不会报错，但是后面引入better-scroll的时候，点击cartcontrol任然没有效果，原因：get返回的值是this.fold，所以在只有this.fold值改变的时候才会调用set函数，所以当你this.fold值为true后在点击其他的均不会调用set函数(这个是get,和set机制的原因,get和set是在listShow()的方法,只有在读取listShow属性值时使用get方法,而在修改listShow的属性值的时候才会调用set方法,而我们只是修改了对应的fold的值来实现效果,所以set并起不到作用,所以不用set和get方法来实现,)，所以点击也就不起效果了。
所以最终写法是,在
listShow() {
// 没有商品时为折叠状态
if (!this.totalCount) {
// eslint-disable-next-line
this.fold = true;// true时为折叠状态
return false; // 不做切换
}
// 有商品的时候以变量show做状态切换
// fold为true(折叠)则show为false(折叠)，fold为false(展开)，则show为true(展开);
// 这样，show就跟v-show的true和false状态同步了，变为true时展开，false时折叠
let show = !this.fold;
if (show) { // true为展示状态
this.$nextTick(() => {
if (!this.scroll) { // 没有scroll的时候才需要new，否则只需要刷新一下即可
// eslint-disable-next-line
this.scroll = new BScroll(this.$refs.listContent, {
click: true
});
} else {
this.scroll.refresh();
}
});
}
return show;
}
}
**忽略俩条的eslint检查了**`// eslint-disabled-next-line`
- translatea3d(0,-100%,0)表示高度auto
- 当点击pay时会事件冒泡，展开list列表所以要阻止事件冒泡
@click.stop.event="pay" - 三者联动起来的原理：cartcontrol提供this.$dispath监听cart.add,得到当前点击事件的元素，goods通过监听到事件调用私有方法并传入target,在私有方法中传target调用子组件shopcart的私有方法drop来传target给子元素。
- 在vue的父组件怎么访问子组件的方法，vue提供接口ref,通过dom来获取对应的方法，
this.$refs.shopcart.drop(target);。 - cartcontrol点击加号没有效果，因为cartcontrol在foodsScroll面板中，由better-scroll插件实现的滚动默认点击是失效的，需要初始化开启，需要设置foodsScroll的初始click为true。
- 当点击时this.food.count是应该变化的，但在页面并没有显示，vue.js特性： 当我们给一个观测对象添加一个它不存在的字段时非法的，它的defineProperty检测不到属性新增的变化，需要使用Vue.set接口给它新增接口并赋值。
网友评论