开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情
Fragment标签虚拟元素
在vue3中,组件可以没有根标签,内容会将多个标签包含在一个Fragment标签中
123
Teleport(瞬间移动)
可以将标签里的内容放到html指定的标签下显示
Suspense 渲染异步组件,解决有空白
//异步组件
<template #default>
动态引入组件
vue2引入组件
const AsyncComp = () => import('./AsyncComp.vue');
vue3引入组件
const AsyncComp =() => defineAsyncComponent(
() => import('./AsyncComp.vue')
)
//静态引入
import AsyncComp form './AsyncComp'
手写shallowRef与ref
//定义一个shallowRef函数
function shallowRef (target) {
return {
//将target数据保存起来
_value: target,
get value() {
console.log('劫持到了读取的数据');
return this._value
},
set value (val) {
console.log('劫持到了修改数据,准备更新界面', val)
this._value = val
}
}
}
//定义一个ref函数
function ref(target) {
target = reactive(target)
return {
_is_ref: true, //标识当前的对象是ref对象
//保存target数据
_value: target,
get value() {
console.log('劫持到了读取的数据');
return this._value
},
set value (val) {
console.log('劫持到了修改数据,准备更新界面', val)
this._value = val
}
}
}
226.手写isRef isReactive isReadonly inProxy
//定义一个函数isRef,判断当前的对象是不是ref对象
function isRef(obj) {
return obj && obj.is_ref
}
//定义一个函数isReactive,判断当前的对象是不是reactive对象
function isReaction(obj) {
return obj && obj.is_reactive
}
//定义一个函数isReadonly,判断当前的对象是不是readonly对象
function isReadonly(obj) {
return obj && obj.is_readonly
}
//定义一个函数isProxy,判断当前的对象是不是reactive对象或者readonly对象
function isProxy (obj) {
return isReactive(obj) || isReadonly(obj)
}
composition api与option api比较
vue2中的option api,新增或修改一个需求,需要分别在data,methods, computed里修改,滚动条反复上下移动
compisition api可以组织代码,函数让相关功能的代码有序的组织在一起
VuePress搭建在线文档文档网站
1.npm install -D vuepress
2.新建一个docs文件夹 mkdir docs
3.新建一个文件: docs/README.md
4.启动文档项目 npx vuepress dev docs
5.构建惊天文件 npx vuepress build docs
package.json
"doc:dev": "vuepress dev docs",
"doc:build": "vuepress build docs",
"doc:deploy": "gh-pages -d docs/dist"
发布到gitpage
1.使用git管理当前项目
2.将打包的项目推送到gitpage
