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