Day01--5.9
一、computed和watch的区别
1、相同点:
都可以监听数据。
2、不同点:
1)、概念
computed: 是计算属性，依赖其它属性值，并且 computed 的值有缓存，当依赖的属性值发生改变时，才会重新计算 computed的值，默认是只读的(相当于getter函数)，它也可以设置getter和setter函数来完成读和写。
watch: 更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter。watch默认只监听一层。如果要深度监听，让deep属性为true。
2)、作用:
computed: 是为了显示而用，降低了模板上代码复杂度
watch: 属性变化的检测 (相当于事件) ，当属性的值发生变化时，可以调用函数
3)、依赖模板调用:
computed:只能在模板上使用。
watch: 不能在模板上使用。
4)、是否异步:
computed: 不能有异步，只能同步
watch: 可以有异步
二、什么是路由守卫
1.什么是路由守卫
在路由跳转的特定阶段自动执行的函数，主要对页面的跳转功能进行限制
2.路由守卫分为三大类
2.1）全局守卫
前置钩子: beforeEach
后置钩子: afterEach
2.2）路由独享守卫
只有前置: beforeEnter
2.3）组件内部守卫
前置: beforeRouteEnter
路径更新，组件复用: beforeRouteUpdate
离开: beforeRouteleave
3.路由钩子函数的参数
to:目标路由
from: 当前路由
next:跳转
三、你知道的继承方式、并说优缺点
1.原型（链）继承
子类（构造函数）的原型属性 指向 父类的对象（实例）
优点：写法方便简洁，容易理解。
缺点:
1.1）被继承的类型(父类)里包括引用类型的属性的时候，它会被所有实例共享其值
1.2）创建子类型的实例时，没法传参给被继承类型。
2.call和apply继承
在子类构造函数里，用call和apply改变父类构造函数里的this(子类对象)。
缺点：没法继承父类原型属性上内容（属性和方法）
3.组合继承
把原型（链）继承和call，apply继承结合起来。各自发挥自己的优势。
原型继承：把父类原型属性上内容（属性和方法）继承下来。
call和apply继承：把父类构造函数里的属性和方法继承下来。
4.ES6继承:
1、继承关系的关键字：extends;
2、子类构造函数里必须调用super()，而且必须写在子类构造函数的第一句话
3、ES6的这种写法就是个语法糖（换了写法，本质一样）
Day02--5.10
一、git常用指令
1. 初始化
git init 让项目被git管理
2.工作区提交到暂存区
git add 文件名
git add . 全部文件
3.查看工作区的文件状态
git status
4.暂存区提交到版本库
git commit -m "你的提交说明信息"
注意:在你第一次使用git提交的时候 会出现下面的警告 提醒你设置当前操作git这个用户的相关信息
*** Please tell me who you are.
Run
git config --global user.email "[email protected]"
git config --global user.name "Your Name"
to set your account's default identity.
Omit --global to set the identity only in this repository.
fatal: unable to auto-detect email address (got 'xihaoyuan@A84F.(none)')
5.查看版本库
git log
6.回退--版本到暂存区
git reset commitID(版本号)
7.回退--暂存区到工作区
git checkout -- .
分支
是git的必杀技 因为他在切换的时候是秒切的 这也是git在众多版本控制工具中脱瘾而出的原因
8.查看分支
git branch
9.新建分支
git branch 你的分支名
10.切换分支
git checkout 你要切换的分支名
11.合并到主分支
git merge 我的分支名（在主分支完成）
12.上传到远程库
Git push 你上传的地址 master
克隆
克隆这个命令仅仅只在你第一次拉取某个项目的时候使用 今后如果还想拉取就是用下面的下拉
你要克隆代码 千万不要使用git init初始化
你要克隆代码 千万不要使用git init初始化
你要克隆代码 千万不要使用git init初始化
Git clone 地址
下拉
git pull 地址
二、路由传参
路由传参 动态路由匹配
就是把数据从一个路由页面传递到另外一个路由页面中 （新闻列表页面 用户点击之后 会跳转到新闻详情页 但是新闻详情页展示的内容应该是用点击的那一条新闻 所以如何把数据从一个页面传递到另外一个页面）
params方式
1.在需要接受数据的路由页面规则上 设置接受参数
{
path: '/all/:xiaoming', //设置接收参数
name: 'All',
component: All
},2.发送
声明式
<router-link v-bind:to='{name:"All",params:{xiaoming:"111我是phone传递的数据"}}'>点我使用声明式把数据传递给all页面</router-link>编程式
<template>
<div>
<Link/>
phone
<h1 v-for="(v,i) in arr" :key="i" @click="fun()">{
{v.title}}</h1>
</div>
</template>
<script>
export default {
methods:{
fun(){
// 编程式导航
// this.$router.push({name:"你要去的路由规则的名字",params:{你在规则上配置的参数:你要传递的数据}});
this.$router.push({name:"All",params:{xiaoming:"我是phone传递的数据"}});
}
},
data(){
return {
arr:[
{
title:'我是辩题11',content:"我是内容11",
},
{
title:'我是辩题12',content:"我是内容12",
},
{
title:'我是辩题13',content:"我是内容14",
},
{
title:'我是辩题14',content:"我是内容15",
},
]
}
}
}
</script>
<style>
</style>3.接受.
在接受的页面使用 this.$route.params.xxx 注意单词
<template>
<div>
<h1 @click="fun()"><</h1>
<h1>新闻详情页---{
{this.$route.params.xiaoming}}</h1>
</div>
</template>
<script>
export default {
methods:{
fun(){
// 路由回退
this.$router.go(-1);
}
}
}
</script>
<style>
</style>query方式
1.发送
声明式
<template>
<div>
<Link/>
home
<!-- <router-link :to="{name:'你要去的页面规则的name',query:{key:val}}">使用query方式把数据传递到购物页面</router-link> -->
<router-link :to="{name:'Shop',query:{xiaohong:'我是query数据'}}">使用query方式把数据传递到购物页面</router-link>
<!-- query方式发送参数的时候 不但可以写name 还可以写成path -->
<router-link :to="{path:'/shop',query:{xiaohong:'1111我是query数据'}}">使用query方式把数据传递到购物页面</router-link>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>编程式
课下自行尝试
2.接受
在想使用数据的页面中 使用 this.$route.query.xxxx
总结路由传参/动态路由匹配
路由传参或者是动态路由匹配 他是vue-router 给我们提供的一种 把数据从一个路由页面传递到另外一个路由页面的技术
他有两种方式
第一种params 这种方式在传递参数的时候共3步 1在接收的路由页面规则中配置接收参数 2发送 我是使用name作为跳转地址 使用params来设置发送参数 3接收 能想起来就说想不起来就不说 this.$route.params.xxxx
第二种方式 query 他在传递数据的时候共两部 发送和接收 和params方式基本相同 唯独在发送数据的时候 他不但可以使用name作为跳转地址 还可以使用path 在接收的时候 语法也略有不同 他使用this.$route.query.xxxx
query方式与params方式传参区别
1.url展示形态
params方式 传递参数的时候相对安全一些 因为不显示传递的数据key 只显示value
query方式 在传递的时候会显示数据key和val 相对来说没有parmas安全
2.刷新丢失
parmas方式 刷新会丢失 （上线之后）
query方式 刷新不会丢失
3.语法区别
三、vuex介绍
1、vuex是什么
vuex是一个状态（数据）管理工具，它能够完成组件之间的数据共享（组件的通信）
2、vuex的作用
1）、vuex能够保存全局数据（数据仓库），供整个应用使用
2）、vuex保存的数据是响应式的
3）、vuex保存的数据可以跟踪状态的变化
3、vuex的（核心概念）配置项：
1）、state : 数据仓库 ，存储所有的 共享数据 ，相当于vue组件里的data
2）、Getters ： 在state的基础上 派生的数据， 相当于vue组件里 computed
3）、Mutations：修改state的数据时，用mutation，这与跟踪状态 有关系，只能有同步代码
4）、Action：解决mutation里只能有同步代码的问题，action里可以有异步代码
5）、modules：模块化
4、vuex的数据流转
vue组件 派发（dispatch）action。action里提交（commit）mutation，mutation里修改（mutate）state的数据，state的数修改后，会响应式渲染到模板上。
5、模块化怎么使用。
1）、当项目比较大时，所有的全局数据存放在state里，会非常混乱，怎么办？使用module，把数据分门别类的进行处理，即：模块化。 每个模块是一个独立的store。然后由总体的store引入所有的分模块store。
2）、怎么解决（getters，mutations，actions）的重名
①
namespaced：true②使用模块中getters，mutations，actions时，前面需要加上模块名：
格式：
模块名/getters或者mutations或者actions的名字6、辅助函数：
mapState, mapGetters,mapMutations, mapActions
1）、作用：
简化代码：在组件里不需要使用$store 了。
2）、具体使用：
mapState, mapGetters 会映射到组件的computed上
mapMutations, mapActions 会映射到组件的methods里。
四、虚拟dom,diff算法
所谓的虚拟 dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM 中的节点，然后再通过特定的render（渲染）方法将其渲染成真实的DOM节点
1、什么是虚拟dom和diff算法：
虚拟DOM: 用JSON对象模拟的真实dom，用来提升性能(减少重绘回流)
diff算法：用来比较两个虚拟dom的不同之处。
2、步骤（思路，流程）
2.1）、产生两个虚拟DOM树：newVDom，oldVDom。
2.2）、oldVDom和真实DOM保持一致
2.3）、数据变化时，影响的是（操作的是）newVDom
2.4）、操作newVDom后，通过diff算法对比newVDom和oldVDom的差异，并在oldVDom标注哪些节点要删除，哪些节点要增加，修改
2.5）、根据oldVDom操作真实的DOM，让真实Dom和oldVDom保持一致
3、diff算法的解释：
逐步解析newVdom的节点，找到它在oldVdom中的位置，如果找到了就移动到下一个的DOM元素，如果没找到说明是新增节点，则新建一个节点插入。遍历完成之后如果oldVdom中还 有 没处理过的节点，则说明这些节点在newVdom中被删除了，删除它们即可。
Day03--5.11
一、双向绑定原理
1、双向: M----》 V。 V-M
2、利用事件和属性完成的。
3、v-model是个语法糖。本质就是事件和属性的结合。
1)、针对文本框(单行和多行) : value愿性和input事件。如果加上修饰符 lazy。事件变成了change事件
2)、针对radio:使用的checked属性和change事件。同时，需要给radio加上value属性。
3)、针对checkbox: 使用的checked属性和change事件.
如果应用在多选时，需要给checkbox加上value愿性 如果应用在单选时，不需要加。
4) 、针对select: 使用value属性和change事件。
二、vue中key的作用
1、key的原理及作用
Key是对节点进行的一个标识，在Vue中，Key作为Vue中对比算法的标识，在数据修改后，可以通过Key进行这个唯一标识进行对比虚拟DOM，从而决定对节点的重新加载以及复用
Key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
2、Key的对比规则
旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变, 直接使用之前的真实DOM！
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key
三、生命周期
1、什么是生命周期；
vue对象（组件）的生命周期，就是从创建，挂载，渲染，更新，到销毁的一系列过程。就是生命周期。
2、vue2的生命周期有四个阶段和八个钩子函数：
第一个阶段：数据挂载阶段。数据挂载阶段是把data配置项的属性挂载到vue对象本身。并做劫持
前后分别有一个钩子函数： beforeCreate，created
第二个阶段：模板渲染阶段：把数据渲染（显示）在模板上。
前后分别有一个钩子函数： beforeMount，mounted
第三个阶段：模板更新阶段：当数据（在模板上使用的数据）发生改变时，会把新的数据渲染到模板上。
前后分别有一个钩子函数：beforeUpdate，updated
第四个阶段：组件销毁：【vue2】
前后分别有一个钩子函数：beforeDestroy 和 destroyed
第四个阶段：组件销毁：【vue3】
前后分别有一个钩子函数：beforeUnmount 和 unmounted
补充：<keep-alive>
1、 在组件切换时，就会出现新组件的创建和旧组件的销毁。如果切换频繁，就会非常的浪费性能。如何解决：用<keep-alive>包裹切换的组件。
2、<keep-alive> ：是用来缓存组件的，包裹在<keep-alive>里的组件不会被销毁。
3、对应的两个钩子函数：activated 和 deactivated
4、<keep-alive> 的两个属性：include和exclude。
Day04--5.12
一、 data是个函数，vue组件的data为什么是个函数。
一个组件的 data 选项必须是一个函数，且要有返回object（就是vue对象的data），只有这样，每个实例（vue组件对象）就可以维护一份被返回对象的独立的拷贝，否则，组件复用时，数据相互影响。即：组件的作用域（应该）是独立的。
简单回答：如果不是函数，那么，复用的组件的data共享同一块内存空间。
二、组件通信
1.选项式--正向传值
①.父组件给子组件数据---props
props是vue实例的一个属性 他的作用是用来让组件接受外部传递进来的数据
props验证语法:
props验证可以对传递给子组件的数据 进行约束（数据类型 默认值 等）
2.选项式---逆向传值
子组件给父组件数据
①.$emit自定义事件
注意：很多同学后期在被问到$emit是什么的时候 总会回到他是逆向传值 这个回答是错的 因为$emit是自定义事件 而逆向传值只是他能完成的一个小功能. 在子组件中必须必须通过事件来触发自定义事件的抛出
②.ref
把ref绑定到子组件身上 那么就可以得到当前这个子组件的所有信息 包含他的data数据 从而完成了逆向传值
ref：是vue中提供的，获取dom元素的方式。
首先，需要知道：用标签的方式使用组件（如：<my-com/>）,实际就是创建了组件对象。只要拿到组件对象，那么组件对象里的methods就可以使用。
refs是vue中获取dom的一种方式，dom也就是标签，标签就是组件对象。即就是：拿到了dom，就相当于拿到了组件对象（这段话需要慢慢品……）
如果某个元素使用ref属性，那么，在vue对象里，就能用this.$refs 访问。可以认为是给元素增加了个id属性，在vue里就可以操作该dom了
③. $parent 与 $children
（1）$parent 访问父组件实例
子实例可以用 this.$parent 访问父实例 即可使用父组件的属性和方法
注意：1. 如果组件没有父组件，他的$parent为undefined
2.App组件(根组件)的$parent不是undefined，也不是App本身 而是vue实例对象。
3.如果组件有多个父组件 那么每次被调用的时候$parent会指向不同的父组件(这条就决定了$parent不会在工作用使用太多 因为不好确定他的父组件是那个)
（2）$children 访问子组件的实例
可以获取到当前组件的直接子组件（只是他的儿子组件。其他的孙子等组件不算），并以数组，数组，数组，数组，数组，数组，数组，数组，的形式返回（因为一个父组件可能有很多个子组件）。
需要注意 $children 并不保证顺序，也不是响应式的。
（3）总结
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信。
(4)$attrs
就是一个容器对象，这个容器对象会存: 父组件传过来的且子组件未使用props声明接收的数据
props接收的数据一般要在页面展示 不需要在页面展示仅仅只想进行逻辑处理的数据那么就用$attrs接收
3.同胞传值
中央事件总线----eventbus
中央事件总线：就是凌驾在两个兄弟组件之上的一个空vue实例 这个实例建立起了一个数据流动的桥梁
状态提升/中间人模式
状态(数据，变量) 提升
把原有放在组件身上的数据 全部统一放到他们共同的父组件身上 旧免去了复杂的数据传递
4.跨层级传值
爷爷组件给孙子组件---vuex
三、单页面应用
SPA的理解：
1、单页面应用的概念
SPA：single page application，单页面应用。
就是整个项目就只有一个html页面（文件），首次加载时，把所有的html，css，js全部加载下来。通过操作dom的删除和创建（添加）来完成页面的切换。
2、单页面应用优缺点
优点：
1、单页应用相对服务器压力小。【因为：首次、或者只要HTML，CSS和JS加载完毕后，切换页面是不用再去服务器请求HTML，CSS和JS】
2、局部刷新，所以，用户体验好。【通过删除、添加、修改DOM的方式】 3、前后端分离 4、页面效果会比较炫酷（比如切换页面内容时的转场动画）
缺点： 1、不利于SEO（Search Engine Optimization）。如：百度，360等搜索引擎收录。 2、初次加载时耗时多（可以使用路由懒加载解决） 3、导航不可用，如果一定要导航需要自行实现前进、后退（vue-router做好了）。页面复杂度提高很多
4、容易造成CSS命名冲突。【用scoped或者BEM的方式解决】