# VUE2
## 优点
* 体积小
* 运行效率高（虚拟dom,diff算法）
* 双向数据绑定
* 学习成本低，生态丰富
## 基础
#### Vue实例
```js
varvm = newVue({
// 参数
})
```
#### 参数
data
props
propsData
computed
methods
watch
el
template
render
renderError
生命周期函数
directives // 自定义指令
filters // 过滤器
components // 可用组件
parent
mixins
extends
provide / inject
...
#### 生命周期
![生命周期](https://cdn.nlark.com/yuque/0/2021/png/22701779/1638146818471-46881d6e-7773-4b6a-ad96-a8123ac1c278.png"生命周期")
* beforeCreate（创建前），在数据观测和初始化事件还未开始
* created（创建后），完成数据观测，属性和方法的运算，初始化事件， $el 属性还没有显示出来
* beforeMount（载入前），在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
* mounted（载入后），在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
* beforeUpdate（更新前），在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
* updated（更新后），在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
* beforeDestroy（销毁前），在实例销毁之前调用。实例仍然完全可用。
* destroyed（销毁后），在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
#### 语法糖
* v-model
* v-bind
* v-on
* v-if/v-else-if/v-else
* v-show
* v-text
* v-html
* v-for
* v-slot
* v-pre
* v-cloak
* v-once
* ...
#### vue内置组件
component
keep-alive
slot
#### vue组件示例
```vue
<template>
<div>
<h1>{{title}}h1>
<ChildComponents>ChildComponents>
div>
template>
<script>
// 引入子组件
importChildComponentsfrom"./ChildComponents.vue";
// 引入其他Js脚本或类库
importCookiefrom"@/lib/cookie.js";
exportdefault {
//注册子组件
components: {
ChildComponents,
},
//组件私有数据
data() {
return {
title:"组件标题",
firstName:"",
lastName:"",
};
},
//父组件传递过来的数据（两种方式声明：1.数组 2.对象）
props: {
age: {
type:Number,
default:0,
required:true,
validator:function (value) {
returnvalue>=0;
},
},
},
//计算属性
computed: {
fullName() {
returnthis.firstName+this.lastName;
},
},
//监听
watch: {
title(preVal, newVal) {
console.log(`改变之前的值：${preVal}；改变之后的值：${newVal}`);
},
},
//方法集
methods: {
getCurrentDate() {
returnnewDate().toLocaleDateString();
},
},
//生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
beforeCreated() {
console.log("component before created");
},
//生命周期钩子：组件实例完成创建之后调用
created() {
console.log("component created");
},
//生命周期钩子：组件实例渲染完成时调用
mounted() {
console.log("component mounted");
},
// ...
};
script>
<stylelang="less"scoped>
div {
width: 100%;
}
style>
```
#### vue-router
* 路由模式： hash、history
* 使用方法
1. 创建路由组件，挂载到Vue实例中
2. 配置路由映射：组件和路径映射关系
3. 使用路由：通过``和``
#### vuex
> dispatch -> action -> commit -> mutation -> store
![状态管理](https://cdn.nlark.com/yuque/0/2021/png/22701779/1638146852711-b8e50350-9abb-49e8-8ab2-738242f9cf67.png"状态管理")
* 概念
* State
* Getters
* Mutations
* Actions
* Modules
* 辅助函数
* mapState
* mapGetters
* mapMutations
* mapActions
#### 渲染函数 JSX
* render写法
* vue语法适配
## 原理
#### MVVM设计模式
* Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
* View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
* ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。双向数据绑定。
#### 响应式
> Vue2 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty中的访问器属性中的 get和 set方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
* 双向数据绑定原理
* Object.defindeProperty检测data变化
* 重新定义数组原型
* 监听对象属性
```js
constdata = {};
letname = "张三";
Object.defineProperty(data,'name',{
get:function(){
console.log('触发get')
returnname
},
set:function(newVal){
console.log('触发set')
name=newVal
}
})
//测试
console.log(data.name) // 触发get 张三
data.name = '李四' // 触发set
```
* 缺点
* 深度监听obj，需要递归到底，一次性计算量大，如果数据过大页面，页面可能会卡死
* 无法监听新增属性/删除属性（提供Vue.set Vue.delete）
#### 虚拟DOM、DIFF算法
1. 在内存中构建虚拟dom树；
2. 将内存中虚拟dom树渲染成真实dom结构；
3. 数据改变的时候，将之前的虚拟dom树结合新的数据生成新的虚拟dom树；
4. 将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对（diff算法进行比对），来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历；
5. 会将对比出来的差异进行重新渲染；
## 进阶
#### vue-cli/Webpack、Babel
* 项目搭建
* 打包配置
* bable编译配置
#### SSR
#### Vue插件
* 使用（Vue.use）
* 开发（install 方法）
## Vue与React
* JSX 和纯函数式的编程范式,直接进行局部重新刷新（或者重新渲染），更简单，对原生的支持和更彻底贯彻相关思想显得更纯粹;
* Vue 进行数据拦截/代理，它对侦测数据的变化更敏感、更精确，也间接对一些后续实现（比如 hooks，function based API）提供了很大的便利;
* Vue 的方案在结构、样式、业务分离方面更清晰彻底，更符合前端多年来的编码习惯，更符合直觉，更容易学习和维护;
* 相比 React 需要学习的新概念比较少，把 API 看一遍就上手，学习曲线平滑。看下这个问题下的答案多少把二者当做框架、分不清模板和 virtual dom 就能体会了，但对研究不深的使用者或者初学者其实影响不大，React 的文档可比 Vue 简短多了，大篇幅在介绍概念而非 API;
* React 并不知道什么时候“应该去刷新”，触发局部重新变化是由开发者手动调用 setState 完成。React setState 引起局部重新刷新。为了达到更好的性能，React给开发者 shouldComponentUpdate 这个生命周期 hook，来避免不需要的重新渲染（相比之下，Vue 由于采用依赖追踪，默认就是优化状态：你动了多少数据，就触发多少更新，不多也不少，而 React 对数据变化毫无感知，它就提供 React.createElement 调用已生成 virtual dom）。
