菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育

标题: 前端-陈旭辉-20230707 [打印本页]

作者: 陌殇    时间: 2023-7-10 18:54
标题: 前端-陈旭辉-20230707
本帖最后由 陌殇 于 2023-7-10 18:26 编辑

、学习内容

Vue3简介
1.新特性
1)Composition API (组合API)
setup配置
ref与reactive(响应式API)
watch与watchEffect。provide与inject
2)新的内置组件
Fragment
Teleport
Suspense
3)其他改变
        新的生命周期钩子
        data 选项应始终被声明为个函数。移除keyCode支持作为v-on的修饰符
2.剖析Vue Composition API
那么既然知道Composition API想要帮助我们做什么事情,接下来看一下到底是怎么做呢?
 为了开始使用Composition API,我们需要有一个可以实际使用它(编写代码)的地方;
 在Vue组件中,这个位置就是 setup 函数;
setup其实就是组件的另外一个选项:
 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项;
 比如methods、computed、watch、data、生命周期等等;
接下来我们一起学习这个函数的使用:
 函数的参数
 函数的返回值
3.setup函数的参数
我们先来研究一个setup函数的参数,它主要有两个参数:
 第一个参数:props
 第二个参数:context
◼ props非常好理解,它其实就是父组件传递过来的属性会被放到props对象中,我们在setup中如果需要使用,那么就可以直接
通过props参数获取:
 对于定义props的类型,我们还是和之前的规则是一样的,在props选项中定义;
 并且在template中依然是可以正常去使用props中的属性,比如message;
 如果我们在setup函数中想要使用props,那么不可以通过 this 去获取(后面我会讲到为什么);
 因为props有直接作为参数传递到setup函数中,所以我们可以直接通过参数来使用即可;
◼ 另外一个参数是context,我们也称之为是一个SetupContext,它里面包含三个属性:
 attrs:所有的非prop的attribute;
 slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到);
 emit:当我们组件内部需要发出事件时会用到emit(因为我们不能访问this,所以不可以通过 this.$emit发出事件);
4.setup函数的返回值
setup既然是一个函数,那么它也可以有返回值,它的返回值用来做什么呢?
 setup的返回值可以在模板template中被使用;
 也就是说我们可以通过setup的返回值来替代data选项;
但是,如果我们将 count在 increment 或者 decrement进行操作时,是否可以实现界面的响应式呢?
 答案是不可以;
 这是因为对于一个定义的变量来说,默认情况下,Vue并不会跟踪它的变化,来引起界面的响应式操作;






欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4