如果我们用reactive
的形式来定义响应式
变量
setup(){
const obj = reactive({
name:‘inline’,
gender:‘男’,
age:‘18’
})
return{
obj
}
}
使用
姓名:{{ obj.name }}
性别:{{ obj.gender }}
年龄:{{ obj.age }}
这样我们是不是发现在模板内使用参数很麻烦,那我们想直接用{{ name }}
的方式访问行不行,答案是可行的
这里我们使用es6
的扩展运算符
setup(){
const obj = reactive({
name:‘inline’,
gender:‘男’,
age:‘18’,
})
return{
…obj,
}
}
使用
姓名:{{ name }}
性别:{{ gender }}
年龄:{{ age }}
<button @click=“name = ‘juejin’”>改变姓名
<button @click=“gender = ‘女’”>改变性别
<button @click=“age = ‘20’”>改变年龄
结果
动画.gif
这里看到我们的参数都正常的显示到了页面上,但是我们去改变参数时发现视图并没有更新,这是为什么呢???
我们把扩展运算符写成它的等价格式
const obj = reactive({
name:‘inline’,
gender:‘男’,A
age:‘18’,
})
// …obj ==> name:obj.name
哎哎哎,等下 我的鼠标浮动上去怎么提示我name
只是一个字符串?
那我们在看看我们用ref
定义值时提示什么
奥奥,这个时候我们看到name
是一个Ref<string>
,是一个响应式
字符串。
这样我们就找到了为什么没有更新视图的原因,当我们用...扩展运算符
时我们得到的只是一个普通类型的数值,并不是一个响应式数据
为了解决这个问题呢,vue3给我们提供了toRefs
函数,来让我们看看效果如何
setup(){
const obj = reactive({
name:‘inline’,
gender:‘男’,
age:‘18’,
})
return{
…toRefs(obj),
}
}
姓名:{{ name }}
性别:{{ gender }}
年龄:{{ age }}
<button @click=“name = ‘juejin’”>改变姓名
<button @click=“gender = ‘女’”>改变性别
<button @click=“age = ‘20’”>改变年龄
参数都可以正常改变,成功改头换面
动画1.gif
toRefs总结
toRefs
会将我们一个响应式
的对象转变为一个普通
对象,然后将这个普通对象
里的每一个属性变为一个响应式的数据
五、setup
中执行方法
方式一
以reactive
定义响应式数据的方式来定义方法
通过点击事件将值传给fun1
,fun1
接收到后在传给fun2
这里我们用this.fun2()
的方式去调用fun2
,为什么这里用this
可以正常执行不会报undefind
,因为这里的this
非彼this
,Vue2里的this
是实例这里的this
是对象
<button @click=“fun1(‘你好’)”>点我1
结果,成功调用并输出
方式二
注意这里调用fun2
的方式与方式一不同,直接调用就可以,不用this
调用
export default {
name: “test”,
setup(){
const fun1 = (data) => {
fun2(data)
}
const fun2 = (data) => {
console.log(data)
}
return{
fun1,
}
}
}
调用
<button @click=“fun1(‘你好 inline’)”>点我1
结果
方式三
这种方式避免了将功能逻辑都堆叠在setup
的问题,我们可以将独立的功能写成单独的函数
这里我在setup
外写了fun()
login()
两个功能函数,并在setup内分别调用
import {ref, reactive,toRefs} from “vue”;
export default {
name: “test”,
setup(){
const test1 = fun() // 如果函数返回参数过多,可以赋值给变量并用扩展运算符暴露给组件的其余部分
const { test } = login() // 也可单个接收
return{
…toRefs(test1),
test,
}
}
}
// 功能1
function fun(){
let str = ref(‘我是功能1’)
function fun1(data){
console.log(str.value)
fun2(data)
}
function fun2(data){
console.log(data)
}
return{
fun1,
fun2,
}
}
// 功能2
function login() {
const obj = reactive({
msg:‘我是功能2,我爱掘金’
})
function test() {
console.log(obj.msg)
}
return{
test
}
}
调用
<button @click=“fun1(‘你好 inline’)”>点我1
<button @click=“test”>点我2
结果
动画.gif
方式四
与方式三一样,只是我们将两个功能函数提取出来放在单独的.js
文件中
然后引入组件,并在setup
内调用
<button @click=“fun1(‘你好 inline’)”>点我1
<button @click=“test”>点我2
正常执行且输入
方式五
我们还可以这样写,这里我定义一个reactive
响应式对象,赋值给login
变量,这个响应式对象内有我们登录需要的参数
、验证
和方法
,这里我们全部放在login
这个响应式对象内然后用toRefs
及扩展运算符
暴露出去
我们使用一下
<button @click=“login”>登录
正常执行,所以我们还可以将一个功能的所有方法和相关参数写在一个reactive
对象内
表情包1.gif
如有遗漏的执行方式欢迎评论区指出~~~
六、script setup
script setup
已在vue3.2的版本上正式发布
关于script还可以看看:基于 Vue3 和 TypeScript 项目大量实践后的思考
用法
是不是异常简单
变量方法无需return
使用
<script setup>
时,模板被编译成一个内联在 setup 函数作用域内的渲染函数。这意味着内部声明的任何顶级绑定<script setup>
都可以直接在模板中使用
script setup
内定义的变量和方法无需返回,可直接使用
组件引入
导入的组件无需注册,可直接使用
<Foo :count=“count” @click=“inc” />
发布Props
和Emits
普通script
和script setup
script setup
可以和script
同时存在
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)
最后的最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体即可获取!!!
13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-wQu7Qd6k-1711644703647)]
[外链图片转存中…(img-4mZ1PHPt-1711644703648)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-q9e7cL2i-1711644703648)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)
最后的最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。
需要完整面试题的朋友可以点击蓝色字体即可获取!!!
[外链图片转存中…(img-MsiRPrFQ-1711644703649)]
[外链图片转存中…(img-S8uFBDEf-1711644703649)]
[外链图片转存中…(img-00af0q0v-1711644703650)]
[外链图片转存中…(img-E5RI8sfy-1711644703650)]