0415 手打基础丸

手打基础丸 🧆 => 精选基础知识,经过多道工序精心制作而成,口感鲜嫩多汁。一口咬下,香气四溢,加上传统前端风味,令人回味无穷...... 助力食用者厚积薄发,夯实根基进阶上层。

同页面在不同端(pc/移动端)的处理方式?

方案一:

写多个页面,根据不同类型重定向页面:可以通过user-agent来判断设备类型,之后根据类型重定向页面

javascript 复制代码
const agent1 = navigator.userAgent // JS获取
const agent2 = request.headers['user-agent'] //后端获取

const isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent1)

但是User-agent有可能被篡改,故仅凭其判断有风险。还可以增加关于媒体查询、页面宽度的判断,增加准确性。

方案二:

还可以写一个页面,根据不同设备类型来进行不同的响应式设计以达到更好的显示效果。

arduino 复制代码
@media screen and (max-width: 768 px){ // 移动端样式 }
@media screen and (min-width: 769 px){ // PC端样式 }

Vue中如何访问根实例?

方法一(官方推荐):provide/inject机制(vue3)

javascript 复制代码
// 在根组件中提供数据 设置provide
const app = createApp(App)
app.provide('appName', 'Vue3App')
setup(){
  provide('appName', 'Vue3App')
}
//在子组件中可以通过inject获取
export default{
  inject:['name'],
  mounted() {
    console.log(this.name) // "Vue3App"
  }
}

方法二:全局属性:app.config.globalProperties (vue3)

javascript 复制代码
const app = createApp(App)
app.config.globalProperties.$name = 'Vue3App' // 创建全局变量
app.mount('#app') // 应用实例挂载
//子组件中
mounted(){
  console.log(this.$name) // "Vue3App"
}

方法三:直接main.js中导出根实例,可以在子组件中直接导入使用

vue2中可以通过this.$root方法直接访问根实例

**应用场景:**全局状态管理(限简单项目,复杂项目推荐使用pinia或vuex)、全局方法共享、应用级配置信息传递、插件开发中的全局功能注入

React为什么不建议使用索引来作为唯一key?

使用索引作为key,列表发生变化就会导致全部列表元素渲染,造成性能浪费

不利于状态组件关联,索引作为key可能会导致状态出现错误,错误的key会导致状态与错误组件关联

在进行列表增删改查时,索引做key会导致react无法正确势识别哪些内容实际发生了变化,导致错误渲染

相关推荐
excel几秒前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组4 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽10 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58123 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo23 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~42 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636022 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端