Vue | Vue.js Composition API

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

coderHing[专注前端]

关注

33
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
31
评论
Vue | Vue.js Composition API

在我们传递给其他组件数据时往往希望其他组件使用我们传递的内容但是不允许它们修改就用readonly.如果我们将 counter 在 addClick 或者 subClick进行操作时是否可以实现界面的响应式?data定义数据 methods中定义方法 computed中定义计算属性 watch中监听属性改变。创建一个响应式代理他跟踪其自身property的响应性,但。// 当我们这样做的时候会返回两个ref对象,它们是响应式的。如果想要在setup中定义的数据提供响应式的特性,那么我们可以。
复制链接

扫一扫