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

相关推荐
前端(从入门到入土)4 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗31 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端