VUE3.0
2020-12-30 11:37:44 0 举报AI智能生成
VUE3.0 新鲜出炉整理的学习脑图
作者其他创作
大纲/内容
VUE3.0
概念
VUE基础
安装
介绍
APP 实例
模板语法
计算属性(computed)和 Watchers
CSS样式绑定
v-bind:class
v-bind:stytle
条件渲染(Conditional Rendering)
v-if
v-else
在 <template> 上使用 v-if 可包裹 多个元素
v-else-if
v-show
不支持 <template>
v-if 与 v-for 一起使用
列表渲染(List Rendering)
v-for 基于 数组 来渲染一个列表
item in itmes 语法
items 数据源数组
item 被迭代的数组元素的别名
v-for 块中 能访问到 所有父作用域的属性
也可以用 of 代替 in
"value in myObject" 语法
维护状态
vue 通过"就地更新"的策略 来渲染v-for渲染的列表
使用 字符串或数组类型 作为key
:key="item.id"
数组更新检查
Mutation Methods
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
Replaceing an Array
filter()
concat()
slice()
通常创建一个计算属性来返回 过滤/排序 后的结果
"n in evenNumbers" 语法
在嵌套的 v-for循环张 可以时方法
"n in even(numbers)" 语法
v-for 里接受值的范围
"n in 10" 语法
在 组件中 使用 v-for
类似于 普通元素一样使用 v-for
传递数据使用 prop
事件处理(Event Handing)
事件监听
v-on:click="methodName"
@click="methodName"
事件处理
方法名
接受一个参数 event
event 为 原生 DOM 事件
内联 JavaScript 语句中调用方法
通过 $event 访问原始DOM事件
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符
表单输入绑定(From Input Binding)
v-model介绍
text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event
select fields use value as a prop and change as an event
基本使用
Text
Multiline text
CheckBox
Radio
Select
Single Select <建议默认提供一个具体由空值的禁用选项>
Multiple Select (bound to Array)
Value Bindings
Chcekbox
Redio
Select Options
修饰符(Modifiers)
.lazy
.number
输入类型自动转换为数字型
.trim
在组件中使用 v-model
组件基础(Component Basic)
Reusing Components
Organizing Components
通常一个APP可以看成一个嵌套的组件树
组件注册
global
可用在根实例下的所有模板内部使用
local
Props <传递数据至子组件>
可以 v-bind 绑定动态数据至props属性
监听子组件事件
通过事件发送一个值
父组件接收
通过$event 访问事件发送的值
<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>
如果事件处理程序是一个方法
html
<blog-post ... @enlarge-text="onEnlargeText"></blog-post>
js
methods: { onEnlargeText(enlargeAmount) { this.postFontSize += enlargeAmount }}
通过插槽分发内容给子组件 (content Distrbution with Slots)
组件模板中通过 <slot>元素接收分发的内容
<slot> 放在任何需要渲染的位置即可
动态组件(Dynamic Components)
<component :is="currentTabComponent"></component>
组件注册名
组件选项对象
.prop 修饰符 绑定 属性值
DOM 模板解析注意事项
组件进阶(Component InDepth)
组件注册<Registration>
组件名
Kebab-case <短横线分割>
PascalCase<首字母大写>
全局注册
局部注册
使用 components 选项 注册
属性名 就时自定义元素的名称
属性值 就时这个组件的选项对象
先声明组件A
const ComponentA = { /* ... */}
在组件B中调用A
const ComponentB = { components: { 'component-a': ComponentA } // ...}
在ES2015+
import ComponentA from './ComponentA.vue'export default { components: { ComponentA } // ...}
ComponentA 的变量名其实是 ComponentA：ComponentA 的缩写
变量名 同时是:
1.在模板中的自定义元素名称
2.组件选项的变量名
模块系统
创建components文件夹
每个组件放着当都的文件夹中
利用 模块 import 模块导入各组件
Props
Props Types <Prop类型>
props:[] 字符串数组
传递静态或动态Props<Passing Static or Dynamic Props>
静态 直接传输字符串
Passing
Passing a Number
Passing a Boolean
Passing an Array
Passing an Object
Passing the Properties of an Object
单向数据流 <One-Way Data Flow>
Prop验证 <Prop Validation>
Type 检查
String
Number
Boolean
Array
Object
Data
Function
Symbol
Prop 大小写检查
camelCase
kebab-case
No-Prop Attributes
单 根节点 Attributes 继承
属性
事件
禁用 Attribute 继承
多 根节点 Attributes继承
多个根节点的组件不具有自动 attribute 回退行为
需要显式绑定 v-bind="$attrs"
自定义事件
事件名称
v-on 事件监听器在 DOM 模板中会被自动转换为全小写 ((因为 HTML 是大小写不敏感的))
推荐你始终使用 kebab-case 的事件名
定义自定义事件
验证 Emitted Events
添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效
自定义 v-model 参数
即 修改 v-mode 默认的绑定属性modelValue 为自定义值即可
多个 v-model 绑定
处理 v-model 修饰符
内置修饰符
自定义修饰符 通过 modelModifers prop提供给组件
modelModifers 为默认的空对象
带参数的v-model 绑定
prop 名称为 arg + "Modifiers"
Slots 插槽
Slot Content
使用<slot>元素作为承载分发内容的出口
插槽内容可以是
字符串
模板代码
其他组件
Render Scope
父模板里所有内容都是在父级作用域中编译
子模板里所有内容都是在子作用域中编译
Fallback Content
<slot>Submit</slot>
Named Slots <针对多插槽>
<header> <slot name="header"></slot> </header>
<template v-slot:header> <h1>Here might be a page title</h1> </template>
Scope slot
<todo-list> <template v-slot:default="slotProps"> <i class="fas fa-check"></i> <span class="green">{{ slotProps.item }}<span> </template></todo-list>
只有默认插槽时的语法
<todo-list v-slot="slotProps"> <i class="fas fa-check"></i> <span class="green">{{ slotProps.item }}<span></todo-list>
解析 Slot Props
作用域插槽的内部工作原理是将你的插槽内容包裹在一个传入单个参数的函数
v-slot 值可以时任何能够函数定义中参数的javascript 表达式
利用ES2015 解构具体 插槽Prop
解构
<todo-list v-slot="{ item }"> <i class="fas fa-check"></i> <span class="green">{{ item }}<span></todo-list>
重命名
<todo-list v-slot="{ item: todo }"> <i class="fas fa-check"></i> <span class="green">{{ todo }}<span></todo-list>
定义备用内容
<todo-list v-slot="{ item = 'Placeholder' }"> <i class="fas fa-check"></i> <span class="green">{{ item }}<span></todo-list>
Dynamic Slot Names
<base-layout> <template v-slot:[dynamicSlotName]> ... </template></base-layout>
具名插槽缩写
v-slot: ( # )
缩写只在其有参数的时候才可用
Provide/inject
传值
直接字符串属性值
提供组件实例属性
与响应式一起工作<通过 composition api >
对具有多层嵌套的组件中传值利用原先的props 有点力不从新. 因此 vue 引入 Provider / Inject
Provide : 父组件为所有 子组件提供数据
父组件不需要知道哪些子组件使用 Provide 中提供的值
Inject : 子组件使用这个数据.
子组件不需要知道 inject 属性里的值 来之哪里
Dynamic&Async Componets
keep-alive
Async comonets
defineAsyncComponent
suspens 挂起的
Template refs
ref 属性
<base-input ref="usernameInput"></base-input>this.$refs.usernameInput.focusInput()
$refs 仅在组件渲染后填充. 避免在模板和计算属性中访问$refs
处理边界问题
强制更新
v-onec
Transition & Animation
Reusability & Composition
Mixins
basic
示例
选项合并
数据对象合并 : 并在发生冲突时以组件数据优先
全局 Mixin
为自定义选项注入一个处理器
自定义选项合并策略<strategy>
Custom Directives
全局注册指令
局部注册指令
directives: { focus: { // 指令的定义 mounted(el) { el.focus() } }}
如: <input v-focus />
自定义指令 在Hook Functions<钩子函数>中被调用
beforeMount
可用作一次性的初始化设置
mounted
在挂载 绑定元素的父组件时调用
beforeUpdate
在更新包含组件的 VNODE 之前调用
updated
在包含组件的VNODE级子组件的VNODE 更新后调用
beforeUnmont
在卸载绑定元素的父组件时调用
unmounted
钩子函数的参数
动态指令参数
v-mydirective:[argument]="value"
binding.arg 可获取到 动态指令参数
binding.value 可获取到 动态指令值
指令值 可绑定到表单元素上 动态 获取
指令函数接受所有合法的js表达式
在组件中使用
Teleport
允许控制在DOM中哪个父节点下呈现HTML
包裹在 内置的组件 <teleport> </teleport> 标签内
与组件一起使用
多个<Teleport> 组件可以将其内容 挂载到同一个元素
Render Functions
render() 渲染函数
Html模板
<h1>{{ blogTitle }}</h1>
DOM树
Virtual DOM Tree 即 所有VNODE 组成的树
Vue.h()
createNodeDescription 告诉VUE 页面上需要渲染什么样的节点及子节点的描述信息 即虚拟节点 (Vnode)
tag
[ props 与 attribute、prop 和事件相对应的对象 ]
[ vnode ] 子节点
{String | Array | Object} children
使用字符串获取 "文本 Vnode"
有 slot 的对象
使用 JS 代替模板功能
v-for v-if
v-model
v-on
slots
JSX
Plugings
由 Vue 的 createApp生成的app 对象
由 用户传入的选项
Reactivity
Reactivity In Depth
What is Reactivity
Detect when there’s a change in one of the values
Track the function that changes it
Trigger the function so it can update the final value
vue 如何追踪其变化
vue3 也保留了Object.defineProperty 来支持IE
Proxy 是一个包含另一个对象或函数并允许对其拦截的对象
跟踪更改它的函数 在Proxy中的getter中执行此操作称为 effect
把对象包装在Proxy里同时可以对其拦截.这种拦截被称为 陷阱 trap
Reflect.get(...argument) 返回被代理的对象
Watchers
每个组件实例都有一个相应的 watcher 实例来记录组件渲染时的所有的属性记录设置为依赖项
Reactivity Fundamentals
返回一个响应式的对象
响应式状态解构
使用 readonly 防止 响应式对象被更改
基于原始对象创建一个只读的proxy对象 . readony()
Computed and Watch
get
set
watchEffect()
const stop = watchEffect(() => { /* ... */})// laterstop()
Effect
Side Effect Invalidation < OnInvalidate >
the effect is about to re-run
the watcher is stop
Effect Flush Timing
这样可避免 在同一个 "tick" 中多个状态改变导致不必要的重复调用
组件的updtae() 函数 也是一个 watcher effect
之所以是通过传入一个函数去注册失效回调，而不是从回调返回它，是因为返回值对于异步错误处理很重要
watcher Debugging 接收一个包含所有依赖信息的调试器事件
onTrack
will be called when a reactive property or ref is tracked as a dependency
onTrigger
will be called when the watcher callback is triggered by the mutation of a dependency
watch()
完全等同于组件的 watch 属性
requires watching a specific data source < 特点数据源>and applies side effects in a separate callback function <处理回调函数>
watching a single source
A watcher data source
a getter function that returns a value
directly a ref
Watching Multiple Sources
使用数组 同时监控多个数据源
与 watchEffect() 共享
side effect invalidation
做为第三个参数传入
flush timing
debugging.
响应式步骤
3. 每个属性都被视为一个依赖项
5. 组件即是每个属性的订阅者
Compostion API
Introduction
setup() 是一个函数
props 参数
context 参数
setup 返回的所有内容都将暴给组件的其他部分(计算属性 方法 生命周期函数 及组件的模板)可使用.
Reactive Variables with ref
import { ref } from 'vue'const counter = ref(0)
ref 函数 创建响应式变量.
ref 函数 返回包含一个唯一 的 value 属性的对象
{ value: 0 }
在对象中包装值似乎不必要，但在 JavaScript 中保持不同数据类型的行为统一是必需的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值传递的，而不是通过引用传递的
使用 该value属性可返问或更改响应式变量的值
// 0
setup 内部注册生命周期钩子
Reacting to Changes with watch
watch() 函数 接收3个参数
A Reactive Reference or getter function that we want to watch
A callBack
Optional configuration options
toRefs()
Standalone computed properties
computed () 返回一个只读的 响应式引用
standalone composition function
Setup
参数
props
context <js 对象暴露组件的三个属性> 可直接通过ES6解构
共性
1.有状态的对象
2.总会随组件本身的更新而更新
3.以 attrs.x 或 slots.x 的方式引用 property
4.是非响应式的
attrs
emit
Accessing Component Properties
Usage With Templates
Usage With Render Functions
样例
Usage of this
Lifecycle Hooks
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写
beforeCreate
不需要
created
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
beforeUnmount
onBeforeUnmount
unmount
onUnmount
errorCaptured
onErrorCptured
renderTracked
onRenderTracked
renderTriggered
onRenderTriggered
Provide / Inject
两者只能在当前活动的实例的setup()中调用
Using Provide
1.先在 vue 中导入 provide方法 来定义每个属性
import { provide } from 'vue'
2.provide() 接受两个参数
Using Inject
1.先在 vue 中导入 inject方法
2.inject() 接受两个参数
要注入的属性名称
一个默认值 (此参数 可选)
使用 ref() 或 reactive() 来增加 provide 和 inject 值之间的响应性
有时需要在注入数据的组件内部需要更新注入的数据 . 则 在建议提供一个方法来负责改变响应式的属性
Template Refs
如果 VNode 的 ref 键对应于渲染上下文中的 ref，则 VNode 的相应元素或组件实例将被分配给该 ref 的值
模板引用只会在初始渲染之后获得赋值
模板中使用ref 与其他 ref 一样是响应式的. 可以传递到(或从中返回)复合函数
JSX 的用法
v-for 的用法
API
Application API
1.config 包含应用配置的对象
errorHandler
warnHandler
为 Vue 的运行时警告指定一个自定义处理函数。注意这只会在开发环境下生效，在生产环境下它会被忽略。
globalProperties
在应用程序内的任何组件实例中可访问的全局属性
属性名冲突时，组件的 property 将具有优先权
const app = Vue.createApp({})app.config.globalProperties.$http = () => {}
isCustomElement
optionMergeStrategies
performance
2.component
1. {string} name
2. {Function | Object} definition (optional)
用法
注册或检索全局组件。注册还会使用给定的 name 参数自动设置组件的 name
3.directive
1.{string} name
2.{Function | Object} definition (optional)
Register or retrieve a global directive
钩子函数参数
el
指令绑定到的元素.这可用于直接操作DOM
binding 包含以下属性的对象
instance
使用指令的组件实例
value
传递给指令的值
oldValue
先前的值.仅在 beforeUpdate 和 updated 函数中可用
arg
传递给指令的参数
v-my-directive:foo 中，arg 为 "foo"
modifiers
包含修饰符 (如果有) 的对象
例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}
dir
一个对象，在注册指令时作为参数传递
vnode
作为 el 参数收到的真实 DOM 元素的蓝图
prevNode
上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用
4.mixin
{Object} mixin
5.mount
6.provide
{string | Symbol} key
7. unmount
8. use
{Object | Function} plugin
...options (optional)
Global API
createApp
第一个参数 : 接收一个根组件选项对象
h
返回一个虚拟节点
defineComponent
resloveComponent
resloveDynmaicComponent
resolveDirective
withDirectives
createRenderer
nextTick
将回调推迟到下一个 DOM 更新周期之后执行
只能在 render 或 setup 函数中使用
Options
1.data (Function)
2.props (Array<string> | Object)
props 可以是数组或对象，用于接收来自父组件的数据
type
default
required
validator
4.methods { [key: string]: Function }
5.emits Array<string> | Object
DOM
6.template (string)
一个字符串模板被用来标识组件实例
7.render (Function)
8.Lifecycle Hooks
生命周期钩子函数自动绑定到this 上下文实例中.
Assets
9.directives
包含组件实例可用指令的哈希表
10.components
包含组件实例可用组件的哈希表
Composition
11.mixins ( Array<Object> )
12.extends ( Object | Function )
允许声明扩展另一个组件
13.provide / inject
provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
14.setup Composition API的入口
参数
第一个参数 props
可通过 watchEffect 和 watch 侦听
第二个参数 context
Misc (杂项)
15.name
16.delimters
17.inheritAttrs
Instance Properties
$data
$props
$el
$options
$parent
$root
$slots
$refs
$attrs
Instance Methods
$watch
$emit
$forceUpdate
$nextTick
0 条评论
回复 删除
下一页
