前端知识杂烩（偏向 uniapp 小程序）

css 的 width=100% 和 width=100vw 有什么区别？

100% 包含了滚动条，100vw 没有包含滚动条。当页面没有滚动条时，两者的宽度相同。

项目中的依赖有用到 node-sass 包，一定要看看自己的 nodejs 版本

可以看看这个链接，node-sass 的版本哪些 node 版本能使用。

https://github.com/sass/node-sass/releases?page=1

小程序开发工具上输入框能触发 focus 事件，但是不能看见聚焦闪烁的光标

原因为开发工具上显示有问题。真机调试则没有问题

radio 单选框的 value 值是 string 类型

不能是数字

mounted 和 onLoad 生命周期钩子有什么区别？onLoad 和 onShow 执行的先后顺序？

mounted 是组件级的生命周期钩子，onLoad 是页面级的生命周期钩子，不能混用。

onLoad 先执行，然后再是 onShow 执行。

forEach 和 for 循环有什么区别？

forEach 里 break 无效。

在组件上直接写一些 class 类不会生效。

小程序不一样点，每个组件下面都有一个#shadow-root 节点。

reactive 结合 Object.assign 使用不会触发响应式

    const msg = reactive({})

    setTimeout(()=>{
        Object.assign(msg, {a:2})
    },2000)
    
    watch(msg,()=>{
        console.log(123) // 这里可能不会打印
    })

解决：这应该是 bug，最新版的 vue 就没有这个问题

原生组件能覆盖一些普通组件

利用这一点可以把页面内容写在原生组件里（比如 scroll-view），覆盖作为背景图的普通组件。

不要在模板上做太多判断，可能会意想不到的出现问题

比如响应式不能更新了。

scroll-view 的子元素显示不全问题

scroll-view 组件一定要给它一个确定的高度或宽度。或者使用 flex 布局配合 flex: 0 0 auto;和 flex: 1 1 auto;给它一个高度。

<template>
    <view style="height: 100%;display: flex;flex-direction: column;">
        <view style="height: 100px;flex: none;"></view>
        <scroll-view style="height: 0;flex: 1" scroll-y>
           <view v-for="(item,index) in 100" style="height: 50px;border:1px solid #000;">{{item}}</view>
        </scroll-view>
    </view>
</template>
<style>
    page {
            height: 100%;
    }
</style>

screenHeight 和 windowHeight 的区别？

screenHeight 是整个手机屏幕的高度，包括状态栏、导航栏、tabbar。

windowHeight 是 webview 的高度（都以 w 开头，不包括手机的状态栏、导航栏、tabbar）。

单位也不同，screenHeight 是 rpx，windowHeight 是 px。

loadash 的 uniq 函数

创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

_.uniq(array)

页面怎么复用？

直接跳转到当前页面。

vue 的 template 模板上不能使用可选链

选择使用 lodash 的 get 方法。例如

<view v-if="get(couponDetailState, 'coupon.couponUseUserName')"></view>

但是这好像会导致触发不了响应式。

vue 中的 computed、props、methods、data、watch 选项的执行顺序？

省略号 css 样式不生效问题

需要文本的父元素需要固定宽度，所以可以将 flex：1 和 width：0 配和使用。

有时候使用省略号 css 的父元素好像不能使用 flex 盒模型。

文本换行

第一行内容\r\n第二行内容\r\n第三行内容\r\n第四行内容

解决滚动条影响页面宽度问题

在最外层盒子加：margin-right: calc(100% - 100vw);

还可以直接设置宽度为100vw

文字排版问题

有些文字换行后父元素会撑高，可以给父元素设置一个固定高度。