[JavaScript知识库]小实训认为的重点

1.vuex的使用

官方说明：

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

个人理解：

vuex就是一个状态管理的工具，如果我们没有用vuex，那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。

怎么使用？

下载vuex后在文件夹中会生成一个store文件，里面有一个index.js文件，也会在mian.js中自动引入这个index.js文件。store里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。

什么是Vue生命周期？

vue生命周期是指vue是对象从创建到销毁的过程。
简单来说就是vue实例从创建到销毁的过程

Vue生命周期的作用是什么？

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。

创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

五个核心？

1.state 存放的是数据状态，不可以直接修改里面的数据。
2.getters类似vue的计算属性，主要用来过滤一些数据。
3.mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。
4.actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。
5.modules:模块化vuex，当代码量过多的时候可以让每个模块拥有自己的state getters mutations

一般什么样的数据会放在 State 中呢？

目前主要有两种数据会使用 vuex 进行管理：
1、组件之间全局共享的数据
2、通过后端异步请求的数据，比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态

created和mounted的区别？

created:实例已经创建，但不能获取DOM节点。
mounted：模板已经挂载到页面上，可以操作DOM元素。

watch computed methods之间的区别

methods在重新渲染的时候每次都会被重新的调用；
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed
；需要知道值的改变后执行业务逻辑，才用 watch。
watch也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用watch。

使用场景有

单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

说说你对vue的理解

Vue 是什么 ？

主流的渐进式 JavaScript 框架

是一套用于构建用户界面的渐进式 javascript 框架(渐进式:想用什么就用什么不必全都用) 在传统的前端开发中,是基于 jQuery+
模板引擎 来构建界面的搭建用户页面的渐进式框架

什么是渐进式？

可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery 库来使用。
也可以使用Vue全家桶框架来开发大型的单页面应用程序 。

vue的核心？

数据驱动视图
组件化开发

什么是数据驱动试图？

数据的变化会自动更新到对应的元素中，不用手动操作DOM,是基于MVVM模式来解放DOM操作的

什么是MVVM?

MVVM是一种软件开发思想，M-model代表了数据，V-view代表了试图模板 VM-viewmodel代表了业务逻辑处理的代码

使用它的原因 ？（优点）

1. vue.js 体积小，
2. 编码简洁优雅，
3. 运行效率高，
4. 用户体验好.无Dom操作，
5. 它能提高网站应用程序的开发效率

vue的缺点

1.双向绑定时，BUG调试难度增大
2.大型项目中，V和M过多，维护成本过高

什么场景下使用它？

一般是需要开发单页面应用程序 （Single Page Application, 简称:SPA） 的时候去用 单页面应用程序，如：网易云音乐
https://music.163.com/ 因为Vue 是 渐进式 的，Vue 其实可以融入到不同的项目中，即插即用

组件是什么?

组件就是可复用的VUE实例，且带有一个名字，具有一定功能

组件化开发是什么?

组件化开发，允许我们将网页中的功能样式标签封装成可复用得模块，每个模块之间是彼此独立但互相联系的。

vue中的指令及区别

说一下你知道的指令有哪些？
v-for v-if v-model v-bind v-show
区别？

v-text与v-html？

相同点：都能为标签渲染文本
不同点：text 元素内容整体替换为纯文本数据 html 整体会替换为指定的html 文本 text 不会解析标签 html 会解析标签

v-bind与v-model？

相同点：用来绑定数据到标签中，符合数据驱动试图
不同点：bind ：数据影响视图，视图不会影响数据，是单向的
model:数据影响视图，视图影响数据是双向的

v-if与v-show?

相同点：都是处理标签的显示与隐藏
不同点：if通过DOM来创建和销毁 show通过css的display
使用场景不同：if用于需要整体删除一个标签时(不频繁切换显示状态) show用于通过一个数据来处理标签的显示（频繁切换显示状态）

如何自定义指令？

https://blog.csdn.net/weixin_43638968/article/details/103603393?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162830107316780357230758%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162830107316780357230758&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-103603393.pc_search_download_positive&utm_term=vue%E4%B8%AD%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4&spm=1018.2226.3001.4187

v-for为什么要绑定key？不绑定会怎样？

因为vue组件高度复用，增加key可以标识组件的唯一性，为了更好的区分各个组件，key的作用主要是为了高效的更新虚拟DOM，保持数据唯一

如果不绑定的话，会导致所有列表的DOM重新渲染，性能无法最大化。

什么时NPM？

简单来说就是包含在Node里面的包管理工具，NPM会随着Nodel.js一起安装，NPM为开发者提供了一个模块共享的大平台，当我们项目需要使用某个模块的时候，可以直接使用NPM包管理工具来下载对于的模块包并安装，我们也可以把自己写的代码发布到平台上供他人使用。

vue-router

2.导入模块的几种方式

详情：https://blog.csdn.net/qq_45656036/article/details/119357679?spm=1001.2014.3001.5501

3.vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？

hash 模式：

#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面

通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API
可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作

区别

1. url 展示上，hash 模式有“#”，history 模式没有

2. 刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由

3. 兼容性，hash 可以支持低版本浏览器和 IE。

4.jQuery与vue的区别？

1. jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

2. vue介绍：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model
   层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。
   然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

3. vue和jquey对比 jQuery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还是依赖DOM元素的值。
   Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

1. jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2. Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3. 可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对 象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4. 这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom

5.原生JS跨域

什么是跨域

什么是跨域呢？简单来说就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

什么是同源策略？

协议 域名 端口号 相同就是同源，同源策略是浏览器最基本最核心的安全功能

怎样解决跨域？

1.设置同域名代理服务器，在配置文件下设置
2.JSONP JSONP可用于解决主流浏览器的跨域数据访问的问题。但是有个缺陷，只能解决get请求，不能解决post请求。 主要方法是：动态创建script标签并让src指向后端，后端返回脚本内容，触发浏览器立即加载并执行相应js代码，从而实现前后端无刷新数据交互。
就是前端提供函数的定义和script，后端提供实参和调用语句。

请求方：创建script,src指向响应方，同时传一个查询参数?callback = xxx(xxx是请求方的一个函数)
响应方：根据查询参数callback获得xxx，传入数据，并返回一条调用xxx函数的js命令 xxx这个函数名由 字符串+随机数 组成

6.es6重点

apply call bind 用法实例

1.apply执行函数 对象冒充 参数数组 重指向this
2.call 执行函数 对象冒充 参数单个
3.bind 创建函数 对象冒充 参数默认

set特点是一个不重复数组，主要用于对数组去重

1. 初始化 new Set

2. 添加 add()

3. 删除 delete()

4. 获取长度 size

5. 遍历 for of

6. 转换为数组 Array.from()[…]

map类似于对象，但与对象又有区别主要区别在于:

1. map键名可以是任意对象，而对象的键名只能是字符串或者symbol符号
2. map是有序的 按默认排序