vue-day01&day02----vue渐进式MVVM框架、new操作符做了哪些事、指令、事件修饰符、浏览器按下回车后发生了什么、浏览器渲染页面的流程、虚拟DOM的特点、回流和重绘、computed、vue实例身上的方法、watch监听、生命周期、ref、组件
# day01
### vue基础
vue是一个渐进式的JavaScript框架，是一个MVVM框架。
M：数据层
V：视图层
VM：映射层
vue的特点：通过数据去操作视图
底层原理：Object.defineProperty()（ES5，不支持IE8） vue3.0是使用new Proxy()（ES6，不支持IE11）
写在data中的数据会自动添加数据劫持，当修改时会触发watch监听，以此做数据监听。
因为Vue是一个构造函数，所以使用vue的时候要通过new的方式进行使用，Vue这个构造函数的参数是一个配置项options。
let vm=new Vue({
el:"#app",
data:{
msg:"赏一碗蝙蝠汤"
}
});
Question：new操作符做了哪些事？
1、开辟一块内存空间
2、将this指向这块内存空间
3、执行constructor函数，此时this指向实例对象，将构造函数上面的属性和方法添加到实例对象身上
4、return this
### 指令
v-text：
作用：用来渲染数据和执行一些js语法
底层是innerText
简写：{{}}
v-test在加载的时候，如果vue.js还未加载进来，页面不会出现{{}}，而使用简写方式就会出现{{}}。
v-html：
作用：用来渲染数据和执行一些js语句
可以用来解析html标签
简写：{{{}}} 仅限于vue1.0，所以不用了
v-if：
通过创建和删除元素来控制元素的显示和隐藏
值：true----显示，false----隐藏
可以和v-else-if、v-else连用
v-show：
通过display来控制元素的显示和隐藏
v-if和v-show的区别：
1、v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁地切换，则使用v-show，如果在运行时条件很少改变，则使用v-if
2、使用场景：
频繁切换的时候用v-show，例如选项卡
登录与非登录页面，vip与非vip，权限页面用v-if
3、v-for不能和v-if一起使用，v-for的优先级更高，v-for和v-show一起使用
v-for：
遍历数组、对象、字符串、数字
语法：v-for="(item,index) in 需要遍历的数据"
v-bind：
作用：用来给元素绑定属性
href
src
title
class
style
自定义属性
语法：v-bind:属性="值"
简写：:属性="值"
v-on：
绑定事件
简写：@事件名称="事件函数"
关于事件对象：
默认情况下如果事件函数不需要传递参数的时候可以不加()，然后在methods中的函数里通过参数e来获取到事件对象。
默认参数是事件对象，不传参时，参数默认为e；
如果有其他参数，事件对象e需要通过$event手动传递。
v-pre：
解析{{}} 让{{}}不再去解析数据
v-cloak：
防止vue.js没有加载进来的时候，页面显示{{}}
v-once：
只渲染一次数据
v-model：
双数据绑定
流程：当输入框的数据发生改变时会修改data中相对应的数据，当data中数据发生改变，视图会跟着发生改变。
使用场景：只能在表单元素中进行使用
### 事件修饰符
作用：辅助一些事件，阻止事件冒泡，阻止浏览器默认事件等
语法：@事件名称.修饰符.修饰符.修饰符...="事件函数"（一个事件后面可以跟多个修饰符）
常见的修饰符：
.stop：阻止事件冒泡
.prevent：阻止浏览器默认行为
.once：事件只触发一次
.enter：回车键触发，也可以写 .13
### Question
1、浏览器按下回车后发生了什么
①DNS解析，浏览器会先去本地的hosts文件中找有没有和地址栏域名对应的IP，如果有直接打开，如果没有就会发送DNS请求到DNS服务器。
②拿到对应的IP后，浏览器通过三次握手建立TCP/IP联系后，发送http请求，进行网络通信，浏览器从应用层到传输层（TCP）、到网络层（IP）、到链路层（网络）、客户端发送请求的阶段结束。
③服务器接收到客户端的http请求后，查找客户端请求的资源，然后再从链路层到网络层、到传输层、到应用层，将响应的报文返回，通过四次挥手断开TCP/Ip连接。
④浏览器收到html、css、js等文件后，解析html构建DOM树，构建render树、布局render树、绘制render树、然后解析css文件构建渲染树，这个过程完成后，浏览器开始布局渲染树并将其绘制到页面中。
注意：在首次加载的时候会经历回流和重绘，速度较慢。js的加载可以看成是这个同步的主线程上的一个任务队列。有的网页页面很大，可以用预加载和懒加载提升用户体验。
2、浏览器渲染页面的流程
①解析html，构建DOM
②解析css，构建CSSOM
③js脚本加载
④将DOM和CSSOM组合生成Render Tree（渲染树）
⑤遍历渲染树，将渲染树上每个节点进行页面的回流与重绘，生成页面
注意：上述过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完才去构建和布局render树，它是解析一部分就显示一部分，同时，可能还在通过网络下载其余内容。
3、虚拟DOM特点
什么是虚拟DOM：它就是内存中的一个变量，是一个对象结构
前端效率优化：最致命的问题就是DOM操作，尽量减少DOM操作
vue的高效：
①虚拟DOM页面渲染高效
②js 获取数据，根据数据渲染界面DOM vue将开发者的精力从DOM操作上转移到了数据操作上，数据变页面变
4、回流和重绘
回流：渲染树中的一部分或者全部元素因为尺寸、布局、隐藏等改变而需要重新构建。回流至少会发生一次，也就是第一次加载的时候。
重绘：在回流时，浏览器会使渲染树中受影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流后，浏览器重新绘制收到影响的元素到页面中。background-color
区别：回流一定会发生重绘，重绘不一定会发生回流。
5、diff算法
# day02
### computed
通过属性计算得来的属性
注意：
1、computed内部的函数可以随意编写
2、computed内部的函数必须通过return的方式返回出去，最好不要在computed内部进行赋值操作
3、虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加()
4、只要函数内部所依赖的属性发生了改变，那么这个函数就会自己调用
5、当函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果
总结：computed中的方法都是依赖vue中的属性，如果属性发生了改变那么computed中的对应的函数就会去执行。
使用的场景：当多个属性影响一个属性的时候就需要用到computed----购物车
### vue实例身上的方法
$on()：事件绑定
参数：
参数一：事件名称
参数二：事件函数
$emit()：事件触发
参数：
参数一：事件名称
参数二：需要传递的参数（选填）
$off()：事件解绑
参数：
参数一：事件名称
参数二：需要解绑的事件函数（选填）
$once()：事件绑定，只触发一次
参数：
参数一：事件名称
参数二：事件函数
$mount()：外部设置挂载点
$forceUpdate()：强制更新（耗费性能，一般不用）
$nextTick()：获取数据更新后最新的DOM结构
$destroy()：卸载 断开vue与实例之间的联系
$set()：
作用：给一个响应式对象添加一个响应式属性或者给响应式对象设置属性
语法：$set(object,key/index,value);
$delete()：
作用：删除响应式对象的某一个值
语法：$delete(object,key/index);
### watch监听
作用：监听data中属性的变化
当data中的属性发生了变化，那么watch中相对应的函数就会执行
注意：
1、watch中的函数名称必须是所依赖data中的属性名称
2、watch中的函数是不需要调用的，只要函数所依赖的属性发生了变化，那么相对应的函数就会执行
3、watch中的函数有两个参数：newVlaue，oldValue
4、watch默认情况下无法监听对象的改变，如果需要进行监听则需要进行深度监听，因为它只会监听对象的地址是否发生了改变，不会监听值的改变。
深度监听的两种方法：
①"obj.name"(newVlaue,oldValue){
}
②obj:{
handler(newValue){
},
deep:true
}
5、watch默认情况下第一次的时候不会去做监听，如果需要第一次加载的时候就监听需要设置immediate:true
6、watch在特殊情况下是无法监听到数组的变化：
①通过下标来更改数组中的数据
②通过length来改变数组的长度
对应的解决办法：
①通过vue实例方法$set()进行设置
②通过splice来进行数组清空
### 生命周期
什么是生命周期：
也叫生命周期钩子函数
在相对应的阶段做相对应的事情
vue有自己的生命周期：
beforeCreate()
当前生命周期是vue初始化的时候执行的钩子函数，在这个函数里面data和methods都还没有将自身的属性和方法代理到vue的实例身上，因此在当前生命周期中是访问不到data中的属性和methods中的方法的。
当前生命周期函数的执行的时候组件还未进行创建，因此我们可以在当前组件中进行loading的显示
*created()
1、因为当前生命周期函数是组件创建后执行的，所以我们可以在当前生命周期中进行数据的请求（ajax）
2、当前生命周期在执行的时候会将data身上所有的属性进行数据劫持，给每个属性添加setter和getter方法
3、当前生命周期在执行的时候会将data身上所有的属性和methods身上所有的方法添加到vue的实例身上
beforeMount()
当前生命周期是组件挂载到页面之前执行的钩子函数，我们可以在当前生命周期函数中对数据进行最后的更改
当前生命周期数据和模板还未结合，因此访问不到真实的DOM结构
*mounted()
当前生命周期是组件挂载到页面之前会执行的钩子函数，我们可以在当前生命周期函数中访问到真是的DOM结构
当前生命周期函数中数据和模板已经进行了结合，可以通过this.$refs来访问到真是的DOM结构
场景：在当前生命周期函数中进行方法的初始化（Swiper better-scroll echarts）
beforeUpdate()
当前生命周期函数中我们可以访问到真实的DOM结构
当前生命周期函数中我们可以对更新的数据做最后的更改
当前生命周期函数中更新的数据还未和模板进行结合
同时也可以进行更新数据的检测
uodated()
当前生命周期函数中数据和模板进行进行结合，我们可以在当前生命周期函数中获取到数据更新后最新的DOM结构
如果我们在当前生命周期函数中进行实例化操作，一定要进行边界判断，否则会造成无用的性能消耗，不建议在这里实例化。
边界判断：
if(!this.swiper){
this.swiper=new Swiper();
}
*beforeDestroy()
当前生命周期函数会在组件被销毁的时候去执行，我们可以在当前生命周期函数中进行事件的解绑，定时器的清除
我们在当前生命周期中仍可以获取到真实的DOM结构
destroyed()
在当前生命周期函数中我们访问不到真实的DOM结构，以及当前生命周期会断开与vue的关联
### ref
语法：
1、给需要获取真实的DOM结构的元素添加ref属性，例如 <p ref="p"></p> 这个名字必须是唯一的
2、通过this.$refs.p可以获取到真实的DOM结构
### 组件
1、什么是组件：
页面上任何一个部分都是一个组件，多个组件组成一个模块
2、组件的特点：
复用性强，便于维护
3、组件的组成部分：
html css js
4、如何创建一个组件：
全局组件：
语法：
Vue.component("组件名称",组件配置项)
局部组件：
new Vue({
components:{
组件名称:组件配置项
}
})
注意：
1、全局组件必须要在实例化之前
2、组件的配置项和vue的配置项一模一样，唯一的不同点是vue的data是一个对象，组件的data是一个函数return一个对象
