循序渐进Vue.js 3前端开发实战
2022-12-06 12:13:45 3 举报AI智能生成
登录查看完整内容
《循序渐进Vue.js 3前端开发实战》笔记
作者其他创作
大纲/内容
方式1：使用transition属性指定过渡动画
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
方式2：使用逐条属性对动画效果进行设置
transition简单过渡动画
或则只定义起始状态@keyframes animation1 { from {样式详情} to {样式详情}}
@keyframes animation1 { 0% {样式详情} 50% {样式详情} 100% {样式详情}}
定义关键帧
.clazzName { 其他样式 animation: animation1 4s linear;}
通过animation属性使用关键帧
animation-name、duration、timing-function、direction、iteraction-count、play-state、delay、fill-mode
使用逐条属性对动画效果进行设置
使用
keyframes关键帧动画
CSS3原生动画
定时器更新组件状态
使用JS方式实现动画
Vue使用transition内置组件，包装展示过渡动画的组件
active中的动画行为可使用transition或animation方式
定义6组CSS属性样式，其中x为组件transition的name值x-enter-from：即将插入页面x-enter-active：插入过程整个过渡动画都会添加x-enter-to：组件被插入页面后x-leave-from：移除前的初始状态x-leave-active：移除过程整个过渡动画都会添加x-leave-to：移除后的结束状态
动画的定义
<transition name=\"ani\">需要做动画的组件</transtion>
包装的组件在插入或移除的时，自动寻找动画名称开头的CSS类
组件的包装
定义过渡动画
before-enter、enter、after-enter、enter-cancelledbefore-leave、leave、after-leave、leave-cancelled
transition组件的监听回调函数
在组件的methods方法中定义回调方法的实现
<transtion name=\"ani\" @enter=\"funcEnter\">包装的组件</transition>
使用实例
动画过程中的监听回调
默认transition内部组件的插入和移除同步进行
<transition name=\"ani\" mode=\"in-out\">包装的组件</transition>
先执行移除再插入：transition组件的mode属性设置为out-in
多个组件的过渡动画
<transition-group name=\"ani\"> <div v-for=\"item in list\">元素组件</div></transition-group>
使用transition-group内置组件包装v-for组件实现对列表元素变动的动画
要求：列表中每一个元素有唯一的key值
ani-move特殊动画类：实现对排序过程动画进行定义
区别组件过渡动画
列表的过渡动画
Vue过渡动画
八、动画
安装Vue CLI：npm install -g @vue/cli
升级Vue CLI：npm update -g @vue/cli
安装nodejs
安装
vue create hello-world
使用命令创建
vue ui
使用图形界面交互创建
快速创建项目
Vue CLI入门
.gitignore：git版本忽略文件babel.config.js：Babel工具的配置文件，Babel一个JavaScript编译器package.json：存储JSON对象，配置当前项目名称、版本号、脚本命令以及模块依赖等yarn.lock：记录YARN报管理器安装的依赖版本信息，无需关心
文件
node_modules：存放npm安装的依赖模块public：共有的资源文件，图标、HTML文件等src：核心功能代码，asserts存放资源文件，components存放组件文件
文件夹
template模板部分、script脚本代码、style样式代码
vue文件结构
模板工程结构
指定运行端口：npm run serve -- --port 9000
npm run dev
命令方式
交互界面方式
允许Vue项目工程
Vue CLI项目模板工程
会自动更新package.json并保存依赖到node_modules文件夹下
npm install --save axios vue-axios
依赖-安装依赖
在项目中使用依赖
npm run build
任务-build
构建结果：dist文件夹，包含压缩后的入口文件index.html、静态资源、CSS、JavaScript等文件
工程构建
不基于webpack，轻量，功能仅构建和开发服务器
对比Vue CLI
npm init @vitejs/app
使用Vite创建Vue项目
体验Vite
新一代构建工具Vite
九、构建工具Vue CLI
element-plus/lib/theme-chalk/index.css
引入样式
element-plus/lib/index.full.js
引入组件库
Vue.createApp({}).use(ElementPlus)
Vue挂载Element
属性：type、disable等
el-button
按钮组件
属性：type、closeable、click、close
el-tag
属性：checked
el-check-tag
标签组件
属性：image等插槽：image、description
el-empty
属性：animated、count、rows、throttle等
el-skeleton-item
el-skeleton
空态图与加载占位图
属性：fit、src、load、error、lazy
el-image
属性：src
el-avatar
图片与头像
入门
属性：v-model、disable、change
el-radio-group
属性：label
el-radio
el-radio-button
单选框
属性：min、max、v-model
el-checkbox-group
el-checkbox
复选框
属性：type、change等插槽：prefix、suffix、prepend、append
el-input
标准输入框
属性：disabled、placement、fetech-suggestions、select、change插槽：prefix、suffix、prepend、append
el-autocomplete
带推荐列表的输入框
属性：min、max、precision、change、blur、focus
el-input-number
数字输入框
属性：multiple、disabled、clearable、remote-method、change、remote-tag、clear、focus
el-select
el-option-group
el-option
选择列表
属性：options、props
el-cascader
多级列表组件
表单类
属性：loading、before-change、change
el-switch
开关组件
属性：min、max、step、change、input
el-slider
滑块组件
开关与滑块
属性：is-ranage、default-value、format、change、blur、focus
el-time-picker
时间选择器
属性：type、format、validate-event、change、blur、focus
type为datetime时同时选择日期和时间
el-date-picker
日期选择器
属性：show-alpha、color-format、predefine
el-color-picker
颜色选择器
选择器
属性：type、description、effect、close
el-alert
警告
属性：message、type、duration、showClose、center、onClose
$message方法：直接使用this调用发起消息提示
$msgbox方法：用户进行交互
Element-Plus注册的全局方法
消息提示
参数：title、type、duration、position、showClose、onClose、onClick、offset
全局方法$notify
通知
提示类
属性：data
el-table
属性：prop、label、sortable
el-table-column
表格
属性：mode、select、open
el-menu
属性：index、show-timeout
el-submenu
属性：index、route
el-menu-item
导航菜单
属性：editable、closeable、addable、before-leave、tab-click
el-tabs
属性：label、name、lazy插槽：label
el-tab-pane
标签页
属性：direction
el-drawer
抽屉
el-container
内部组件：el-header、el-aside、el-main、el-footer
布局容器
数据承载相关组件
十、基于Vue3的UI组件库 - Element Plus
import VueAxios from 'vue-axios'
导入
其中api需要进行encodeURI编码
this.axios.get(api).then((response)=>{请求结果处理})
this.axios.get(\"/myApi\"+\"目标网站的路径\").then((response)=>{})
proxy: { 'myApi': { target: '目标网站' changeOrigin: true pathRewrite: {'^/myApi':''} } }
vue.config.js配置解决跨域问题
快捷方法
this.axios({method:\"get\
通用方法
instance.get(api).then((response)=>{请求结果处理})
const instance = this.axios.create({ baseURL: \"/myApi\
axios默认配置 < defaults属性配置 < 请求时的config参数配置
请求配置冲突合并
复用axios请求实例
通过配置方式请求数据
url、method、baseURL、data、headers等
配置数据结构
data、status、headers、config、request
响应数据结构
请求的配置和响应数据结构
拦截请求发起前和完成后
this.axios.interceptors.request.use( (config)=>{font color=\"#0b033f\
拦截请求开始
this.axios.interceptors.response.use( (response)=>{拦截请求完成return font color=\"#0b033f\
拦截请求完成
全局拦截
this.axios.interceptors.request.eject(requestInterceptor)
全局移除拦截器
this.axios({ method:\"get\
略
特定请求拦截
拦截器
使用功能
十一、基于Vue的网络框架-vue-axios的应用
npm install vue-router@4 -s
<router-link to=\"/demo1\">页面1</router-lijnk>
路由跳转链接
<router-view></router-view>
路由页面出口
创建路由
Vue.createApp({}).use(router)
注册路由
{{ $route.params.username }}
组件内部使用$route属性获取全局的路由对象路由对象的params属性可以获取定义的参数
参数获取
[{path:\"/user/:username/:id\
在路由定义时通过路径变量定义参数使用冒号标记参数
参数定义
/user/小王/8888
路由跳转时的路由链接指定参数
参数传递
通过使用导航守卫处理相同组件路由的切换
注：相同组件只会执行一次生命周期提升组件重用性
路由参数匹配
其中id参数的路由只匹配数字，其他参数则匹配username
/user/:username/user/:id(\\\\d+)
参数指定正则
cat为数组[\"一级\
/category/一级/二级/三级
/category/:cat*
参数匹配数组
其中可不传递username参数
/user/:username?
参数可选
路由匹配语法规则
父组件预留路由出口
children的实际路径由父组件和自身path拼接/user/小王/friends/6
不限嵌套层数
Friends组件显示在父组件的router-view组件内
[{ path: \"/user/:username?\
定义嵌套路由
嵌套路由
带参数的动态路由
使用$router对象的push方法向history栈添加一个新记录
this.$router.push({path:\"/user/小王\"})
this.$router.push(\"/user/小王\")
需要定义路由的时间对路由进行命名
this.$router.push({name:\"user\
传递路由查询参数
设置了path，params属性会被自动忽略
this.$router.push({path:\"/user\
几种push方法的参数传递方式
this.$router.push(****).then(()=>{跳转结果处理})
push方法返回Promise对象
使用路由方法
this.$router.push({path:\"/user/小王\
this.$router.replace({path:\"/user/小王\"})
路由替换
跳转到后一个记录：this.$router.go(1)
跳转到后三个记录：this.$router.go(3)
跳转到前一个记录：this.$router.go(-1)
路由跳转
导航历史控制
页面导航
push方法方式
<route-link :to=\
router-link方式
使用名称进行跳转
<router-view name=\"topBar\"></router-view>
在一个组件中包含多个router-view，用name区分
特殊的对于未命名的路由视图，使用default的组件填充
const routes = [{ path: \"/home/:username/:id\
定义路由时指定每个路由的填充组件
必须包含原path中的参数
font color=\"#0b033f\
使用别名
redirect: { name: \"OtherPage\"}
静态路由重定向
通过函数计算得到不同的路由
动态路由重定向
路由重定向
路由视图命名
路由的命名
通过$router.params组件与路由强绑定通用方式：使用外部属性接收路由的参数传递
外部属性id路由参数id
选项的props属性
组件的外部属性定义
props: true
路由参数会自动映射到外部属性
props是布尔类型
props: {id: \"000\"}
props的数据原样传递给组件的外部属性
props是对象
函数返回传递给外部属性的对象
props是函数
路由的props属性
路由传参
参数函数返回值为布尔值时决定是否能跳转
参数函数返回值为路由对象时跳转到指定路由
router的beforeEach方法注册全局的前置导航守卫
router的afterEach方法注册全局的后置导航守卫
全局导航守卫
路由定义时指定
通过next参数注册确认此次跳转的回调方法
beforeRouteEnter不能直接通过this获取当前组件当前组件未被创建beforeRouteUpdate、beforeRouteLeave能通过this获取当前组件实例
组件内部定义
特定路由导航守卫
路由导航守卫
let call = this.$router.addRoute({path:\"/demo\
添加重复名称的路由会覆盖原路由
call()
addRoute返回删除回调，可通过执行删除回调删除路由
动态添加路由
通过路由名称删除
this.$router.removeRoute(\"demo\")
动态删除路由
this.$router.hasRoute(\"demo\")
检查是否包含某路由
this.$router.getRoutes()
获取所有路由
其他路由的函数
动态添加与删除路由
动态路由
十二、路由管理
视图触发动作，动作改变状态，状态驱动视图
Vuex：多组件依赖同一状态；多组件变更一个状态
状态管理
npm install vuex@next --save
导入 import { createStore } from 'vuex'
const store = createStore({ state(){count:0} mutations:{ increament(state){ state.count++ } }})
创建仓库
instance.use(store)
注册
this.$store.state.count
访问状态
this.$store.commit('increment')
变更状态
Vuex的store存储的状态是响应式的
store中的状态改变的唯一方法时提交mutation操作
介绍
认识Vuex框架
访问方式：this.$store.state
import {mapState} from 'vuex'{{ mapState(['count']) }}
computed: mapState({ countDate: 'count'})
通过字符串映射
computed: mapState({ countDate2(state){ return state.count }})
通过函数映射
映射访问
通过mapState简化访问
状态state
mapState：定义在业务逻辑处，将状态映射为计算属性
createStore({ state(){return****} mutations:{****} getters: { countText(state){ return (s) =>{return state.count + s}} }})
this.$store.getters.countText(\"次\")
调用
import {mapGetters} from 'vux'
映射为组件内计算属性computed: mapGetters(['countText'])
使用 countText('次')
通过mapGetters简化访问
getters：定义再store中，全局通用的计算属性
Getter方法
this.$store.commit('increament')
mutations:{ increament(state){ state.count++ } }
无参的mutation
mutations:{font color=\"#0b033f\
带参数的mutation
带对象参数的mutation
Mutation
Action通过包装执行mutation实现异步修改状态
通过提交mutation修改状态是同步的操作
context为与store实例有相同的方法和属性的上下文对象
payload为用户参数
传递action及其参数
Action
const module2 = { state(){count:0} mutations:{ increament2(state){ state.count++ } }}
const module1 = { state(){count:0} mutations:{ increament1(state){ state.count++ } }}
声明模块状态
创建多module的store
this.$store.Module1.count
访问各module的数据
this.$store.commit('increament1')
const module1 = { namespace: true state(){count:0} mutations:{ increament1(state){ state.count++ } }}
this.$store.commit{'Module1/increment1'}
必须加命令空间才能修改状态
通过命名空间隔离mutation
动态注册module
Module
Vuex的核心概念
十三、Vue状态管理
pinia是vue3官方提供的状态管理库
npm install pinia
const pinia = createPinia()instance.use(pinia)
import { defineStore } from 'pinia'
方式1：使用Option对象定义
方式2：使用setup函数定义
定义store
setup() { const store = useCounterStore() return { store }}
// ✓名为 increment 的 action 可以直接提取 const { increment } = store
storeToRefs()为响应式属性创建引用
解决解构导致失去响应式
创建store实例
定义为一个返回初始状态的函数
const store = useStore()store.count++
通过Store实例访问
通过Store实例访问State：可读写
store.$reset()
使用Store的$reset方法重置为初始值
重置State
import { mapState } from 'pinia'
通过字符串定义，注册名称为访问属性名称
通过函数定义映射，指定注册名称
state只读映射
通过字符串定义，注册名称为访问属性名
指定注册名称
可修改的state
通过mapState访问：仅可读
store.count++
直接访问单个属性
使用$path函数一次变更多个属性
store.$patch{(state) => { state.people.name = '张三' state.hasChanged = true}}
使用$patch函数变更属性内部数据手动触发数据更新
变更State
❌store.$store = {count:24}// 破坏响应性
不能进行的操作
store.$patch({count:24})
使用$patch函数完整替换state
pinia.state.value = {}
通过pinia实例的state设置整个应用的初始state
替换state
mutation为变更事件相关，state为变更前的状态
订阅store的数据变更
完整监听pinia实例的state
订阅state
State
getters: { doubleCount: (state) => state.count * 2}
返回值
gettres: { getUserById: (state)=>{ return (userId) => f(userId) }}
setup(){return { getUserById: useStore().getUserById }}
<template><p> {{ getUserById(2) }}</p></template>
使用getter并传递参数
返回函数
Getter
异步执行、相当于组件中的method
action绑定的组件卸载时会自动删除所有action订阅器通过设置第二个参数为true分离组件和订阅器
unsubscribe() //手动删除监听器
订阅action
https://pinia.vuejs.org/zh/core-concepts/plugins.html
插件
SSR
其他高级应用
拓展阅读：Vue3的状态管理Pinia
HTML基础
通用选择器*、标签选择器、类选择器、id选择器
背景、样式、边框与边距
CSS样式入门
CSS基础
变量：var、let；常量：const
表达式：数据类型、运算符
函数定义
条件分支：if-else、switch、while
语法
JS基础
data()、methods()
Vue.createApp().mount(\"#id\")
新特性：性能、typescript支持
对比AngularJs：入门简单、灵活性强、轻量、API简单
Vue基础
一、前端基础到Vue.js
{{ count }}、{{ count + 10 }}
{{ 值表达式 }}
<h1 v-once>{{ count }}</h1>
仅插值一次：v-once
<span v-html=\"htmlVar\"></span>
HTML插值：v-html
<h1 v-bind:id=\"id1\">内容</h1>
属性插值：v-bind
模板插值
模板指令也是HTML标签属性：通常以前缀v-开头
v-bind:style、v-on:click
v-指令[.修饰符][:参数]
v-bind:[prop]=\"classVar\"
参数动态化
v-model.trim=\"content\"
参数修饰符
v-bind:id=id简化:id=\"id\"
v-on:click=\"btnClick\"简化@click=\"btnClick\"
常用指令的简化
指令及指令参数
模板指令
模板基础
<h1 v-if=\"show\">标题</h1>
v-if=\"条件表达式\"
v-if指令条件渲染
<h1 v-if=\"show\">标题</h1><h1 v-else>标题2</h1>
必须紧跟v-if指令
v-else指令
<h1 v-if=\"score ==100\">满分</h1><h1 v-else-if=\"score > 60\">优秀</h1><h1 v-else>不及格</h1>
v-else-if=\"条件表达式\"
v-else-if指令
div包装的v-if、template一组的v-if
v-if
<h1 v-show=\"show\">标题</h1>
v-show=\"条件表达式\"
v-show指令条件渲染
懒加载、条件加载重组和销毁：切换性能消耗大
display:none：初始渲染性能消耗
v-show
v-if对比v-show
条件渲染
v-for=\"item in list\"
v-for=\"变量名 in 集合名\"
<ul> <li v-for=\
v-for=\
指定主键
v-for循环渲染指令
v-for对列表进行循环渲染-》对数据对象的绑定
v-for=\"item in handle(list)\"
通过列表数据进行处理后循环渲染
v-for高级用法
v-for
循环渲染
二、模板应用
通过组件实例获取：instance.count
通过$data获取：instance.$data.count
属性：data函数
自动绑定方法到组件实例本身，可使用this关键字访问属性
方法：methods选项
属性和方法
computed: { type() { return this.count > 80 ? \"合格\" : \"不合格\" }}
console.log(instance.type)
computed: { type{ get(){ return **** } }}
读取：指定get方法
instance.type=****
computed: { type{ set(newValue){ this.****= } }}
写入：指定set方法
访问
计算属性：computed选项
计算属性：缓存计算结果，依赖属性没变化不会重新执行
函数：每次访问都会重新执行函数的逻辑
计算属性还是函数
监听属性的变化：通过watch选项
属性侦听器
计算属性和侦听器
限流：限制操作，常见的方案时根据事件间隔进行限流，即在指定事件间隔内不允许重复执行同一函数
通过setTimeout函数延迟设置信号量
手动实现限流函数
lodash.min.js
引用
使用Lodash库进行限流
外框
函数限流
<input v-modle=\"变量名\"/>
文本框
<textarea v-model=\"变量名\"></textarea>
<textarea v-model=\"变量名\">{{ text}}</textarea>
不能直接插入文本
多行文本框
<input type=\"checkbox\" v -model=\"checkbox\"/>
<input type=\"radio\" value=\"男\" v -model=\"sex\"/>
复选框与单选框
<select v-model=\"select\"> <option>选项1</option> ****</select>
单选选择列表
<select v-model=\"select\" multiple> <option>选项1</option> ****</select>
多选选择列表
不实时同步属性的值
v-model.lazy=\"text\"
lazy
将绑定的文本数据的首尾空格去掉
v-model.trim=\"text\"
trim
绑定指令修饰符
表单数据双向绑定
可行方案：通过class属性、id属性或直接使用标签名进行CSS样式绑定
<div :class=\
:class=\
内联方式绑定
<div :class=\"style\
:class=\"变量名\"
组件数据对象方式绑定
数组对象绑定
class属性绑定
<div :style=\
通过style属性设置，样式采用驼峰
绑定内联样式
样式绑定
三、Vue组件的属性和方法
通常使用@click代替
v-on:click=\"方法或函数体\"
自动获取Event对象
事件监听示例
@click=\
多事件处理
事件捕获：从父组件向子组件传播
事件冒泡：从子组件向父组件传播
@click默认监听事件冒泡
事件捕获与事件冒泡
监听事件捕获阶段
@click.capture
阻止事件传递
@click.stop
只触发一次事件
@click.once
当事件对象的target属性是当前组件时才触发事件
@click.self
禁止默认的事件
@click.Prevent
不禁止默认的事件
@click.passive
事件修饰符
事件的监听与处理
click、dblclickfocus、blur、change、selectmousedown、mouseup、mousemove、mouseout、mouseoverkeydown、keyup
常用事件类型
@mousedown.alt.ctrl=\"mousedown\"
@keyup.enter=\"keyup\"
键盘按键修饰符：enter、page-down、ctrl、alt、shift、meta等
鼠标按键修饰符：left、right、middle
组合事件和修饰符实现特定功能
按键修饰符
事件类型
四、处理用户交互
创建的实例通过mount方法绑定到指定的HTML元素上
Vue.createApp(数据配置选项)
data：函数，提供应用所需的全局数据
props：用于接收父组件传递的数据
computed：配置组件的计算属性
不要使用箭头函数，会影响this关键字的使用
methods：配置组件使用的方法
可以直接引用methods中定义的函数
watch：对组件属性的变化添加监听函数
数据配置选项
const alertComponent = { data() {****} methods: {****} template: `<div><button @click=\"click\">按钮</button></div>`}
instance.component(\"my-alert\
instance.component(\"组件名\
使用component方法定义组件
每一个标签都是一个独立的组件实例，内部数据独立维护
<my-alert></my-alert>
使用组件
定义组件
Vue应用与组件
const alertComponent = { props: [\"title\
组件外部属性定义
<my-alert title=\"按钮\"></my-alert>
组件添加外部属性
template: `<div><button @click=\"$emit(myclick)\">按钮</button></div>`
方式1：组件内使用内建的$emit方法传递事件
方式2：组件内使用内建的$emit方法同时传递事件和数据
组件模板定义@click=\"click\
方式3：对事件进行包装
<my-aliert @myclick=\"clickfunc\" title=\"按钮\"></my-alert>
组件实例使用参数声明事件
处理组件事件
方式1：v-model指令
方式2：:value+@input绑定结合事件处理
通用组件数据双向绑定
<my-input v-model=\"inputText\"></my-input>
组件实例使用v-model指定参数
props: [\"modelValue\"]<input :value=\"modelValue\" @input=\"action\"/>
组件定义使用:value和@input组合实现数据绑定
自定义组件数据双向绑定
组件使用v-model
组件中的数据与事件的传递
插槽：HTML起始标签和结束标签中间的部分
template: `<div><slot></slot></div>`
使用slot标签来指定插槽的位置
<my-component>插槽位置显示</my-component>
使用插槽
基本用法
template: `<div><slot name=\"name1\"></slot><slot name=\"name2\"></slot></div>`
slot标签的name属性指定插槽名称
<my-component><template v-slot=\"name1\">插槽name1内容</template><template v-slot=\"name2\">插槽name2内容</template></my-component>
v-slot指令
<my-component><template #name1>插槽name1内容</template><template #name2>插槽name2内容</template></my-component>
使用符号#代替v-slot
使用具名插槽
具名插槽：给插槽定义名字
自定义插槽
自定义组件的插槽
<component :is=\"currentComponent\"></component>
使用component标签结合is属性动态渲染组件
动态组件
五、组件基础
beforeCreate：组件即将创建created：组件创建完成beforeMount：组件即将挂载前mounted：组件挂载完成beforeUpdate：组件即将更新前updated：组件更新完成activated：被缓存的组件激活时调用deactivated：被缓存的组件停用时调用beforeUnmount：组件即将被卸载前调用unmounted：组件被卸载后调用errorCaptured：捕获到来自子组件的异常时调用renderTracked：虚拟DOM重新渲染时调用renderTriggered：虚拟DOM被触发渲染时调用
生命周期方法
自定义异常和警告捕获
在内部data函数中定义
props外部属性
内部使用的属性
instance.config.globalProperties = {version: \"1.0\
全局属性
属性
应用的全局配置选项
instance.component(\"my-component\
全局注册
components: {\"my-component\
在组件的配置中使用components属性局部注册
局部注册
组件的注册方式
组件的生命周期
通用定义
类型约束
具体值方式指定：default：值
函数方式指定：default: func(){return 10;}
默认值约束
对如下内容添加约束进行配置1、类型2、默认值3、是否选填
对props属性进行验证
props属性只读性能是Vue单向数据流特性的一种体现
所有外部属性Props都只允许父组件的数据流动到子组件
解决只读属性：通过内部属性定义接收外部属性
props的只读属性
避免逐层传递
数据注入时一种便捷的组件间数据传递方式
provide(){return{listCount: this.count}}
父组件provide配置项提供数据
inject:['listCount']
子组件inject配置项获取数据
使用provide和inject配置项
provide配置项冲突的处理：子组件就近使用父组件提供的数据
组件数据注入
组件props属性高级用法
const myMixin = {props:['title']}
定义Mixin通用配置
在组件中使用通用配置
使用Mixin定义组件
属性冲突的合并：以内部定义为准
生命周期函数的合并：先触发Minxin的实现， 后触发内部定义的实现
Mixin选项的合并
instance.mixin({配置选项})
全局Mixin
组件Mixin技术
instance.directive(\"getfocus\
instance的directive方法可以注册全局的自定义指令
<input v-getfocus />
使用时在指令名称前加v-
使用自定义指令
mounted、beforeMount、beforeUpdate、updated、beforeUnmounted、unmounted
自定义指令的其他生命周期
通过param对象传递指令中的参数
传递对象<input v-getfocus:custum=\
<input v-getfocus:custum=\"1\" />
再指令后更参数和值
自定义指令参数
传统实现：拆分布局保证组件挂载在目标标签下
<teleport to=\"body\"> 需要挂载的内容</teleport>
在template中定义挂载的元素
通过teleport实现
由于树结构改变影响组件内元素的布局
组件的Teleport功能
六、组件进阶
Proxy对原对象进行包装：实现对对象属性设置及获取的监听
定义目标对象代理
读取和写入proxy.字段
使用代理对象进行数据读取与写入（同时指定handler对于读取和写入的逻辑）
手动跟踪变量变化
setup返回的是普通对象
let myData = Vue.reactive({value:0})
通过reactive方法对自定义对象进行包装添加响应式
setup方法：组件被创建前定义组件需要的数据和函数
data返回的会被包装为Proxy对象
Vue中的响应式对象
Proxy、reactive将对象进行响应式包装，独立的原始值采用ref方法进行包装
写入是使用：numberProxy.value写入
let myObject = Vue.reactive(object)let numberProxy = Vue.ref(0)
ref：对非对象进行响应式包装
解构后失去响应式特性
let {value} = myObject
JavaScript原始解构，但无响应式特性
let {value} = Vue.toRefs(myObject)
Vue提供的方式抽取数据，返回ref对象
toRefs：抽取对象的数据进行响应式包装
独立的响应式值Ref的应用
响应式编程原理及应用
组件中使用computed选项
let sum = Vue.computed({ set(value){设置的逻辑} get(){return 受其他变量影响的数值函数}})
定义
sum.value = 0;console.log(sum.value)
同名方法创建计算变量
计算变量
对方法中的所有响应式变量进行监听，有变更则触发方法调用
let a = Vue.ref(0)Vue.watchEffect(() =>{逻辑代码console.log(a.value)})
样例
生命周期：watchEffect在setup方法中被调用后，和组件生命周期绑定
watchEffect
watch可以获取变化前后的值可以同时监听多个值的变化
watch与watchEffect对比
响应式变量
响应式的计算与监听
能访问：props
不能使用this访问组件的其他属性
组合式API功能的入口，在组件创建之前执行（beforeCreate方法之前）
响应式的外部参数对象
props
JavaScript对象，含attrs、slots和emit
context
setup方法可接收的参数：props和context
对象包装的数据可以再组件的其他选项或HTML模板中使用
如果返回渲染函数：可替代template定义模板
setup方法可返回的对象
setup方法
在原生命周期前加on、去掉了beforeCreate和created
setup(){ Vue.onMounted(()=>{绑定时的代码逻辑})}
onBeforeMount、onMountedonBeforeUpdate、onUpdated、onBeforeUnmount、onUnmountedonErrorCaptured、onRenderTracked、onRenderTriggered
先调用setup再调用组件内部定义
组件的生命周期函数和setup生命周期方法冲突
方法中定义生命周期
组合式API的应用
七、Vue响应式编程
Vue.js 3
0 条评论
回复 删除
下一页
