vue 是一款友好的，多用途且高性能的 JavaScript 框架，它可以帮你创建 可维护性和可测试性更强的代码库。
vue 是渐进式的 JavaScript 框架。本文档只记录 一些概念或者做法，从 vue 文档记录。
交互
我们写的方法中，更新了应用的状态，但没有触碰 DOM 所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
组件
组件系统是 vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型，独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树；
MVVM
MVVM（Model–view–viewmodel）是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来。是一种设计模式的变体。
当一个 vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中，当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
生命周期
每个 vue 实例在被创建时都要经过一系列的初始化过程--。数据监听 编译模板，将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这些过程运行一些叫做 生命周期的函数，这给了用户在不同阶段添加到自己的代码的机会。
本质上：每个主要 vue 生命周期事件被分成两个钩子，分别在事件之前和之后调用。 vue 应用程序中有 4 个主要事件（8个主要钩子）
- 创建 - 在组件创建时执行
- 挂载 - DOM 被挂载时执行
- 更新 - 当响应数据被修改时执行
- 销毁 - 在元素被销毁之前立即执行
beforeCreate 创建之前，访问不到data中的变量的。
create Dom 还没有编译，但是 vue 实例数据和方法可以访问了。
beforeMount 触发在编译 Dom 阶段的，编译模板阶段。我们在这个钩子对页面元素内容是不能修改的。
Mounted 页面挂载完毕之后，这时候我们就可以修改 DOM，已经可以看到页面了。在 mounted 构造函数之后，vue 实例已经创建完毕了，就进行运行阶段了。
这里我要说一下,对Vue的数据更新页面改变的理解,Vue的实例中比如data里面的数据的话,我们假如插值在页面上的话,我们修改这个数据,它不是及时渲染到页面上面的,它是在内存中对之前的虚拟DOM中的data数据进行更改,生成新的虚拟DOM之后才会渲染到页面上。
beforeUpdate 更改data数据后，当虚拟DOM中的data发生改变时触发，此时虚拟DOM没有加载到页面上。页面上的数据不变，虚拟DOM中的数据改变。
Updated 更改data数据之后，虚拟DOM中的data发生改变页面上的data也发生改变（即新生成的虚拟DOM挂载上页面了）
销毁阶段
beforeDestroy------------销毁前执行的钩子函数，可以继续使用vue实例中的数据。
destroyed------------------已经销毁了，vue实例中的数据不可用了。
还有一个没用过的记录一下
actived
deactivated
errirCaptured
vue3生命周期
beforeCreate 跟 created ---> setup
setup()this是不指向当前实例的（this 为 undefined）如果想使用 $emit 的功能，需要借助 setup(props，context)中的 context；
mounted ---> onMounted
beforeUpdate ---> onBeforeUpdate
updated ---> onUpdated
beforeDestroy ---> onBeforeUnmount
destroyed ---> onUnmounted
actived ---> onActivated
deactivated ---> onDeactivated
errorCaptured ---> onErrorCaptured ,onRenderTracked,onRender,Triggered
v-if v-for
vue 在 2.x 版本中的一个元素同时使用 v-fi 和 v-for 时，v-for 会优先使用。
v-if v-for
vue 在 3.x 版本中 v-if 总是优先与 v-for 生效。避免在同一元素上同时使用两者。
v-bind
vue 在2.x 版本中如果 dom 属性 跟 bind绑定属性一样 ，dom 属性总是会覆盖 bing 绑定的属性；
vue 在3.x 绑定的声明顺序决定 dom 属性绑定的值。
ref
我们知道在 dom 上添加 ref 属性 可以通过 this.$refs.xxx 获取到 dom 元素。或者在 组件上添加 可以获取到 组件的实例；
inheritAttrs
当我们使用组件时，为其传递的 props 进行定义，才能够使用，如果没有定义，这个属性会作为 dom 的属性被渲染。解决是 在组件内 inheritAttrs: false
$attrs
项目中有多层组件传参可以使用 $attrs 配合 inheritAttrs 控制这些特性是否显示在 dom 元素上。
$listeners
vue3 已经不支持 $listeners 在 vue3 合并到了 $attrs
计算属性
vue 用声明的方式创建这种依赖关系，计算属性的 getter 函数是没有副作用的，就是只有依赖的状态发生改变依赖的方法绑定也会更新。计算属性是基于响应式依赖进行缓存的，只会在相关响应式依赖发生改变时它们才会重新求值。依赖没有发生改变计算属性会返回之前的结果。
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter
监听属性
watch 响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定；父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
prop 规范 prop用来传递一个初始值的话，最好本地 data 定义一个数据用这个 prop 作为其初始值2
prop 规范 prop 值需要转换。 最好使用 计算属性处理这个prop
prop验证
app.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组的默认值必须从一个工厂函数返回
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须与下列字符串中的其中一个相匹配
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
})
:eagle: 提示
注意 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
emits
emits:列表声明从父组件继承来的事件
$emit:抛出事件，通过父组件处理
在子组件中，通过 $emit() 来触发事件
在父组件中，通过 v-on 来监听子组件事件
Provide / Inject （的绑定不是响应式）
深度嵌套的组件，而深层的子组件只需要父组件的部分内容。这种情况下，我们可以使用 Provide Inject：父组件使用 provide 提供数据 ，子组件 inject 使用这些数据。
值得注意的 provide 要提供组件实例属性的话，我们需要将 provide转换为返回对象的函数；
异步组件
defineAsyncComponent
组合式 API
新的 setup 选项在组件被创建之前执行，一旦 props 被解析完成，它就将被作为组合式 API 的入口。
在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。
总结
组合式 API光看文档是不行的，还得练，vue 3更新了很多特性，感觉有点像 react ref什么的。
