前端学习总结vue

es6中，用于声明变量的var和let有什么区别？

let声明的变量只在let关键字所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

1.vue简介

Vue的两大核心思想：组件化和数据驱动

优点：轻量级，渐进式框架，可以自己选择需要用到的模块
数据驱动就是让DOM随着数据的变化自然而然的变化，开发者不必过多关注DOM，只需要将数据组织好就行。原理暂时不清楚。
组件化就是将一个整体合理拆分为一个一个小块component(组件)，组件可重复使用，可以简单的认为组件就是一个自定义标签的过程。
什么是组件化？将大型项目拆分成不同的小项目(组件)，组件可以重复使用

生命周期及生命周期钩子函数lifecycle hooks
created mounted updated destroyed

1.1 .native的作用:将组件标签当做一个普通的HTML标签，以便于添加触发事件。

没有使用.native修饰符的组件标签 在添加普通事件之后不能被正确执行。
<my-component @click="alert()">
如果点击这个my-component标签，并不会执行alert()函数，原因是组件默认只能添加组件内部的事件

给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的

访问根组件的数据和方法使用this.$root,访问子组件或者子元素，在组件声明的时候加上一个attribute ref="component"
例如,之后使用过this.$refs.usernameInput

2.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在以往的开发中，我们很难在兄弟组件或者父类组件之外之间进行传值，有了vuex就可以很好的解决了这个问题。
定义一个数据管理仓库store，然后在某一个组建中进行注册，那么在这个组件及其子孙组件内，store仓库中所有的数据都是直接可调用的。
如果我们在项目根组件App.vue中进行注册的话，那么所有的store中的值对于所有的组件都是直接可用的。

一个简单的状态管理模式应该包括三个部分
state，驱动应用的数据源，就是一个个数据
view，以声明的方式将state映射到视图，就是画面上看到的效果
actions，响应在view上的用户状态输入导致的变换，就相当于一个函数，对state中的数据进行操作

getters方法就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
在vuex

mutation是vuex中的事件提交方式，它允许我们直接对state中的数据进行操作，通常情况下我们可以将
数据的逻辑操作放在其中，不过这个操作逻辑必须是同步的。

v-if和v-show的区别

v-if：当条件不成立时不会渲染
切换开销较大，不适合经常变化的场景

v-show：无论条件成不成立都会渲染，会根据条件的真值判断是否隐藏
首次渲染开销较大，但是切换开销小，适合经常变化的场景。

git checkout命令

1.还没有将文件add到暂存区，如果修改了某个文件，这时候执行git checkout --xxx 就会撤销修改，将文件恢复到之前的状态。

2.已经将修改后的文件add到暂存区，git reset HEAD filepathname (比如： git reset HEAD readme.md)来放弃指定文件的缓存，放弃所有的缓存可以使用 git reset HEAD . 命令。
这时候执行git checkout --xxx 就会撤销修改，将文件恢复到之前的状态

.gitignore 配置不需要git管理的文件，告诉Git哪些文件不需要添加到版本管理中。
*.txt就表示所有.txt后缀的文件都不会添加到版本管理中，git add .对此类文件无效

1.常见的行内元素和块级元素

1).行内元素

span
a
br
b
strong
img
input

2).块级元素

h1-h6
hr
p
pre
ul

axios是一个可以运行在浏览器和nodejs上的http库

http协议是用于从www服务器传输超文本到本地浏览器的传输协议
超文本就是HTML 文件, 图片文件, 查询结果等等

http是一个基于tcp/ip通信协议来传递数据的协议

• HTTP三点注意事项：
  1. HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

复杂的软件必须有清晰合理的架构，否则无法开发和维护
设计一个程序的结构涉及到一个专门的学问：架构模式，属于编程的方法论

MVC模式就会架构模式的一种，它不仅可以用来设计软件，还适用于其他广泛的设计和组织工作

mvc
控制层接收用户的请求，进行相应的数据操作，从数据库取回数据，之后将数据放进view层中返回给用户

回调地狱：回调函数中多次嵌套回调函数

坏处：造成可读性变差,代码不好维护

解决方式：Promise对象
对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

什么是nexttick()

nextTick是一个回调函数，它保证操作数据是在dom更新后进行的。
简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，

为什么要用这个函数？
因为Vue实现响应式并不是在数据变化后DOM立即变化，而是按照一定的策略进行更新。

created钩子函数运行时，dom并没有被挂载上，如果在created钩子函数中对dom进行操作会出错。
如果这时使用this.$nextTick() dom操作放在函数内部，那么在更新了dom后 就会执行响应的代码。

什么是nextTick函数(理解后手打)

是一个回调函数，他可以让dom渲染完成后在再对dom进行操作
通常情况下会在created中使用，因为在这个函数中 完成了数据的操作但是没有将dom渲染到页面上，
所以我们运行nextTick函数就很容易将数据延后执行。

Vue项目中每个文件和文件夹的用法
dist存放打包后的项目
public 存放index.html和static文件夹
src 项目的源码文件
assets 素材文件 存放图片 自定义css 等其他静态文件
components 组件文件
router 路由相关的配置
main.js项目的入口文件
App.vue主组件文件

在Rrouter-link标签中使用tag属性，可以更改渲染后的标签属性

对mvvm架构的理解

mvvm架构就是一个软件设计模式，将软件分成不同的层级，每个层级负责不同的任务。
m就是model 负责数据及业务逻辑
v是view 负责ui界面，在vue中变现为dom
vm是一个连接model和view的中间层，有了它我们可以实现数据的双向绑定，在更改数据model的时候
视图层会相应地发生改变，在更新视图层的时候 model也会发生相应的变化。具体的实现原题就是js中的Object.Defineproperty()
和监视器来实现的。
model和view之间的同步完全是自动的，不需要认为干涉，因此开发者只需要关注业务逻辑即可。

vue的生命周期是什么?

从创建到销毁vue的过程，具体就是开始创建，加载数据，编译模板，挂载dom——>渲染，更新——>渲染，卸载
等一系列过程

在每一个阶段vue为我们提供了钩子函数
beforecreate
created
beforeMoute
Mouted
beforeUpdate
Updated
BeforeDestroy
Destroyed

第一次创建页面的时候会执行

beforecreate
created
beforeMoute
Mouted
这四个钩子函数

在mouted阶段dom已经被渲染到页面上了

vue router有几种模式

两种mode hash模式 和history模式
hash模式基于hash码而来，在浏览器中会出现#
history依赖于html5的pushState()和replaceState()这两个api，在浏览器中不会有#

渐进式开发的理解：主张最少，根据不同的需求选择不同的层级。

数据库事务的四大特性ACID atomicity consistency

1. 原子性 事务包含的操作要么成功要么失败并回滚到原始状态，实现原理：日志
2. 隔离性 在并发操作中，多个线程对某一事物进行操作，每一个线程都是独立的，一个事务在最终提交之前，对其他事务是不可见的
3. 一致性 所有的数据都是一致状态，也就是不管数据库怎么改变所有的事务执行之间和事务执行之后，数据都处于一致状态。
4. 持久性 持久性是指一个事务一旦被提交了，那么对数据库中的数据的改变就是永久性的。数据不会因为断电等其他原因而导致数据恢复到原来的状态

Js debounce方法
某个函数在某段时间内，无论触发了多少回，都只执行一次

JSON是一种数据交换格式，有两种格式
数组和键值对
string -> js Object JSON.parse(str)
js Object -> String JSON.stringify(Object)

学到的新知识：如果想要实现在展开对话框后，点击document上任意除组对话框外的位置，就可以隐藏对话框，有如下解决办法：

注意
1. 判断在对话框中的子元素是否被选中
2. 向父节点遍历

document.addEventLister('click',function(e){
		
		如果点击的是对话框，则循环结束
		循环判断点击事件e的节点机器父节点
		否则继续循环，遍历所有父节点任然没有对话框，循环结束
		
		结束后直接将对话框设置成 隐藏
		
		let eelm=e.target;
		whlie(eelm){
			if(eelm.id=="****"){
				return 
			}
			eelm=eelm.parentNode;
		}
		
		ducument.querySelet("****").hidden()
	})