1读代码
2封装组件时样式要注意的地方
3响应式布局 方式
4懒加载与虚拟列表
懒加载：这个就是常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分，原理同图片懒加载 图片懒加载
5深拷贝 代码能拷贝方法
function deeCopy(obj){
//首页判读拷贝的是对象还是数组
const target=obj.constructor===Array ? [] : {}
// for in 循环中 item为字符串 obj['0']或者 obj['a']
for(item in obj){
if(obj.hasOwnProperty(item)){
if(obj[item] && typeof obj[item]==='object'){
//解析性代码
target[item]=obj.constructor==='Array' ? []:{}
//递归
target[item]=deeCopy(obj[item])
}
else{
target[item]=obj[item]
}
}
}
return target
}
6class内绑定对象、数组
v-bind可以绑定方法 属性 对象
样式m和n
:clase="{'a':true,'b':false}"
:class="obj"
obj={'a':true,'b':false //不渲染}
绑定数组
:class=[classA,classB]
data(return{
classA:n,
classB:m
})
场景 控制样式为a或者b
data中无法访问data中的其他数据
比如 无法访问到methods中的方法 初始顺序props> data>methods>computed>watched
data:{
return{
flag:1,
c:this.flag? 'a':'b' //无法访问到 一直为undefine 一直为false 但作为组件可以读取props中数据
}
},
:class="c"或者:class="`${flag}`? 'a':'b' " 或者:class="{${flag}?'a':'b'}" 失败 所以还是用点击事件的方式通过标记或者computed或者watch的方法
7 a||b a??b
相当于 a? a:b 当a为 null， 0， undefine，''， NaN， 时为false，其他和 ' ' 时 为true
'' 和 ' '不同
同于 if(a)
let a=2+true
let b='b'
a||b => 3
使用场景： a|| [ ] 当数据还未返回时，赋值为[ ]
a?? b 相反于 (a !== undefined && a !== null) ? a : b
