222222222222

hello我是无忧老师
欢迎收看我的编程教学视频
今天我将用不到一个小时时间
让你快速掌握vue3的核心内容
下面我们开始吧
这里我已经打开了vue的官方网站
cn.vuejs.org
那vue3呢
是现在vue的默认版本
所以呢
我们在操作的时候可以直接去看文档
而不需要太多任何的切换了
点击快速上手
内部就有关于vue的所有功能
那vue3呢
虽然是vue的新版本
但它并没有完全抛弃vue2的语法
那vue3跟vue2呢
有很大部分内容其实是完全相同的
所以我们今天要讲的内容呢
是vue3里面跟vue2不同的
也就是vue3里面新增的一些功能啊
那么在这块呢
最显著的一个变化是
当我们看文档的时候
在左上角
有一个选项式
和组合式的风格偏好选择
那在VIU2里面
我们像data MICE的这种操作方式
我们可以看一下
它其实就是我们所谓的一个选项式
例如说你要想声明响应式数据
你都需要放在一个叫data的位置
那如果你要写一些
要进行想要式操作的函数的话
那我们可以在这里呢写一些messis啊
那再比如说你要写计算属性
我们可以声明一个computer
那computer里边呢
都记录了你所有要处理的计算属性
这个呢是我们在之前vue2语法中
就已经讲解过的内容啊
那在vue3里面呢
它提供了一种完全不同的新的写法
这种写法呢
我们称为叫做组合
式API那下面首先呢
我们先来了解一下什么是组合式API
它给我们解决了哪种问题
那这里我们可以打开到文档最后位置
有一个进阶主题
第二项叫做组合式API的常见问题
我们打开
他首先说了一下什么是组合式API
那这里呢我们就不再依次去看内容了
我们直接看下面一个图示
这里说到了为什么要有组合式API
我们把这里呢给一个图片放大
虽然这里呢这个图片做了模糊处理
我们看不清具体代码
但是呢我们可以通过结构可以看出
像这个区域呢是一个data
data里面呢
包含了多个声明好的详数据
但是我们知道
一个页面
它所包含的功能并不是唯一的
可能说这段功能是用来求和
另外一段功能
用来做一些数度之类的计算啊
那么在这块呢
我们声明的假如说是8个响应式数据
它肯定不是为同一功能准备的
那可能有的呢需要经过两个函数处理
有的需要经过另外三个函数处理
有的还需要进行计算属性操作
那么说到这里大家可能想到一个问题
有可能我们的某一个独立的逻辑功能
它的代码呢是分散在多个位置的
那这里呢view它通过一个图示
通过颜色区分的方式
帮我们将代码区分了一下
例如说我们看到粉色区域
这些数据跟底部的这些结构
它是有关联的
绿色区域跟底部的结构是有关联的
像橙色的数据
还有橙色这个位置以橙色
底部的这个逻辑
它们是有关联的
那么这时就出现一个问题
如果说你当前这个组件
逻辑是比较复杂的
那有可能跟当前这个功能相关
代码是分散在我们这个组件
可能是几百行里面的多个位置
那如果说
我们后面
要进行一些代码的编写和维护的话
操作起来是略显繁琐的
因为我们需要经常在代码中
来回的跳转
找到我们需要操作的位置啊
那这个呢
也是2版本中所存在的一个问题
那么在3版本里面呢
它通过了一种新的书写方式
来帮助我们解决这个问题
而这种方式呢
称为叫做组合式API
那在下面它提供另外一个图片
演示了open API
也就是选项API和conversation API
组合式API它的一个区别
那左侧呢
还是类似于刚才那幅图
它呢将一个功能分成了多个部分
放在我们的data
Maisus以及computer等等的配置项中
而composition API
它允许我们以一种更加灵活的方式
去进行代码组织
它更像我们原声的扎script
你可以随意在代码中的任意位置
去进行想要数据的声明
进行函数的封装
进行计算水平的设置
以及以及侦听器等相关功能的处理
它不再受限于你的某一个特定选项
那这样呢
我们代码灵活性就非常的高
而且呢
利于我们针对不同功能进行代码组织
这样如果我们要写一段逻辑
那粉色区域
就包含了关于这段逻辑的所有内容
紫色区域呢
就包含了关于
第二段功能逻辑的所有内容
它不再需要我们
把一个功能的多个部分
分割在多个区域了啊
这种设置方式呢
虽然更加利于我们代码的维护
但是他对编程者的一个能力
是略有要求的
这也是之前我们说为什么要先学习VO2
再学习VO3
因为一旦你对扎scrib的开发不熟悉
或者对组件化开发方式不熟悉
那很容易产生一些面条代码啊
也就是呢
你写的这个代码虽然自由性高了
但是呢
其实你还是把不同功能穿插在一起
没有一个很好的清晰的界限进行分割
啊那么在这种书写方式下
因为没有了明确的data
或者Mysel这种选项
来帮助我们进行功能的划分
那意味着呢
你需要自己通过某些手段
告诉我们的代码
你要在这个地方声明一个小按数据
或者一个计算属性
或者一个振听器
所以我们学习vue3呢
第一点就是要知道
我们这些声明方式是怎样的
第二点呢
是能够深刻理解
并运用组合制API
进行我们的逻辑处理
那下面呢
我们就打开变频器来进行一下操作
演示这块呢
回到变频器中
那回到我们编辑器里面
这里首先呢我们需要先创建一个vue
三项这块我们还是通过vue CRI来做
创建vue create无忧杠vue3
那之前呢
我们选择的都是vue2啊
这块我们可以选择vue3
你也可以通过手动方式
去选择更多功能
那VIU CI就会帮助我们
自动的将我们的项目
结构搭建好并安装相应的依赖
然后呢一定要记住
我们需要去进入到项目的目录下啊
通过CD方式
然后NPM run surf
然后我们继续打开我们的项目
这块
我已经将项目运行写放在我们右侧了
这里首先呢要写vue三代码
我推荐你安装一个
vue官方提供的vs code插件
点击我们的extensions是扩展
我们搜索Waller Vol AR
他这会儿会搜索到一个插件
叫做view language features
括号Waller啊
安装好以后呢
它可以帮助我们
更好地进行我们的view 3代码解析
以及呢它能够帮助我们
做一些代码的辅助操作
具体有什么辅助
咱们一会呢会在操作中看到啊
好了下面呢回到我们代码中
我们就可以打开我们的src啊
那这个我们先来看一下
在vue3代码里面有哪些不同之处
首先我们看到man点GS
那我们看到呢
当你充电view实力的时候
通过的是一个叫做create APP的方式
来做创建的
而之前呢在view 2里面用的是new view啊
这个是一个小的区别
当然对我们操来说呢
其实区别并不太大
然后呢看到APP
也就是我们的跟组键
在APP点VIO里面呢
我们看到它引入了一个img
和一个hello word
那这明显是一个标签加一个子组件啊
那这块呢
是vue3里面的一个小的跟VR的区别
就是呢vue3不再需要单独的跟标签了
你这个组件明显是有
两个跟标签的
这在vue3里面是被允许的啊
不再需要外部套一个空的D I V了
然后呢script的书写其实还是一样的
你看到这里
其实是还是通过了name components的方式
来做了一个注册啊
如果说你要想使用vue3的话
那这块呢
我们可以通过一个新的配置项
叫做set up
来进行我们vue3的组合式API的使用
当然这种写法呢
其实还是通过了一个单独的配置项
来进行书写
当然了刚才我也说到了
vue3同样支持VIVR的一些写法
比如说data啊
比如说我们的MYCES
这些东西都是OK的啊
当然这里呢
我并不希望去演示这样的操作
因为这个操作呢
我们在之前的一小时学会vue中
已经给大家讲解过了
如果大家对于vue基础使用
还是不太熟悉的话
可以翻看一下我之前的视频
有讲解过
关于一些vue的核心使用
包括vue巡查桶的用法啊
这由我们着重要经典呢
是由vue3的一个组合式API
那在这块呢
我们可以换一种写法
我们呢
如果不希望在这里去通过选项式方式
写set up的话
我们可以在这个script的这个标签上
写一个set up
这个是vue3专为组合式API
提供的一个语法堂
当你写好以后
这个script的内部的空间
就相当于是我们刚才配置那个set up
那这块你看到所有结构都标了红
因为这些结构呢
其实是我们不需
要去书写的了
可以把它删掉啊
那这时你肯定会想
如果我删掉以后
我如何将引入的哈啰
word设置为当前APP点VIU的自组件呢
其实这会儿
你发现
我已保存界面是没有任何变化的啊
原因呢其实非常简单
就是你通过set up语法
只要设置好了以后
内部import这些组组件
都会自动成为当前组件的子组件啊
是这样一个情况啊
所以在使用起来呢
是非常简单的
那同样呢
在我们的hello word组件中
我们也可以同样做这样的设置
打开components打开hello word
那这里面有很多很多结构啊
我为了演示的时候清楚一些
我把这些多余标签给去除掉了
这样省得我们一会儿看的时候太乱啊
哎好
那这款我们保存一下
现在你看我这里写了很多的内容啊
那如果说我在这里写一个set up
那内部呢
你看这些东西也可以不写了
也可以不写了对吧
哎保存一下
然后这呢
接了一个msg对吧
那我这里呢
一会演示的时候并不需要这个msg
我把它给去掉
咱们呢一会就在这个子组键hello word
点view中进行操作
现在你看到我把结构去除以后
界面发生变化
说明这个子组键的关联呢
是没有任何问题的啊
好那下面的话
我们来正式去演示
关于我们的V53的一个使用操作了
那这里呢
首先第一点
就是因为没有了data这些结构
我们如何正常的进行我们的声明对
吧
因为你发现在模板中我们正常插值啊
包括我们的一些指令啊
使用起来是跟以前一模一样的
比如说写一个button
我想加一个事件哎
我就艾特click等于
如果我要写一个处理程序
那我就写一个CLICK handler
要比如写一个修改啊
修改
那如果这里我们希望去声明一个数据
比如叫my data
然后还希望在点击的时候
声明一个函数
对它做修改
这时呢我们就可以通过一些单独的
VIU3的功能来处理了
这第一个我们要讲的叫做reactive
这个reactive是一个用来去声明
显示数据的函数啊
使用的时候怎么用呢
我们写一个const
比如叫做my data等于
你看
这就是通过一个普通的变量生存方式
来做处理的
然后后面呢
我们去调一个叫做reactive的函数
这注意当我一回车
你会发现呢
这顶部自动多了一句引入啊import
然后通过解构方式
你在里边写了一个叫做reactive
然后from view
也就意味着它引入了view
并从view里面解构出了一个
叫reactive的一个函数
供我们去使用啊
这里比如我写一个1 二三好
然后下一步呢
如果你想要去进行一个函数的
就是除以程序函数的设置的话
这好像写的不对啊
c l i c k CLICK啊
那我就写一个function click handler
这我只需要写一个普通函数就OK了
那如果你希望去修改这个数据的话
我就写一个my data
点push 10好
这时候我们保存
我看到
界面中就正常的呈现了这个数组
意味着这个数据呈现是OK的
当我们通过按钮点击修改以后
首先呢这个函数是可以触发的
意味着我们的时间设置是没有问题的
然后呢修改后的数据
也自动地反映到我们的使图上
说明我们的数据呢
是详数据
那意味着我们通过这个简单代码
就已经实现了一个显示数据的声明
以及一个基础实践的设置
那这种结构呢
远比以前我们要写一个data
再写一堆Messis要更加清爽
因为他更加专注于我们的逻辑
不再需要你有些多余的条条框框
当然这一切呢
都是基于我们已经具备了一些理念
我知道我们应该在什么样的位置
去书写什么样的逻辑
以及知道了响应数据
它本身是怎么工作的
这样我们才能更加轻松的在这块儿
去写这简单代码啊
好那
这是我们看到的
一个关于reactive的操作啊
那还有个小细节的
刚才我们提到的
当你写这个reactive的时候
这上面为什么会自动多了一个import啊
这个呢
首先引入操作是在vue3里面所必须的
因为当前组件内幕
其实没有这个函数啊
如果你要使用
必须引入
但如果每次手动去自己写
这个引入其实呢
还是比较啰嗦的啊
虽然不难
但是很啰嗦
所以呢刚才我们安了一个插件Waller
这个插件呢
会在你去使用view 3中
提供的相关函数的时候
帮我们做一个自动引入
那这个操作起来是很方便的啊
例如说我们一会儿呢还有其他函数
我先写个例子
比如说我们的computed
这会儿有回车
你会发现上面自动多了一个引入
而不需要我自己做一个添加
这个操作起来呢是很方便的啊
好当然这块我们先不讲它
我先呢把它删掉
那有了这个插件以后呢
我们就可以更加专注于
我们的代码书写
而不需要关注一些其他的引用细节
好这是我们看到的
关于我们reactive的一个基础使用
那通过reactive呢
在内部
我们可以传入一些对象类型的值
比如说数组对象set对象map对象
这种对象都是OK的啊
它可以对内部做一个全详实的处理
而且不仅是一维的数据
多维也是OK的
比如说我们改成另外一个结构name
无忧
age 18
friends
写一个
李雷
韩梅梅好
写这么一个结构啊
然后在底部呢
我们就不这样去写了
我要演示一下二维结构的操作
对吧friends点push
然后里边写一个郭达
好这时呢
我们去保存
现在我们的数据里面是有很多值的啊
当我一点击修改
它会在里面添加一个拨打
当然因为我只有一个值
所以你每次点都会加这么一个值
那意味着呢
不仅是一维数据
多维数据它也是可以正常处理的
但是有的时候呢
我们在进行一些叶罗丽处理的时候
这个数据呢
可能不仅仅是一维
也不仅仅是二维
可能是更多维
而且我们数据量比较大
的时候比如说我们要生成一个表
这个表里面可能有几千几万
甚至十几万条数据啊
当要确认数据量比较大的时候
那如果说
你将所有的数据都设置为详细的话
那它在生成的时候
会有额外的监测政策
每个值的变化
意味着对性能有更多影响
但是很多时候呢
我们并不会对这些非常复杂的数据
进行一些内部数据的修改
那这种情况下
如果你不希望
数据是一个完全想象式的结构
我们可能仅仅希望第一层是想象式的
那这种情况下呢
我们在view 3中还提供了另外一个属性
叫做shallow reactive
这个shallow reactive呢
可以帮助我们将数据设置为前响应式
啊前响应式也意味着只有根属性
低层属性是响应式的
而内部属性就是非响应式的这种结构
这时呢
我们可以试一下我把这个reactive呢
换成shallow reactive啊
然后前面这个部分呢把它删掉
这时呢我们再去做一个操作啊
我们还是采用friends
点破10的方式来做处理
但是由于呢
它只是初级数据显示
那如果我们修改二维数据的话
是没有效果的
这时我们点击修改
你发现没有变化
但是此时呢
如果你修改的是age加加保存
这时我们点击
因为发现呢
age是可以正常响应式处理的啊
那么这是我们给大家去演示的
关于我们的第一个reactive和shallow reactive
在进行响应式处理时候
的一个操作方式
好那这款把它操作除除掉
那下面呢
我们来演示
关于响示声明的第二种方式
叫做REF那REF是什么呢
REF呢它适用于基本类型值
也就是非对象值进行操作
因为呢我们在进行reactive声明的时候
刚才说到了
reactive能做
想要是操作的值
它必须得是对象
数组其实也是对象
但是对象类型啊
那比如说我现在有一个count
一个计数的这么一个数据
它要进行一个详细化的处理
怎么办呢
我就再通过另外一个操作
叫做REF啊
我们写成const
con等于REF
顶部同样有啊
然后多余这个删掉了
然后在这里呢
我就写一个
比如说是0
那当我在操作的时候呢
注意如果我要修改这个值
我就写成count
注意它自动帮我拼了一个点value啊
点value这也意味着
当我们要操作REF类型的数据的时候
不能直接操作count本身
而是要操作count点value这个值啊
然后呢
我在顶部呃输出的时候也写成count
先看一眼效果
点击我发现这个数据呢
它是响应式的
能够正常的驱动视图做一个改变啊
那下面我们来解释下原因
那我们在view 3里面
它的一个像reactive的显示
实现的方式呢
是基于ES6的proxy
也就是代理的功能
那如果你对于代理不熟悉的话
可以看一下
我之前录制的ES6的讲解视频
里面有关于ES6的一个proxy的使用啊
那么proxy呢
它支持的参数就只能是对象
如果你现在希望对一个基本型
制作想要是处理的话
因为他本身是不支持
这种对象化操作的
所以是无法实现的
那么在view中去实现的时候呢
如果你声明的是一个REF
他会在内部帮你创建一个空的对象
新的空对象
然后把你要使用的这个0
这个值挂在这个对象的value属性上
也就是帮你创建一个对象
value是0
然后再对这个对象进行响应式处理
所以一旦你要修改数据的话
相当于修改这个对象里面的Y6
才能够实现最终效果啊
那意味着我们最终在操作的时候
必须要点Y6
但是呢没有关系
虽然有要点Y6
但是插件帮我们自动拼接了
所以
你只要写上前面的REF的这个名称
它就会自动帮我们拼接出后面的部分
所以使用起来呢
也是很方便的
所以我们只要注意啊
你在使用的时候
reactive跟REF
它使用的类型是不太一样的
就可以了
当然了
REF其实也可以去存一些对象类型
具体还要看你的使用情况
那除了有reactive跟REF这种
用来进行响应式数据声明的
一个方法以外
那view中呢
还提供了一些其他的功能
第三个啊
叫做read only
那根据名称来看
read only呢
是一个用来声明指足数据的
这么一个函数啊
那这块我们可以写一个const my data
等于read only
注意由于数据是只读的
意味着它不能改
由于它不能改
那自然也就无需进行响应式的处理了
所以呢这个
read only的值
它是一个非响应式的数据啊
就是当你有一个数据
不希望被改的时候
就使用read only就可以了
那这块呢
我为了节省时间啊
我把这个代码直接复制一下
我这块直接复制了
之前我们使用过的一个对象结构啊
也叫medata
然后在这块改成medata
好然后在改的时候呢
我们还是去改买data
点age然后保存啊
这里应该是多余了一个声明啊
我的代码风格
不允许我有额外的声明啊
因为我们的数据本身不是想象式的
所以呢
你不要期待在这块去看它的改变
你需要点击我们的查看
之前我们在讲解vue的时候啊
讲到过
关于我们vue的一个develop tool的使用
这个tool呢
在我们VIO3中同样是可以使用的
所以这块我们就可以点击我们的组件
找到里面的hollow word啊
看到这个friends里面现在是两个
你点击也没有什么用
而且呢
控制台里边还会报一些警告啊
说呢target is read only
就是你改了也没啥用啊
那当然了
那有可能呢
我们在操作的时候
仅仅希望根属性是止读的
那内部属性如果你希望不止读的话
在view里面
也提供了一个叫做shallow read only的
指shallow red only啊
那它指的是只有根属性是指读的
而在内部的属性呢
都是非指读的啊
这时候我们去把旧的删掉啊
正常来说你是不需要删的
因为我这块是给大家做演示
频繁的去增
减所以这块
他无法去监视到我们
一些已经删除的数据啊
好这时候我们去刷新一下
点击修改
同样会有这个提示啊
target is read only
但如果我现在修改的不是age
而是里面的friends
点push郭达
这时
我们修改的内容就是一个二维数据了
它就非指读了啊
然后这块呢
我们观察的时候
为了清晰一些
我可以找到video develop two
看到我们的friends现在是两个
我也点击修改
因为是飞翔式的
所以你需要自己去刷新一下
这个控制器
看到底部就会有一个拨打产产生
哎一点啊
点这修改刷新
每次点就会多一个拨打啊
那这是关于我们看到的
一个read only的一个使用方式
好那除了有这个进行指读数据
声明的值以外呢
那我们再有比较常用的
就是我们计算属性啊computy
那这功能的使用呢
跟我们以前也是类似的啊
这里我们写一个count
const count等于我先给一个REF的值啊
REF的值
然后里边我们给一个0啊
这0比如给一个字母串吧
这是一段测试内容
然后把这里呢改成叫做content啊
语义可能更加明显一些啊
然后下面呢
我们就写一个叫做get learn computed
现在呢
我们每次想要去声明计算属性的时候
我们就写一个computed的调用
每一次computed的调用
都会帮我们创建一个计算属性啊
但内部我们写一个计算属性
执行了然后呢
我们通过return方式返回一个
计算属性的结果
比如叫做content
点value点lens啊
因为我们这个content是一个Rev值啊
所以它需要通过点这个方来做访问啊
然后这里呢我们要注意
我呢就希望把这getlen呢哎写成这
然后呢我们来多份
一会儿去监测一下它具体操作情况啊
my data is now defined啊
是在这块修改的一个情况啊
那这里我们在操作的时候呢
我给content
然后来一个加等于
比如说加上叹号
这样呢每次我一点这个按钮
就会去修改它的一个长度
一点是不是就长了呀
一点就长了啊
当然注意呢
虽然我有三次进行渲染
但是当我一点击的时候
他每次只会修改一个指
因为呢只要你数据有了变化
他就会将数据结果计算出来
并进行缓存
那意味着如果你后两次的时候
你看第一次改了
但后两次就没有再改的时候
他呢就直接使用缓存结果
而避免进行重复执行
这也是我们在之前视频中讲过的
关于计算属性执行的一个基本的特征
案
好那除了计算属性以外呢
再有比较长就是我们的侦听器watch
那蒸蒸器的使用呢
跟我们的vue啊2还是有些不同的啊
那这里呢我们把它同样注射掉
然后我把这个咱们重新声明一下吧
这块儿我们const
count等于REF
我呢先给一个普通值叫做count啊
然后我们写一个侦听器
去侦听count的变化
这时候我们就写一个watch
what呢我们可以直接接
收一个参数啊
参数一就是你要征程的值
如果你要征程的是一个REF值的话
这时呢无需写成点Y6
直接写REF对象就可以了
因为它的参数呢支持REF对象本身啊
当你要改那个属性的时候
你才需要去写那个value啊
才需要写那个value
然后后边呢我们就可以写一个参数
2 这个是当你的啊监视的值
监听的值发生变化的时候
它可以帮我们得到一个new value
和一个old value
然后这里我们可以输出一下
new value old value
好然后改的时候呢
我们这里还是同样通过count点value
在它的方式来做一个操作啊
然后上面把一些多余的值去掉
getlen呢我们也不再需要了
这个值我们也不要了吧
我们直接去在控制台里边看啊
现在我一点修改
你发现每次我一点
只要呢我们的con发生改变了
watch就会监听到它的变化
并输出新值跟旧值
这样我们就可以基于新旧值的情况
进行一些真听后的处理啊
这个是我们的一个watch的操作
那这块呢
我们使用的watch
它针听的是一个REF的值
那也有可能
你要针听的
是一个基于reactive声明的数据
那这时呢它会有些不同
我们这块复制一下
我把它放到呃这个位置
my data啊my data
如果你在这块呢只监听my data的话
还是图案的操作
当然有的时候呢
像my data
它内部可能存在了很多属性啊很
多属性
那如果里面输的都是想要是的话
你也可以监听一个具体属性
比如说点age
这是没有问题的啊
但是呢这个watch的参数一
它支持的只是像REF对象本身
和reactive对象的本身
如果你要添添一个属性的话
这样写是无法满足要求的
我们可以看一下啊
当然
这里我要先把一些多余数据给注释掉
哎然后这块儿我们改成my data
点age加加保存一下
还有多余的属性啊
好现在我们就看到这里
其实有一个提示了啊
因为我这块儿真听的是my data的age
他说呢这个age是18
18的值呢
是a watch a watch source
真听的一个原啊
can only be a getter in fact function或者arrive
或者a reactive object or an array of these types
要么就是你的REF对象
要么就是reactive对象
要么就是一个函数
要么就是包裹多个值的一个数组啊
那现在呢
你直接写了一个属性
明显是不符合规则的
所以这里呢
如果你要想进行一个属性的话
你需要通过一个函数的方式
来进行处理
也就是这样去写啊
这样去写
那么这个函数呢
当调用以后
他就会返回这个呃reactive对象的属性
这样就可以达到
我们这块使用的一个要求了
我们保存一下
现在我们去操作
你发现呢
他可以得到你修改前后的
my data的age的一个值啊
那这里操作就是OK的
这是关于我们的
watch啊针听器
针对我们不同形式对象的一个操作啊
那么这块我们再回顾一下
如果你针听的是REF
直接写名称
要真听rap对象本身
不需要写点value
如果你要真听的是一个reactive的属性
那你需要通过一个函数的方式
来做包裹
而不能直接写属性本身啊
那如果
你要直接真情reactive对象本身的话
直接写你的这这个my data就OK了
这是常规用法
这块就不做演示了啊
好那这块呢
是我们演示的关于侦听器的使用方式
那在下面的话呢
我们就来演示一下关于呃
一个新的功能 6
叫做watch infect
那虽说这个功能是新功能啊
但是在使用起来呢
其实是非常简单的啊
其实非常简单的啊
然后我这块把
watch给除除掉
watch infect引入一下
还有我们的REF引入一下啊
好这块我们有count
有REF了
然后下面呢
我们来写一个watch in re
呃watch in fact啊
这个words in fact的话呢
它是一个啊
副作用函数啊
它可以帮助我们
去主动创建一个副作用函数
然后再进行操作啊
修改的时候进行触发啊
这个话呢
就不需要去指定说你要真听哪个值
那你可以在内部书写任意逻辑
如果内部包含的任意一个响示对象
发生的变化
它都会自动地执行这个副作用函数啊
我们举个例子
比如这里
我们写一个consert log
count的值为加上count
然后呢我写一个age的值
喂
my data点age
好那这个操作中呢
我其实使用到了两个想要式数据
一个叫做count
这是一个REF的值
另外一个是my data啊
my data它是一个reactive的值啊
那在操作的时候呢
无论你修改是哪个值
只要是在watching fact这个函数内部
所包裹的详细数据发生变化
它都会自动触发执行啊
现在我看到默认执行一次
是因为它会有一个初始复值
当我们点击修改
虽然我修改的是a值
他也会全全部触发啊
那如果我现在改成修改Y6
刷新一下
这会我们点修改count变化
也会导致wash infect
设置了这个函数的触发啊
那么这是关于wash infect的使用
所以说呢
我们在使用的时候
如果你要是用单一数据的变化
你就使用wash
如果你要有一段逻辑
这段逻辑可能依赖于多个响应数据
这时呢你就使用watch infect就OK了
好那以上呢
是我们演示的
在我们进行vue3操作的时候
如何通过组合式API
来进行一些相关数据的声明
以及操作
那当我们实际实现一些逻辑的时候
我们就会自己通过声明
响应数据以及相关功能的方式
来将我们的代码组合在一起
这样可以让我们同一个功能的代码
关联性更强
更加利于相同功能的代码组织
以及后期的维护
那当然了
vue3里面还提供了很多其他的方法
如果大家在使用中有遇到的话
可以到view官网中
去查看相关用法的使用方式
如果你对某些用法在使用上
还有疑问的话
欢迎在评论区给我留言
我看到后会一一给大家回复的
如果感觉对你有帮助的话
记得帮我点个赞哦
咱们下回再见拜拜