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无法正确势识别哪些内容实际发生了变化,导致错误渲染

相关推荐
en-route几秒前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒2 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏17 分钟前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@19 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通19 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel24 分钟前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel2 小时前
Web发展与Vue.js导读
前端
YAY_tyy2 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_5 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl