vue基础知识大全
1，指令作用
以v-开头，由vue提供的attribute，为渲染DOM应用提供特殊的响应式行为，也即是在表达式的值发生变化的时候响应式的更新DOM。其内容为可以被求值的js代码，可以写在return后面被返回的表达式。
| 指令 | 简写 | 全写 | 简写 |
| v-bind |
：id |
<div v-bind:id="a"></div> |
<div id:_"a"></div> |
| v-on | @ | <div v-on:click="a"></div> | <div @:click="a"></div> |
| v-slot | # | ||
2，组件是UI重用和组合的基本单位
3，DOM内嵌模板使用时候，名字用小写，即时写为大写，浏览器也会强制为小写，。
4，要在组件中使用响应式，需要使用setup（）函数中定义并返回，返回的值在模板中可以使用
setup是一个专门用于组合式api的特殊的钩子函数。在选项式中没有。
这个函数是组合式API的入口。
4.1创建响应式的方法
使用reactive（）函数来创建响应式对象或者数组
4.2 使用相应式的方法
使用setup（）函数，setup函数没有对组件实例的访问权限，也即是说使用this会报错
4.3 可以使用标签属setup来简化代码
4.4有三种不同的响应式的编程方法。使用标签setup最简单。
4.5 使用场景
4.5.1 非单文件组件中使用组合式api
4.5.2 基于选相识api中调用组合式api
4.6 setup函数的两个参数
| No. | 名称 | |
| 1 | Props |
响应式组件，但是解构的话会失去响应性，请使用props.xxx的形式访问 props'{ title;String }, setup(props){ console.log(props.title) } |
| 2 | context |
上下文 有如下内容（attrs，slots，emit，expose） |
| 3， | expose |
控制该组件可以暴露那些属性 expose（）；让组件处于关闭状态，不向父组件暴露任何对象 expose（｛count；publiccount｝）；有选择的向父组件暴露局部状态 |
| 4 |
可以和渲染函数一起使用 return （） ＝＞ h(div,count.value) |
５，vue的生命周期
作用：可以在特定阶段运行自己写的代码
构成（最常用）：
| 调用顺序 | 名称 | 被调用阶段 | 作用 | 其他 |
|
1 |
beforeCreate | 组件实例初始化后 | data和computed处理之前 | |
| 2 | created | 响应式数据，计算属性，方法，侦听器设置完成后 | 挂在未开始，＄el不可用 | |
| 3 | beforeMount | 组件被挂载之前 | wei创建DOM节点 | |
| 4 | mounted | 挂载之后被调用 |
・所有同步子组件被挂载 ・dom树创建完成并插入父容器 |
|
| 5 | beforeupdate | 响应式状态影变更，但未更新dom树之前 | 在更新dom树之前访问dom树状态 | |
| 6 | updated | 组件更新dom树后 | 禁止在这个函数中更新组件状态，易早成无限更新循环 | |
| 7 | beforeUnmount | 组件被卸载前调用 | 被调用时候，组件实例还具有全部功能 | |
| 8 | unmounted | 组件实例被卸载后 |
・所有子组件被卸载 ・所有响应式作用停止 |
6，响应式核心API函数
6.1 响应式函数工具
| No | 函数名 | 作用 |
| 1 | ref（） |
响应式，可以更改 这个对象只有一个属性值value |
| 2 | computed（） | 返回一个只读的响应式ref对象 |
| 3 | reactive（） | 返回一个对象的响应式代理 |
| 4， | watch（） |
侦听一个或者多个响应式数据源 参数1；一个函数，一个返回值 一个ref 参数2；回调函数 参数3；对象 |
6.2 工具函数
ifref，unref，toRef，isreactive
6.3 组合式的依赖注入
6.3.1 provide 提供一个值可以被后代组件注入（在setup阶段同步调用）
参数1 注入的key
参宿2 要注入的值
6.3.2 inject（）
注入一个父组件提供的值
参数1 注入的key ，在父组件中去寻找key，匹配相应的值。
参数2 可选
参数3 如果2为一个函数，那么参数3必须设定未false
7，选项式api
| No | 类型 | 名称 | 作用 | 返回 | 其他 | |
| 1 | 状态类型 | data | 声明组件初始相应状态 | js对象 |
this.$data.a this.a 都一个访问 |
|
| 2 | props | 需要显示声明 | ||||
| 3 | computed | 组件实例上暴露的计算属性 | ||||
| 4 | methond | 声明要混入到组件实例中的方法。 | 避免使用箭头函数，因为不可以通过this访问实例 | |||
| 5 | watch | 设定数据在变更时调用的侦听回调 | 避免使用箭头函数，因为不可以通过this访问实例 | |||
| 6 | emits | 声明有组件触发的时间 | ||||
| 1 | 渲染选项 | template | 声明组件的字符串模板 | |||
| 2 | render | 用编程式组件虚拟dom树的函数 | ||||
| 3 | compileroptions | 用于配置模板运行时候的编译器选项 | ||||
| 1 | 组合选项 | provide | 被后代组件注入的值 | |||
| 2 | inject | 声明通过从上层提供方匹配并注入当前组件的属性 | ||||
| 3 | mixins | 一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中 | ||||
| 4 | extends | 要继承的基类组件。 | ||||
| 1 | 其他项目 | name | 组件展示时候的名称 | |||
| 2 | components | 注册在当前组件实例中可以使用的组件 | ||||
| 3 | directives | 哪些实例中可以使用哪些指令 | ||||
| 1 | 组件实例 | 也就是使用this可以访问的属性和方法 | 除了$data以外，其他均为readonly | |||
| 2 | $data | 从data选项函数中返回的对象 | 响应式 | |||
| 3 | props | 已经解析的props对象 | ||||
| 4 | $el | 该组件实例管理的DOM根节点 | ||||
| 5 | $optioon | 实例化当前组件的组件选项 | ||||
| 6 | $parent | 当前组件的父亲组件 | ||||
| 7 | $root | 当前组件的根组件 | ||||
| 8 | $slots | 父组件所传入的插槽对象， | 通常用于检测是否存在插槽 | |||
| 9 | $refs | 一个包含DOM元素和组件实例的对象 | 通过模板注册使用 | |||
| 10 | $attrs | 包含attributes对象， | 这个attributes由父组件传入， | |||
| 11 | $watch | 用于命令式第创建侦听器的api |
参数1 表达式 参数2 回调函数 |
|||
| 12 | $emit() | 触发一个自定义事件 | 任何额外的参数都会传递给事件监听器的回调函数 |
8，指令
| 缩写 | No | 名字 | 类型 | 更新位置 | |
|
1 |
v-text | string | 元素文本内容 | ||
| 2 | v-html | string | 元素的innerHTML | ||
| 3 | v-show | any | 依据表达式的结果，来改变元素的可见性 | ||
| 4 | v-if | any | 元素和模板片段 | ||
| 5 | v-else | - | 上一个兄弟元素必须由v-if或者v-if-else | ||
| 6 | v-else-if | any | 上一个兄弟元素必须由v-if或者v-if-else | ||
| 7 | v-for |
Array object number string Iterable |
基于数据 多次渲染元素或者模板 | ||
| 8 | v-on |
Function object Inline statement |
给元素绑定监听事件 | ||
| 9 | v-bind |
any Object |
动态绑定一个或多个attribute | attrorprop | |
| 10 | v-mode |
根据输入元素或者组件输出的值变化 |
表单输入元素或组件上创建双向绑定 |
只可以绑定下面四个元素 input select textarea components |
|
| # | 11 |
v-slot |
插槽名 |
只用于 template components |
| 12 | v-pre | - | 跳过该元素和所有子元素的编译 | ||
| 13 | v-once | - | 仅仅渲染一次，跳过之后的更新 | ||
| 14 | v-memo | any[ ] | |||
| 15 | v-clock | - | 隐藏为完成编译的DOM模板 |
