2022年10月前端学习笔记

早日退休！

已于 2023-03-03 09:47:24 修改

阅读量4.5k

点赞数 1

分类专栏：前端文章标签： javascript vue.js 前端 1024程序员节

于 2022-10-10 11:50:54 首次发布

本文链接：https://blog.csdn.net/weixin_48894212/article/details/127241897

版权

这篇博客记录了2022年10月期间的前端学习，涉及Vue3与Three.js的结合应用，包括加载glb模型、优化模型清晰度、摄像机参数设置等问题。此外，还探讨了Vue3中computed、props、methods和watch的使用，以及 vant 组件库的使用技巧、typescript类型注解和数据处理策略。

摘要由CSDN通过智能技术生成

2022.10.10

1、vue3 + three.js加载glb模型（自动旋转、触摸停止）

2、three.js加载glb模型使用DRACOLoader解码

1、vue3 在methods中修改computed的值

2、遇到的坑：vue3 在子组件的methods中怎么动态获取props的值，使用watch监听

2022.10.20

1、遇到的坑：ts 定义一个空数组push字符串 & 类型注解

2、vant组件库close-on-click-overlay关闭Dialog弹窗无效

3、vant组件库的radio单选框在后端传来的参数为true时默认选中

3、computed计算属性（利用computed少发一次请求）

4、后端一次返回过多数据，前端如何优化处理？

5、van的Area省市区选择：省市区是默认从后台回显的（如果存在默认地址的话），发现只有点击才能获取到省市区的值，如果不点击，获取到的省市区就是undefined。

2022.10.21

1、computed计算属性在首次进入页面时是正常显示数据的，但是在刷新之后log出来的数据则为undefined

2、手机号、银行卡（脱敏显示）

3、vue3 子组件传值给父组件

2022.10.25

1、computed、watch、methods的先后执行顺序

2、vue 使用枚举，根据后端返回的字段，前端对应地显示中文

3、computed计算属性返回来的值比普通定义的要返回的晚，在ts中获取到的data.value.category_id为undefined

2022.10.28

1、react：组件 & props

2、react：state & 生命周期

2022.10.10

1、vue3 + three.js加载glb模型（自动旋转、触摸停止）

核心代码：

const rotating = ref(true)

// 执行渲染操作
const animate = () => {
    requestAnimationFrame(animate)
    if (rotating.value === true) {
        scene.rotation.y += -0.005
    }
    renderer.render(scene, camera)
}
animate()



onMounted(() => {
    const three = document.getElementById('three')
    three?.appendChild(renderer.domElement)
    // 触摸开始
    three?.addEventListener(
        'touchstart',
        () => {
            rotating.value = false
        },
        false
    )
    // 触摸移动
    three?.addEventListener(
        'touchmove',
        () => {
            rotating.value = false
        },
        false
    )
    // 触摸结束
    three?.addEventListener(
        'touchend',
        () => {
            rotating.value = true
        },
        false
    )
})

2、three.js加载glb模型使用DRACOLoader解码

报错： THREE.GLTFLoader: No DRACOLoader instance provided

解决办法：

在node_modules安装的包中获取three版本对应的draco，路径为node_modules\three\examples\js\libs\draco

将该文件夹复制到public文件夹下并在DRACOLoader.setDecoderPath时候设置该对应路径即可

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/public/draco/') // 设置public下的解码路径，注意最后面的/
loader.setDRACOLoader(dracoLoader)

2022.10.14

1、three.js 使模型变清晰

// 设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊
renderer.setPixelRatio(window.devicePixelRatio)

2、camera摄像机的参数

// fov：视场，摄像机左右两侧睁开的角度，fov越大看到的东西越多，默认值为50
// aspect：长宽比，渲染结果横向尺寸和纵向尺寸的比值，默认值为
// window.innerWidth/window.innerHeight，通常等同于canvas宽高比，否则会失真
// near：定义了从距离摄像机多近的距离开始渲染
// far：定义了摄像机能够渲染的最大距离
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100000)

2022.10.17

1、vue3 在methods中修改computed的值

const data = computed({
    get() {
        if (isGuoList) {
            return store.state.home.meAssetGuoDetail
        } else {
            return store.state.home.meAssetDetail
        }
    },
    set(newVal) {
        console.log(newVal)  // 打印出来为{}
    }
})

onMounted(() => {
    // 将数据清空
    data.value = {} as any
})

2、遇到的坑：vue3 在子组件的methods中怎么动态获取props的值，使用watch监听

说明： 在父子组件传值的时候，在子组件中使用prop.materialType获取父组件传来的值

在template中可以直接用，无论怎么刷新页面，页面上还是会显示数据，比如：

<div>{
  { materialType }}</div>

但是在methods中调用props.materialType，刷新之后，却拿不到值。

原因：子组件中的数据通过props来接受，子组件的methods中想要取到props中的值，直接使用props.materialType即可。但是materialType里面的值并不是固定的，而是动态获取的，这种情况下，你会发现methods中是取不到你的materialType的，或者取到的一直是默认值。

解决办法：使用watch监听

const newMaterialType = ref('') // 定义一个新的值接收
watch(
    () => props.materialType, // 监听父组件传来的值
    (newVal) => {
        newMaterialType.value = newVal // 将父组件的值赋值给newMaterialType
        // ...... 这里写使用到 newMaterialType 的 方法函数function
    },
    { immediate: true } // 开启首次监听
)

2022.10.20

1、遇到的坑：ts 定义一个空数组push字符串 & 类型注解

// 类型注解（重要，不然push报红）
var array = reactive<string[]>([])

const getUserAddress = (e: any) => {
    e.forEach((item: { code: number; name: string }) => {
        array.push(item.name)
    })
}

// as any大法，避免后面引用了tempItem报错
var tempItem = ref({}) as any
var tempIndex = ref(0)

const handleGetIndex = (item: any, index: number) => {
    tempItem.value = item
    tempIndex.value = index
}


// 后面的代码中使用到（tempItem是一个对象）
store.dispatch('settings/deleteAddress', tempItem.value.id)

2、vant组件库close-on-click-overlay关闭Dialog弹窗无效

配合 @close="show=false" 使用。

父组件：

<Dialog
    :showBottom="false"
    :show="isShowNow"
    :closeOverlay="true"
    @close="isShowNow = false"
>

子组件：

3、vant组件库的radio单选框在后端传来的参数为true时默认选中

通过 v-model 绑定值当前选中项的 name。

const checked = ref('')

// 在页面加载完成时，循环得到的数据，判断数组中哪一个对象中的is_default是true，
// 如果是true，将checked的值赋值为该对象的id。
const getData = async () => {
    try {
        const res = await store.dispatch('settings/getAddress')
        if (res.code === 200) {
            res.data.list.forEach((list: any) => {
                if (list.is_default === true) {
                    checked.value = list.id
                }
            })
        }
    } catch (error) {}
}
getData()<