一、认识CompositionAPI
Options API的弊端
在Vue2中 编写组件的方式是Options API
Options API的一大特点就是在 对应的属性 中编写 对应的功能模块
如 data定义数据 methods中定义方法 computed中定义计算属性 watch中监听属性改变 也包括生命周期钩子
这种代码有很大的弊端:
当我们 实现某一个功能 时 这个功能 对应的代码逻辑 会被 拆分到各个属性 中
当组件变得更大更复杂时 逻辑关注点的列表 就会增长, 那么 同一个功能的逻辑就会被拆分的很分散;
尤其对于那些一开始 没有编写这些组件的人 来说 这个组件的代码 是难以阅读和理解的
认识Composition API
为了使用Composition API 我们需要一个可以实际使用它(编写代码)的地方
在Vue组件中,这个位置就是 setup函数
setup其实就是组件的另外一个选项:
这个选项强大到我们可以用它来替代之前所编写的大部分其他选项
如 methods computed watch data 生命周期等
二、Setup函数的基本使用
setup函数的参数
它主要有两个参数:props和context
prop=>父组件传递过来的属性 放到 props对象中, 我们在setup中如果需要使用 直接通过props参数获取:
对于 定义props的类型, 我们还是 和之前的规则是一样的,在props选项中定义
并且 在template中 依然是可以 正常去使用props中的属性,如 message
我们在setup函数中想要使用props 那么不可以通过this去获取
因为props有直接作为参数传递到setup函数中,我们可以直接通过参数来使用
context称之为SetupContext 它里面包含三个属性:
Attrs: 所有的非prop的attribute
slots:父组件传递过来的插槽
emit:当我们组件内部需要发出事件时 会用到emit
setup函数的返回值
setup是一个函数,他也有返回值 它的返回值能用来做什么?
可以在模版template中被使用
可以通过setup的返回值来替代data选项
甚至我们可以 返回一个执行函数 来 代替methods中定义的方法:
JavaScript let counter = 100 const addClick = ()=>{ // console.log("123") //.value 才能拿到里面的数据 counter.value++ } const subClick = ()=>{ // console.log("456") counter.value-- }
JavaScript return { // 想要绑定谁 就写谁 counter, addClick, subClick }
如果我们将 counter 在 addClick 或者 subClick进行操作时 是否可以实现界面的响应式?
不可以! 对于一个 定义的变量来说 默认情况下,Vue不会跟踪它的变化 来引起界面的响应式操作
三、Setup中数据的响应式
Reactive API(不常用,但是是核心)
如果想要在setup中定义的数据提供响应式的特性,那么我们可以使用reactive的函数
JavaScript const account = reactive({ username:"xiaoxiong", password:"123456" })
这是什么原因?为什么就可以变成响应式?
因为 当我们使用 reactive函数处理我们的数据后,数据再次被使用时就会进行依赖收集
当 数据发生改变 时 所有收集到的依赖 都是 进行对应的响应式操作(如:更新界面)
事实上,我们编写的 data选项,也是在内部 交给了reactive函数 将其变成响应式对象的
Ref API
Reactive API 对 传入的类型是有限制的 它要求我们必须传入的是 一个对象或数组类型:
如果传入一个 基本数据类型 会报一个警告
这个时候 Vue3提供了另外一个API:ref API
ref会返回一个 可变的响应式对象,该对象作为一个 响应式的引用 维护着它内部的值,这就是ref名称的来源;
它内部的值是 在ref的value属性 中被维护的
JavaScript const counter = ref(0) const message = ref("Hello World")
注:
在模版中引入ref的值时 Vue会自动帮助我们进行解包操作,我们并不需要在模版中通过ref.value的方式来使用
但在setup函数内部,他依然是一个ref引用,对其进行操作时 依然需要使用ref.value的方式
四、Reactive知识点补充
认识readonly(了解)
通过reactive或ref可以获取到一个响应式的对象, 但在某些情况下,我们传入给其他地方(组件)的这个响应式对象 希望在 另外一个地方(组件)被使用,但是不能被修改, 我们如何防止这种情况出现?
Vue3为我们提供了 readonly的方法
readonly会返回原始对象的只读代理(它依然是一个Proxy 这是一个proxy的set方法被劫持并且不能对其进行修改)
在开发中常见的readonly方法会传入三个类型的参数:
一:普通对象 二:reactive返回的对象 三:ref的对象
readonly的使用
在readonly的使用过程中 有以下规则:
Readonly 返回的对象都是不允许修改的
经过readonly处理的原来的对象是允许被修改的
如 const info = readonly(obj) info对象是不允许被修改的
当obj被修改时 readonly返回的info对象 也会被修改
但是 我们不能去修改readonly返回的对象info
本质上就是 readonly返回的对象是setter方法 被劫持了
readonly的应用
在我们传递给其他组件数据时 往往希望其他组件使用我们传递的内容 但是不允许它们修改 就用readonly.
Reactive判断的API(了解)
isProxy
检查对象 是否是由 reactive或readonly创建的proxy
isReactive
检查对象 是否由reactive创建的响应式代理;
如果 该代理是readonly建的 但是 包裹了由 reactive创建的另一个代理,他也会返回true
isReadonly
检查对象 是否由readonly创建的只读代理
toRaw
返回 reactive或readonly代理的原始对象(不建议保留对原始对象的引用,谨慎使用)
shallowReactive
创建一个响应式代理 他跟踪其自身property的响应性,但不执行嵌套对象的深层响应式转换(深层还是原生对象)
shallowReadonly
创建一个proxy 使其自身的property为只读,但 不执行嵌套对象的深度只读转换(深层还是可读,可写的)
五、Ref知识点补充
toRefs(偶尔使用)
如果我们使用ES6的解构语法,对reactive返回的对象进行解构获取值,之后 无论是修改解构后的变量,还是修改reactive返回的info 对象,数据都不再是响应式的:
JavaScript const info = reactive({ name:"xiong", age:18, height:1.88 }) const {name,age} = info
那么 我们怎么让解构出来的属性是响应式的?
Vue提供了一个toRefs的函数,可以将 reactive返回的对象中的属性都转为ref
那么我们再次进行解构出来的name和age本身就是ref的了
JavaScript // 当我们这样做的时候 会返回两个ref对象,它们是 响应式的 const {name,age} = toRefs(info)
这种做法相当于在 info.name和ref.value之间建立了 链接 任何一个修改都会引起另外一个变化
toRef
我们希望只转换一个 reactive对象中的属性ref 那么可以使用toRef的方法:
JavaScript const height = toRef(info,"height")
ref其他的API
unref
如果我们想要获取一个ref引用中的value,那么可以通过unref方法:
如果参数是一个ref 则返回内部值,否则返回参数本身;
这是 val = isRef(val) ? val.value : val 的语法糖函数
isRef
判断值 是否是一个ref对象
shallowRef
创建一个 浅层的ref对象
triggerRef
手动触发和shallowRef相关联的副作用
JavaScript const info = shallowRef({name:"xiong"}); // 下面修改的不是响应式 const changeInfo = ()=>{ info.value.name = "xiaoxiong", // 手动触发 triggerRef(info) }
六、setup中禁用this
setup不可以使用this
官方在this上有这样一段描述 :
表达的含义是 this并没有指向当前组件实例;
并且在setup被调用前,data computed methods等都没有被解析
所以 无法在setup中获取this
