一些前端问题汇总

以下内容是作者之前遇到的一些问题，开个帖子记录一下

1.scoped的实现原理

当style标签里添加了scoped后，html就会给当前的dom节点新增data-v-随机数格式的自定义属性（标识），css根据属性选择器添加样式，从而让样式在本组件生效，不影响其他组件

2.不使用vuex及pinia等工具怎么管理数据

创建一个vue实例，在这个vue实例中储存数据（具体操作还没试过）

3.echarts初始化在生命周期的哪一个函数里

答案是mounted（此处涉及到vue生命周期函数）

生命周期函数总结

• 实例创建之前–beforeCreate
  数据的观测与事件的初始化 属性的创建 还没有进行

• 实例创建之后–created
  在此时vue实例已经创建完毕 所以 数据的观测 属性 方法等内容都已经创建完毕（el属性还没有挂载）

• 模板渲染之前–beforeMount
  在页面挂载前调用，在此阶段 页面还没有进行渲染与模板的编译 程序在此时会把数据绑定到页面上 但是页面并没有显示

• 模板渲染之后–mounted
  页面已经渲染出来了 html的内容会在dom中进行加载展示

• 数据更新之前–beforeUpdate
  在此时数据会不停的在dom中进行修改

• 数据更新之后–updated
  把修改之后的dom内容已经在页面成功的展示了

• 实例销毁之前–beforeDestory
  此时vue实例还能用

• 实例销毁之后–destoryed
  vue实例等内容都没了

vue2生命周期	vue3生命周期
beforeCreate	beforeCreate
created	created
beforeMount	beforeMount
mounted	mounted
beforeUpdate	beforeUpdate
updated	updated
beforeDestory	beforeUnmount
destoryed	unmounted

4.json转化为数组对象

//需要转换的对象
var obj = {
  'a':'1',
  'b':'2',
  'c':'3',
  'd':'4'
};
//声明一个空数组
var arr = [];
for(var key in obj){
  arr.push({
    key:key,
    value:obj[k]
  })
}