基本的问题

最新推荐文章于 2024-04-18 18:52:50 发布

JKhenyumeiya

最新推荐文章于 2024-04-18 18:52:50 发布

阅读量238

点赞数

文章标签： js vue

本文链接：https://blog.csdn.net/JKhenyumeiya/article/details/117330446

版权

一、js中的三种存储数据的方式

1、Cookie：使用方便但是会存在跨域的问题，无法保存大的数据，保存的数据会发送到服务器端

2、localStorage ：可以持久的保存数据，只要我们不主动删除数据就不会一直保存在客户端

3、sessionStorage：只要我们关闭浏览器或者刷新浏览器数据就会删除

下面两个的优点：可以缓存数据，减少内存的占用

Storage只能存储字符串，有的时候就是对象，我们需要将对象转换为字符串

对象转换为字符串：JSON.stringify() 字符串转换为对象：JSON.parse()

二、深拷贝和浅拷贝

1、语法：$.extend([deep]，target，object) depp代表的是当前属于的是深拷贝还是浅拷贝默认为false浅拷贝，true为深拷贝

target代表的是要拷贝的目标，object代表的被拷贝的目标

浅拷贝：将object中的简单复杂类型直接拷贝给target，复杂的数据类型是将地址拷贝给target，开辟的是同一个空间，当两边的数值发生变化的时候，都会发生变化，同时也会覆盖原来的需要被拷贝的值

深拷贝：简单数据类型是将数据拷贝过去，复杂数据类型也是直接拷贝过去，开辟的是不同的空间，当值发生变化时，不会发生改变

浅拷贝是栈，深拷贝是堆

三、闭包（又称为闭包函数）

一个作用域可以访问两一个函数中的局部变量就是闭包函数，被访问变量的函数就称为闭包函数

四、一个页面输入URL到页面加载完成时，中间会发生什么

1.DNS解析(DNS是域名解析系统) 2.TCP连接 3.发送请求 4.返回响应 5.下载并设置缓存 6.渲染 7.TCP断开

五、浏览器的缓存机制

1、强缓存：客户端再次请求资源时，不会向服务器发送请求，而是直接从缓存中读取资源

（1）Expires方法：设置过期的事件（2）Cache-Control方法：设置过期时间

2、协商缓存：客户端再次请求资源时时，会向服务器发送请求验证当前资源的有效性

（1）Last-Modified：根据文件修改时间来决定是否从缓存中取数据

（2）Etag：根据文件修改时间来决定是否从缓存中取数据

六、什么是内存泄漏和栈溢出

栈溢出：因为栈内存空间有限，当你执行一些递归操作没有阻断或者释放的时候，反复调用，栈内存执行序列就会排不下了。内存泄漏是指程序被分配的栈内有一块内存既不能使用，也不能被回收

内存泄漏：JS中的数据存储分为栈和堆，程序代码运行都需要一定的计算存储空间，就是栈了，栈遵循先进后出的原则，所以程序从栈底开始运行计算，程序内部函数的调用以及返回会不停的执行进栈和出栈的操作，栈内被所占的资源也在不断的对应变化，但是一旦你的调用即进栈操作过多，返回即出栈不够，这时候就会导致栈满了，再进栈的就会溢出来

七、垃圾回收机制

1、标记清除方式：

工作原理：当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存

2、引用计数方式：

工作原理：跟踪记录每个值被引用的次数

八、vue2.0和vue3.0的区别

1、vue2.0的数据双向绑定采用的是Object.defineProperty，vue3.0的数据双向绑定采用的是Proxy

2、使用Proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象

3、新增Composition API，更好的逻辑复用和代码组织

九、防抖和节流

防抖：延迟执行事件代码，重发触发就重新计算，最终只会执行一次事件

节流：减少事件触发的频率，上次事件没有执行完毕，不能够重复触发

十、axios和ajax的区别

axios是通过promise实现的对ajax技术的一种封装，它就像JQuery实现对ajax的封装一样，

简单的来说：ajax技术实现的是对网页的布局数据刷新，axios实现了对它的封装，

axios是ajax，然而ajax不只是axios

十一、js中的继承和Es6的继承

1、原型继承：让父类中的属性和方法在子类实例的原型链上，子类的prototype指向父类的实例对象

2、call继承：在子类中把父类当做普通元素对象，让父类的this指向子类的实例，只能继承父类的私有属性和方法，父类的私有属性变成子类的私有的

3、组合继承（call继承加类似于原型链继承）：父类私有和共有的分别是子类实例的私有和公共属性方法

4、Es6的extend继承

十二、es6和es5的区别

组件化开发 class继承 babel转码器

十三、DOM和BOM的区别

DOM：是文档对象模型，操作的是浏览器中的内容，即元素对象，document是一个对象

BOM：是浏览器对象模型，操作的是浏览器的本身，window是一个对象

十四、Vuex的状态以及应用

Vuex：是专门为vue.js设置的一种状态管理构架采用同一式存储管理和维护所有的组件的变化状态

我们把组件的共享状态提出来,用一个全局单例管理所有状态;无论哪个组件都能够直接获取状态。通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护

Vuex的五个属性

state, getters, mutations, actions, modules。

state：
vuex的基本数据,用来存储变量。

geeter：
从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

mutation：
提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

action：
和mutation的功能大致相同,不同之处在于:
① Action 提交的是 mutation,而不是直接变更状态;
② Action 可以包含任意异步操作。

modules：
模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

注意:
使用下面这两种方法存储数据：
dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

十五、vue中的各个属性的作用

data：属性是一个对象，对象属性是需要绑定的数据。若在组件中data属性返回的是一个函数，那需要绑定的数据放在函数里面。为什么会用一个函数来返回对象属性呢，因为组件一般都会被重复利用，组件被多处使用时，绑定的数据会发生变化，如果都写在data对象中，就不好维护甚至发生冲突，所以使用函数返回对象的方式

props属性是接受父组件传过来的值，如果值多，可以写成数组的形式。也可以写成一个对象，用传过来的值做校验等

methods对应一个对象，对象中存放的是函数方法，所以一般的函数定义都放在methods里面，在模板渲染成html前调用，通常初始化某些属性值，然后再渲染成视图

mouted：钩子函数，在模板渲染成html后调用，通常是初始化页面完成后，再对dom节点进行一些需要的操作

computed：计算属性，当数据发生变化时才调用，否则直接调用缓存，好处是提高性能，

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

watch监听

1. 不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；