7-vue-2
vue3.2 自定义全局指令、局部指令
// 在src目录下新建一个directive文件，在此文件夹下新建一个index.js文件夹，接着输入如下内容
const directives = (app) => {
//这里是给元素取得名字，虽然是focus，但是实际引用的时候必须以v开头
app.directive('focus',{
//这里的el就是获取的元素
mounted(el) {
el.focus()
}
})
}
//默认导出 directives
export default directives
// 在全局注册directive
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import directives from './directives'
const app = createApp(App)
directives(app)
app.use(store).use(router).mount('#app')
<template>
<div class="container">
<div class="content">
<input type="text" v-focus>
内容
div>
div>
template>
<script setup>
import {
reactive, ref } from 'vue'
// const vMove:Directive = () =>{
// }
script>
在
vue3.2 setup语法糖模式下，自定义指令变得及其简单
<input type="text" v-model="value" v-focus>
<script setup>
//直接写，但是必须是v开头
const vFocus = {
mounted(el) {
// 获取input，并调用其focus()方法
el.focus()
}
}
script>
<template>
<div class="container">
<div class="content" v-move="{ background: value }">
内容
<input type="text" v-model="value" v-focus @keyup="see">
div>
div>
template>
<script setup>
import {
reactive, ref } from 'vue'
const value = ref('')
const vFocus = {
mounted(el) {
// 获取input，并调用其focus()方法
el.focus()
}
}
let timer = null
const vMove = (el, binding) => {
if (timer !== null) {
clearTimeout(timer)
}
timer = setTimeout(() => {
el.style.background = binding.value.background
console.log(el);
}, 1000);
}
script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.content {
border-top: 5px solid black;
width: 200px;
height: 200px;
cursor: pointer;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
}
style>
----------@----------
Vue3的设计目标是什么？做了哪些优化
1、设计目标
不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下Vue3之前我们或许会面临的问题
- 随着功能的增长，复杂组件的代码变得越来越难以维护
- 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制
- 类型推断不够友好
bundle的时间太久了
而 Vue3 经过长达两三年时间的筹备，做了哪些事情？
我们从结果反推
- 更小
- 更快
- TypeScript支持
- API设计一致性
- 提高自身可维护性
- 开放更多底层功能
一句话概述，就是更小更快更友好了
更小
Vue3移除一些不常用的API- 引入
tree-shaking，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了
更快
主要体现在编译方面：
diff算法优化- 静态提升
- 事件监听缓存
SSR优化
更友好
vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力
这里代码简单演示下：
存在一个获取鼠标位置的函数
import {
toRefs, reactive } from 'vue';
function useMouse(){
const state = reactive({
x:0,y:0});
const update = e=>{
state.x = e.pageX;
state.y = e.pageY;
}
onMounted(()=>{
window.addEventListener('mousemove',update);
})
onUnmounted(()=>{
window.removeEventListener('mousemove',update);
})
return toRefs(state);
}
我们只需要调用这个函数，即可获取x、y的坐标，完全不用关注实现过程
试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率大大提高
同时，VUE3是基于typescipt编写的，可以享受到自动的类型定义提示
2、优化方案
vue3从很多层面都做了优化，可以分成三个方面：
- 源码
- 性能
- 语法 API
源码
源码可以从两个层面展开：
- 源码管理
- TypeScript
源码管理
vue3整个源码是通过 monorepo的方式维护的，根据功能将不同的模块拆分到packages目录下面不同的子目录中
这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性
另外一些 package（比如 reactivity 响应式库）是可以独立于 Vue 使用的，这样用户如果只想使用 Vue3的响应式能力，可以单独依赖这个响应式库而不用去依赖整个 Vue
TypeScript
Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导
性能
vue3是从什么哪些方面对性能进行进一步优化呢？
- 体积优化
- 编译优化
- 数据劫持优化
这里讲述数据劫持：
在vue2中，数据劫持是通过Object.defineProperty，这个 API 有一些缺陷，并不能检测对象属性的添加和删除
Object.defineProperty(data, 'a',{
get(){
// track
},
set(){
// trigger
}
})
尽管Vue为了解决这个问题提供了 set和delete实例方法，但是对于用户来说，还是增加了一定的心智负担
同时在面对嵌套层级比较深的情况下，就存在性能问题
default {
data: {
a: {
b: {
c: {
d: 1
}
}
}
}
}
相比之下，vue3是通过proxy监听整个对象，那么对于删除还是监听当然也能监听到
同时Proxy 并不能监听到内部深层次的对象变化，而 Vue3 的处理方式是在getter 中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归
语法 API
这里当然说的就是composition API，其两大显著的优化：
- 优化逻辑组织
- 优化逻辑复用
逻辑组织
一张图，我们可以很直观地感受到 Composition API在逻辑组织方面的优势
相同功能的代码编写在一块，而不像options API那样，各个功能的代码混成一块
逻辑复用
在vue2中，我们是通过mixin实现功能混合，如果多个mixin混合，会存在两个非常明显的问题：命名冲突和数据来源不清晰
而通过composition这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可
同样是上文的获取鼠标位置的例子
import {
toRefs, reactive, onUnmounted, onMounted } from 'vue';
function useMouse(){
const state = reactive({
x:0,y:0});
const update = e=>{
state.x = e.pageX;
state.y = e.pageY;
}
onMounted(()=>{
window.addEventListener('mousemove',update);
})
onUnmounted(()=>{
window.removeEventListener('mousemove',update);
})
return toRefs(state);
}
组件使用
import useMousePosition from './mouse'
export default {
setup() {
const {
x, y } = useMousePosition()
return {
x, y }
}
}
可以看到，整个数据来源清晰了，即使去编写更多的hook函数，也不会出现命名冲突的问题
----------@----------
Vue3有了解过吗？能说说跟vue2的区别吗？
1. 哪些变化
从上图中，我们可以概览Vue3的新特性，如下：
- 速度更快
- 体积减少
- 更易维护
- 更接近原生
- 更易使用
1.1 速度更快
vue3相比vue2
- 重写了虚拟
Dom实现 - 编译模板的优化
- 更高效的组件初始化
undate性能提高1.3~2倍SSR速度提高了2~3倍
1.2 体积更小
通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的
能够tree-shaking，有两大好处：
- 对开发人员，能够对
vue实现更多其他的功能，而不必担忧整体体积过大 - 对使用者，打包出来的包体积变小了
vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多
1.3 更易维护
compositon Api
- 可与现有的
Options API一起使用 - 灵活的逻辑组合与复用
Vue3模块可以和其他框架搭配使用
更好的Typescript支持
VUE3是基于typescipt编写的，可以享受到自动的类型定义提示
1.4 编译器重写
1.5 更接近原生
可以自定义渲染 API
1.6 更易使用
响应式 Api 暴露出来
轻松识别组件重新渲染原因
2. Vue3新增特性
Vue 3 中需要关注的一些新功能包括：
framentsTeleportcomposition ApicreateRenderer
2.1 framents
在 Vue3.x 中，组件现在支持有多个根节点
<!-- Layout.vue -->
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
2.2 Teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难
通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它
<button @click="showToast" class="btn">打开 toastbutton>
<teleport to="#teleport-target">
<div v-if="visible" class="toast-wrap">
<div class="toast-msg">我是一个 Toast 文案div>
div>
teleport>
2.3 createRenderer
通过createRenderer，我们能够构建自定义渲染器，我们能够将 vue 的开发模型扩展到其他平台
我们可以将其生成在canvas画布上
关于createRenderer，我们了解下基本使用，就不展开讲述了
import {
createRenderer } from '@vue/runtime-core'
const {
render, createApp } = createRenderer({
patchProp,
insert,
remove,
createElement,
// ...
})
export {
render, createApp }
export * from '@vue/runtime-core'
2.4 composition Api
composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理
关于compositon api的使用，这里以下图展开
简单使用:
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => console.log('component mounted!'))
return {
count,
double,
increment
}
}
}
3. 非兼容变更
3.1 Global API
- 全局
Vue API已更改为使用应用程序实例 - 全局和内部
API已经被重构为可tree-shakable
3.2 模板指令
- 组件上
v-model用法已更改 和 非v-for节点上key用法已更改- 在同一元素上使用的
v-if和v-for优先级已更改 v-bind="object"现在排序敏感v-for中的ref不再注册ref数组
3.3 组件
- 只能使用普通函数创建功能组件
functional属性在单文件组件(SFC)- 异步组件现在需要
defineAsyncComponent方法来创建
3.4 渲染函数
- 渲染函数
API改变 $scopedSlotsproperty 已删除，所有插槽都通过$slots作为函数暴露- 自定义指令 API 已更改为与组件生命周期一致
- 一些转换
class被重命名了：v-enter->v-enter-fromv-leave->v-leave-from
- 组件
watch选项和实例方法$watch不再支持点分隔字符串路径，请改用计算函数作为参数 - 在
Vue 2.x中，应用根容器的outerHTML将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x现在使用应用程序容器的innerHTML。
3.5 其他小改变
destroyed生命周期选项被重命名为unmountedbeforeDestroy生命周期选项被重命名为beforeUnmount[prop default工厂函数不再有权访问this是上下文- 自定义指令 API 已更改为与组件生命周期一致
data应始终声明为函数- 来自
mixin的data选项现在可简单地合并 attribute强制策略已更改- 一些过渡
class被重命名 - 组建 watch 选项和实例方法
$watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。 没有特殊指令的标记 (v-if/else-if/else、v-for或v-slot) 现在被视为普通元素，并将生成原生的元素，而不是渲染其内部内容。- 在
Vue 2.x中，应用根容器的outerHTML将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x现在使用应用容器的innerHTML，这意味着容器本身不再被视为模板的一部分。
3.6 移除 API
keyCode支持作为v-on的修饰符$on，$off和$once实例方法- 过滤
filter - 内联模板
attribute $destroy实例方法。用户不应再手动管理单个Vue组件的生命周期。
----------@----------
你知道哪些Vue3新特性?
官网列举的最值得注意的新特性：v3-migration.vuejs.org(opens new window)
Composition APISFC Composition API语法糖Teleport传送门Fragments片段Emits选项- 自定义渲染器
SFC CSS变量Suspense
以上这些是api相关，另外还有很多框架特性也不能落掉
回答范例
api层面Vue3新特性主要包括：Composition API、SFC Composition API语法糖、Teleport传送门、Fragments片段、Emits选项、自定义渲染器、SFC CSS变量、Suspense- 另外，
Vue3.0在框架层面也有很多亮眼的改进：
- 更快
- 虚拟
DOM重写，diff算法优化 - 编译器优化：静态提升、
patchFlags（静态标记）、事件监听缓存 - 基于
Proxy的响应式系统 SSR优化
- 虚拟
- 更小 ：更好的摇树优化
tree shaking、Vue3移除一些不常用的API - 更友好 ：
vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力 - 更容易维护 ：
TypeScript+ 模块化 - 更容易扩展
- 独立的响应化模块
- 自定义渲染器
----------@----------
Vue3速度快的原因
Vue3.0 性能提升体现在哪些方面
- 代码层面性能优化主要体现在全新响应式
API，基于Proxy实现，初始化时间和内存占用均大幅改进； - 编译层面做了更多编译优化处理，比如
静态标记pachFlag（diff算法增加了一个静态标记，只对比有标记的dom元素）、事件增加缓存、静态提升（对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用）等，可以有效跳过大量diff过程； - 打包时更好的支持
tree-shaking，因此整体体积更小，加载更快 ssr渲染以字符串方式渲染
一、编译阶段
试想一下，一个组件结构如下图
<template>
<div id="content">
<p class="text">静态文本p>
<p class="text">静态文本p>
<p class="text">{ message }p>
<p class="text">静态文本p>
...
<p class="text">静态文本p>
div>
template>
可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多 diff 和遍历其实都是不需要的，造成性能浪费
因此，Vue3在编译阶段，做了进一步优化。主要有如下：
diff算法优化- 静态提升
- 事件监听缓存
SSR优化
1. diff 算法优化
Vue 2x中的虚拟dom是进行全量的对比。Vue 3x中新增了静态标记(PatchFlag):在与上次虚拟结点进行对比的时候，值对比 带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容化
Vue2.x的diff算法
vue2.x的diff算法叫做全量比较，顾名思义，就是当数据改变的时候，会从头到尾的进行vDom对比，即使有些内容是永恒固定不变的
Vue3.0的diff算法
vue3.0的diff算法有个叫静态标记（PatchFlag）的小玩意，啥是静态标记呢？简单点说，就是如果你的内容会变，我会给你一个flag，下次数据更新的时候我直接来对比你，我就不对比那些没有标记的了
已经标记静态节点的p标签在diff过程中则不会比较，把性能进一步提高
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
//上面这个1就是静态标记
]))
}
关于静态类型枚举如下
TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
// 指示在diff算法中退出优化模式
BALL = -2
2. hoistStatic 静态提升
Vue 2x: 无论元素是否参与更新，每次都会重新创建。Vue 3x: 对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用
<p>HelloWorldp>
<p>HelloWorldp>
<p>{ message }p>
开启静态提升前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}
开启静态提升后编译结果
const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_hoisted_1,
_hoisted_2,
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}
可以看到开启了静态提升后，直接将那两个内容为helloworld的p标签声明在外面了，直接就拿来用了。同时 _hoisted_1和_hoisted_2 被打上了 PatchFlag ，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff
3. cacheHandlers 事件监听缓存
- 默认情况下 绑定事件会被视为动态绑定 ，所以每次都会去追踪它的变化
- 但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
<div>
<button @click = 'onClick'>点我button>
div>
开启事件侦听器缓存之前：
export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", {
onClick: _ctx.onClick }, "点我", 8 /* PROPS */, ["onClick"])
// PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
]))
})
这里有一个8，表示着这个节点有了静态标记，有静态标记就会进行diff算法对比差异，所以会浪费时间
开启事件侦听器缓存之后：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", {
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
}, "点我")
]))
}
上述发现开启了缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用
4. SSR优化
当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染
<div>
<div>
<span>你好span>
div>
... // 很多个静态属性
<div>
<span>{
{ message }}span>
div>
div>
编译后
import {
mergeProps as _mergeProps } from "vue"
import {
ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"
export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
const _cssVars = {
style: {
color: _ctx.color }}
_push(`${
_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))
}>你好...你好${
_ssrInterpolate(_ctx.message)
}`)
}
二、源码体积
相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，再重要的是Tree shanking
任何一个函数，如ref、reactive、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小
import {
computed, defineComponent, ref } from 'vue';
export default defineComponent({
setup(props, context) {
const age = ref(18)
let state = reactive({
name: 'test'
})
const readOnlyAge = computed(() => age.value++) // 19
return {
age,
state,
readOnlyAge
}
}
});
三、响应式系统
vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
- 可以监听动态属性的添加
- 可以监听到数组的索引和数组
length属性
- 可以监听删除属性
----------@----------
Composition API 与 Options API 有什么不同
分析
Vue3最重要更新之一就是Composition API，它具有一些列优点，其中不少是针对Options API暴露的一些问题量身打造。是Vue3推荐的写法，因此掌握好Composition API应用对掌握好Vue3至关重要
What is Composition API?(opens new window)
Composition API出现就是为了解决Options API导致相同功能代码分散的现象
体验
Composition API能更好的组织代码，下面用composition api可以提取为useCount()，用于组合、复用
compositon api提供了以下几个函数：
setuprefreactivewatchEffectwatchcomputedtoRefs- 生命周期的
hooks
回答范例
Composition API是一组API，包括：Reactivity API、生命周期钩子、依赖注入，使用户可以通过导入函数方式编写vue组件。而Options API则通过声明组件选项的对象形式编写组件Composition API最主要作用是能够简洁、高效复用逻辑。解决了过去Options API中mixins的各种缺点；另外Composition API具有更加敏捷的代码组织能力，很多用户喜欢Options API，认为所有东西都有固定位置的选项放置代码，但是单个组件增长过大之后这反而成为限制，一个逻辑关注点分散在组件各处，形成代码碎片，维护时需要反复横跳，Composition API则可以将它们有效组织在一起。最后Composition API拥有更好的类型推断，对ts支持更友好，Options API在设计之初并未考虑类型推断因素，虽然官方为此做了很多复杂的类型体操，确保用户可以在使用Options API时获得类型推断，然而还是没办法用在mixins和provide/inject上Vue3首推Composition API，但是这会让我们在代码组织上多花点心思，因此在选择上，如果我们项目属于中低复杂度的场景，Options API仍是一个好选择。对于那些大型，高扩展，强维护的项目上，Composition API会获得更大收益
可能的追问
Composition API能否和Options API一起使用？
可以在同一个组件中使用两个script标签，一个使用vue3，一个使用vue2写法，一起使用没有问题
<script setup>
// vue3写法
script>
<script>
export default {
data() {
},
methods: {
}
}
script>
----------@----------
ref和reactive异同
这是Vue3数据响应式中非常重要的两个概念，跟我们写代码关系也很大
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
const obj = reactive({
count: 0 })
obj.count++
ref接收内部值（inner value）返回响应式Ref对象，reactive返回响应式代理对象- 从定义上看
ref通常用于处理单值的响应式，reactive用于处理对象类型的数据响应式
- 两者均是用于构造响应式数据，但是
ref主要解决原始值的响应式问题
ref返回的响应式数据在JS中使用需要加上.value才能访问其值，在视图中使用会自动脱ref，不需要.value；ref可以接收对象或数组等非原始值，但内部依然是reactive实现响应式；reactive内部如果接收Ref对象会自动脱ref；使用展开运算符(...)展开reactive返回的响应式对象会使其失去响应性，可以结合toRefs()将值转换为Ref对象之后再展开。reactive内部使用Proxy代理传入对象并拦截该对象各种操作，从而实现响应式。ref内部封装一个RefImpl类，并设置get value/set value，拦截用户对值的访问，从而实现响应式
----------@----------
Vue3.2 setup 语法糖汇总
提示：vue3.2 版本开始才能使用语法糖！
在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return， template 便可直接使用，非常的香啊！
1. 如何使用setup语法糖
只需在 script 标签上写上 setup
<template>
template>
<script setup>
script>
<style scoped lang="less">
style>
2. data数据的使用
由于 setup 不需写 return ，所以直接声明数据即可
<script setup>
import {
ref,
reactive,
toRefs,
} from 'vue'
const data = reactive({
patternVisible: false,
debugVisible: false,
aboutExeVisible: false,
})
const content = ref('content')
//使用toRefs解构
const {
patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
script>
3. method方法的使用
<template >
<button @click="onClickHelp">帮助button>
template>
<script setup>
import {
reactive} from 'vue'
const data = reactive({
aboutExeVisible: false,
})
// 点击帮助
const onClickHelp = () => {
console.log(`帮助`)
data.aboutExeVisible = true
}
script>
4. watchEffect的使用
<script setup>
import {
ref,
watchEffect,
} from 'vue'
let sum = ref(0)
watchEffect(()=>{
const x1 = sum.value
console.log('watchEffect所指定的回调执行了')
})
script>
5. watch的使用
<script setup>
import {
reactive,
watch,
} from 'vue'
//数据
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或msg变了',newValue,oldValue)
},
{
immediate:true}
)
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job变化了',newValue,oldValue)
},{
deep:true})
script>
6. computed计算属性的使用
computed 计算属性有两种写法(简写和考虑读写的完整写法)
<script setup>
import {
reactive,
computed,
} from 'vue'
// 数据
let person = reactive({
firstName:'poetry',
lastName:'x'
})
// 计算属性简写
person.fullName = computed(()=>{
return person.firstName + '-' + person.lastName
})
// 完整写法
person.fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
script>
7. props父子传值的使用
父组件代码如下（示例）：
<template>
<child :name='name'/>
template>
<script setup>
<