详解vue3中setUp和reactive函数的用法
1 setUp的执行时机
我们都知道,现在vue3是可以正常去使用methods的。2.setUp中无法使用data中的数据和调用methods的方法
但是我们却不可以在setUp中去调用methods中的方法。
为什么了???
我们先了解一下下面这两个生命周期函数,分别是:
beforeCreate 表示data 中的数据还没有初始化,是不可以使用的
Created : data已经被初始化了,可以使用
setUp在beforeCreate 和 Created 这两个函数之间。
是不是就知道为啥setUp中不可以去调用methods中的方法了。
3.setUp函数的注意点
(1)由于我们不能够在setUp函数中使用data和methods.
所以vue为了避免我们的错误使用,直接将setUp函数中的this
修改成为了undefined
(2) setUp函数只能够数同步的,不能够是异步的哈。
就是说你不能够这样操作4 Vue3中的reactive
async setup(){
},
这样会导致界面空白哈
在Vue2中响应式数据是通过de fineProperty来实现的.reactive需要的注意点
而在Vue3中响应式数据是通过ES6的Proxy来实现的
reactive参数必须是对象(json/arr)
如果给reactive传递了其它对象
默认情况下修改对象,界面不会自动更新
如果想更新,可以通过重新赋值的方式
5 reactive传入字符串数据不跟新
{{str}}
我们发现点击按钮的时候,视图并没有更新。
因为我们传不是一个对象.如果想跟新视图。
应该使用ref函数
文章图片
6 reactive传入数组
{{arr}}
文章图片
7 reactive传入其他对象的跟新方式
{{sate.time}}
【详解vue3中setUp和reactive函数的用法】以上就是vue3 setUp和reactive函数详细讲解的详细内容,更多关于vue3 setUp和reactive函数的资料请关注脚本之家其它相关文章!
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理