③Vue3 Composition API(setup函数)
Vue3 setup 函数相关使用
前文:
②Vue3 性能比Vue2好的原因(diff算法优化、静态提升、事件侦听器缓存)
Vue3
写下博客主要用来分享知识内容,并便于自我复习和总结。部分图片节选自相关视频。
如有错误之处,请各位大佬指出。
首先,文章的主要内容参考自相关视频,如果各位有需要,可直接前往视频观看:
PS:文中内容和相关用法,全部基于 vue 3.0.0-beta.1 版本。且文中的结论,都通过视频、官方文档、输出结果的测试证明,尽可能保证了正确性。如有错误或相关疑问也可随时提出。如果后续版本变动,导致相关用法略有出入,为正常现象。后续文章也会进一步调整。
Composition API介绍
不知道各位在之前使用 Vue 开发的时候,是否感觉到在代码量很少的时候,逻辑结构还是蛮清晰的。但是随着代码量越来越大,即使我们把相关功能抽出来变成一个个的功能组件,但是功能组件也是越来越多,整体内容全部放在其中也是会相当臃肿,而且必不可少的还会使用到各种形式的组件间通信。这就导致了,每个功能模块的代码会散落分布在各个位置,让整个项目的内容难以阅读和维护(尤其是团队开发的时候,各种各样的命名和组件间通信,让人摸不着头脑)。
比如最熟知的 Vue 结构是这样的:
这也导致了 Vue 帮我们设计了很多方式去维护代码,比如 Vuex、插槽 slot、混入 mixins、事件总线 EventBus 等等,从而让我们尽可能的简化代码,实现复用。
而到了 Vue3,这种现象终于改变了。Vue3 的思路就是根据逻辑功能,对代码进行组织划分,把同一个功能的相关代码全都放在一起,或者把它们单独拿出来放在一个函数中,从而解决上述代码臃肿的问题。基于此,Composition API 又被称为基于函数组合的 API。
为什么要使用这种方式?
1、首先 Composition API 是根据逻辑相关性组织代码的,这样可以提高代码的可读性和可维护性。
2、这种方式可以更好地重用逻辑代码。比如,在 Vue2 中如果想重用逻辑代码,可能会发生命名冲突,以及关系不清。
同时需要说明的是,在 Vue3 中,Composition API 是可选的,并不是一定要使用这种新方式,也就是说我们依然可以使用以前的结构和用法。
setup函数
接下来就是 Vue3 的使用。其中主要就是学习使用 setup 函数,它是使用 Composition API 的入口。
注意点:
setup 函数是 Vue3 中新增的函数,它是我们在编写组件时,使用 Composition API 的入口。同时它也是 Vue3 中新增的一个生命周期函数,会在 beforeCreate 之前调用。因为此时组件的 data 和 methods 还没有初始化,因此在 setup 中是不能使用 this 的。所以 Vue 为了避免我们错误的使用,它直接将 setup 函数中的 this 修改成了 undefined。并且,我们只能同步使用 setup 函数,不能用 async 将其设为异步。
基本使用方法
setup 中创建数据(ref)
首先,给一个 setup 函数的最基本使用简例:
<template>
<div id="app">
<p>{{ name }}</p>
</div>
</template>
<script>
// 不要忘记import
import { ref } from 'vue'
export default {
setup(){
const name = ref('王路飞')
return { name }
}
}
</script>
这里 ref 函数的作用就是创建并返回一个响应式引用。
此时需要注意的是:这个name并不会返回一个字符串类型的值,而是一个响应式对象。再通过 return 返回的对象中的属性,就可以在模板中使用了。
(您也许会好奇这个名词。响应式先不管,这看起来也不像是个对象啊?别着急,慢慢往下看,在下面的 ref 的注意点中,您将会找到这个问题的答案)
setup 中的 methods 方法
如果我们想要在 setup 中使用原本的 methods 用法,我们需要做如下操作:
<template>
<div id="app">
<p>{{ name }}</p>
<p>{{ age }}</p>
<button @click="addOne">加一</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup(){
const name = ref('王路飞')
const age = ref(17)
function addOne(){
age.value++
}
return {name, age, addOne}
}
}
</script>
在这里需要注意:前面已经提到了,在 setup 里是无法使用 this 的,并且 age 也不会是一个 number 类型数据,而是一个响应式对象,所以很显然我们无法直接改变它的值(age++)。那么修改方法就是使用 value。同理,如果我们想修改 name 的值,也需要使用 value 的方式。
(而为什么用了 value 就可以对其进行修改,这个问题的答案也在下面的 ref 的注意点中)
setup 中的 computed 方法
如果我们想要在 setup 中使用原本的 computed 用法,我们需要做如下操作:
<template>
<div id="app">
<p>姓名:{{ name }}</p>
<p>年龄:
<button @click="changeAge(-1)">-</button>
{{ age }}
<button @click="changeAge(1)">+</button>
</p>
<p>出生年份:{{year}}</p>
</div>
</template>
<script>
// 不要忘记import
import { ref, computed } from 'vue'
export default {
setup(){
const name = ref('王路飞')
const age = ref(17)
const year = computed(() => {
return 2020 - age.value
})
function changeAge(val){
age.value += val
}
return {name, age, changeAge, year}
}
}
</script>
该用法和以前还是很像的。需要注意的是,显然我们想要改变 year 的返回值,需要去调整 age 的值。如果我们想直接修改 year 的值,肯定无法通过 year.value 的方式获取。在这里,我们可以像以前一样,去使用 getter 和 setter。
<template>
<div id="app">
<p>姓名:{{ name }}</p>
<p>年龄:
<button @click="changeAge(-1)">-</button>
{{ age }}
<button @click="changeAge(1)">+</button>
</p>
<p>出生年份:
<button @click="changeYear(-1)">-</button>
{{ year }}
<button @click="changeYear(1)">+</button>
</p>
</div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup(){
const name = ref('王路飞')
const age = ref(17)
const year = computed({
get: () => {
return 2020 - age.value
},
set: val => {
age.value = 2020 - val
}
})
function changeAge(val){
age.value += val
}
function changeYear(val){
year.value += val
}
return {name, age, changeAge, year, changeYear}
}
}
</script>
setup 中创建数据(reactive)
现在通过以上的内容我们可以知道,如果想要使用数据,需要使用 ref,获取值需要使用 .value 的方式,而且这些响应式对象还需要通过 return 返回。虽然现在相比以前确实简化了不少,也可以将相关的内容全部放在一起管理,但是到目前为止的操作看起来还是比较繁琐的,不知道各位怎么看。
先不说这样写各位觉得累不累,但至少如果响应式对象很多,那么 return 里需要返回很多的内容。除此以外,从目前来看,ref 函数只能监听简单类型的变化,不能监听复杂类型的变化,比如对象和数组。
综上所述,Vue3 确实提供了另一种定义响应式对象的方式就是:允许我们定义一个响应式对象,然后把我们想使用的值都放在对象内,当作对象属性。
如果我们想这么用,我们需要先导入一个函数:reactive。它的作用就是创建并返回一个响应式对象。
经过筛减,我们的代码可以改变成这样:
<template>
<div id="app">
<p>姓名:{{ data.name }}</p>
<p>年龄:
<button @click="changeAge(-1)">-</button>
{{ data.age }}
<button @click="changeAge(1)">+</button>
</p>
<p>出生年份:
<button @click="changeYear(-1)">-</button>
{{ data.year }}
<button @click="changeYear(1)">+</button>
</p>
</div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup(){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
}
function changeYear(val){
data.year += val;
}
return { data, changeAge, changeYear };
}
}
</script>
需要注意的是,之前使用 ref 的时候,使用的是 age.value,而且返回的是一个响应式对象。而目前使用 reactive 后,就有点像是一个普通对象了。我们就可以像之前使用对象那样,对其进行使用 data.age。(不需要使用 .value 了)
这部分一定要注意观察区别。也就是说,用这种方式,除了 methods 方法(function),现在所有的内容都可以放在 data 里了,方便我们的查阅,简化了 return 的数量。
不要忘记在 template 里,用对象的方式去调用:data.age。
reactive 的注意点
reactive 参数必须是对象(json / arr),否则无法实现响应式。
setup(){
let state = reactive(123);
function myFn(){
state = 666; //由于在创建响应式数据的时候传递的不是一个对象,所以无法实现响应式
console.log(state); //输出666,但是页面无变化
}
return { state, myFn };
}
setup(){
let state = reactive({
age: 17
});
function myFn(){
state.age = 666;
console.log(state); //输出666,页面变化
}
return { state, myFn };
}
setup(){
let state = reactive([1,3,5]);
function myFn(){
state[0] = 100;
console.log(state); // 页面变化
}
return { state, myFn };
}
除此以外,在 console.log(state) 后,我们可以发现 Proxy。那也就证明了,Vue3 中的响应式数据是通过 ES6 的 Proxy 来实现的。
需要注意的是:如果给 reactive 传递了其他对象,默认情况下修改对象,界面不会自动更新。如果想更新,需要通过重新赋值的方式。
setup(){
let state = reactive({
time: new Date()
});
function myFn(){
// 直接修改,页面不会更新:
state.time.setDate(state.time.getDate() + 1 );
console.log(state.time); // 日期变更,页面无变化
// 重新赋值
const newTime = new Date(state.time.getTime());
newTime.setDate(state.time.getDate() + 1);
state.time = newTime;
console.log(state.time); // 日期变更,页面更新
}
return { state, myFn };
}
ref 的注意点
虽然刚才提到 ref 用起来比较繁琐,但 reactive 也存在一些问题。
由于刚才证明了 reactive 必须传递一个对象,所以这就导致了在企业开发中,如果我们只想让某个变量实现响应式时会非常麻烦。所以该如何选择使用 reactive 和 ref 就是一个值得深思的问题。
在这里需要注意的就是:ref 只能监听简单类型的变化,不能监听复杂类型的变化,比如对象和数组。
但实际上 ref 底层的本质其实还是 reactive,系统会自动根据我们给 ref 传入的值将它转换成 reactive。 即:ref(xx)
=> reactive({value:xx})
。所以这也就是为什么,ref 是个所谓的响应式对象,以及需要用 value 的原因了。
那既然如此,各位应该还记得,之前我们使用 reactive 的时候,在 template 里需要以对象的形式使用{{data.age}}
。那既然 ref 也是 reactive,其中又确实有个 value 属性,我们在 template 里怎么就直接使用 {{age}}
就可以了呢?在这里,不需要使用 {{age.value}}
的原因是 Vue 会自动帮我们添加 .value。
那么 Vue 是如何判断 ref 和 reactive 的呢?判断响应式对象是否为 ref 的方法:其中有一个__v_isRef
值,它会记录该数据到底是 ref 还是 reactive。
setup 中使用 Vue2 的 ref
相信各位在之前 Vue2 的开发过程中,经常会使用到 ref。而现在在 Vue3 中我们用 ref 去创建一个响应式对象,那么在 Vue3 中该如何使用 Vue2 的 ref 呢?
<template>
<div id="app">
<div ref="box">我是div</div>
</div>
</template>
<script>
export default {
setup(){
console.log(this.$refs.box)
}
}
</script>
通过上面的代码发现,我们直接在 setup 里像以前这么使用,是不行的。
而为什么不能这么使用的原因很简单,文章最开始就已经提到:setup 函数是 Vue3 中新增的函数,它是我们在编写组件时,使用 Composition API 的入口。同时它也是 Vue3 中新增的一个生命周期函数,会在 beforeCreate 之前调用。因为此时组件的 data 和 methods 还没有初始化,因此在 setup 中是不能使用 this 的。所以 Vue 为了避免我们错误的使用,它直接将 setup 函数中的 this 修改成了 undefined。因此,很显然这样是用不了的。
既然知道了问题所在,那么想要解决就很简单了。因为这时 this 无法使用,那我们就等到 this 可以使用就解决了。我们在这里可以用 onMounted 来验证一下:
<template>
<div id="app">
<div ref="box">我是div</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup(){
let box = ref(null); // reactive({value: null})
onMounted(()=>{
console.log('onMounted',box.value); //到了相应生命周期才会执行,结果:<div>我是div<div>
});
console.log(box.value); //虽然放在后侧也会先执行,结果:null
return { box };
}
}
</script>
综上所述,Vue2 和 Vue3 的 ref 会指向同一个响应式对象噢,而且想要使用时,只要确保在对应生命周期之后去使用即可,也就是不要提前在 setup 中对 ref 做额外操作。
递归监听和非递归监听
在了解了以上内容后,在这里介绍一下 ref 和 reactive 的监听原理。
默认情况下,无论是 ref 还是 reactive 都是递归监听。递归监听就是无论在响应式对象中有多少层内容,每一层它都会去进行 Proxy 监听。因此递归监听的问题就是,如果数据量比较大,它会非常消耗性能。我们可以通过输出看到效果:
let state = reactive({
a: 'a',
b: {
c: 'c',
d: {
e: 'e'
}
}
})
除此以外,不要忘记之前在 reactive 的注意点中提到的,如果给 reactive 传递了其他对象,默认情况下修改对象,界面也是不会自动更新的。如果想更新,需要通过重新赋值的方式。
而如果想让它们从递归监听变成非递归监听,我们可以使用 shallowRef 和 shallowReactive:
let state = shallowReactive({
a: 'a',
b: {
c: 'c',
d: {
e: 'e'
}
}
})
我们可以通过输出看到效果:
这时我们可以看到,除了第一层以外,都没有了 proxy 监听。
但是对于 ref 有些特殊。我们之前说到过很多次,ref 只能监听简单类型的变化,不能监听复杂类型的变化,比如对象和数组。那么 shallowRef 的存在有些尴尬?首先我们先来看一下使用:
setup(){
let state = shallowRef({
a: 'a',
b: {
c: 'c',
d: {
e: 'e'
}
}
})
function myFn(){
state.value.a = '1'
state.value.b.c = '3'
state.value.b.d.e = '5'
console.log(state)
console.log(state.value)
console.log(state.value.b)
console.log(state.value.b.d)
}
return { state,myFn };
}
使用的时候依然需要使用 .value。
这是因为之前提到了 ref 和 reactive 的转换关系:ref(xx)
=> reactive({value:xx})
。
同理的,shallowRef(xx)
=> shallowReactive({value:xx})
。
测试一下可以发现,虽然我们对 state.value.a 进行了修改,但是在页面中是不会发生更新的。难道使用 shallowRef 之后 ref 连第一层都不能监听了?
其实还是老问题,ref 是无法监听复杂类型数据的变化的,所以如果我们想这么用,那就只能通过重新赋新对象的方式了:
setup(){
let state = shallowRef({
a: 'a',
b: {
c: 'c',
d: {
e: 'e'
}
}
})
function myFn(){
state.value = {
a: '1',
b: {
c: '3',
d: {
e: '5'
}
}
}
console.log(state)
console.log(state.value)
console.log(state.value.b)
console.log(state.value.b.d)
}
return { state,myFn };
}
首先,shallowRef 确实其效果了,shallow 的值就是用来判断的。其次,通过这种方式就可以发现一个问题,它不仅能修改第一层 a 的值,也能修改之后所有内容的值。所以简单来说,shallowRef 貌似没什么限制效果。因为我们为其设置非递归监听,却还能修改其他层级的数据,确实不够合理。
如果我们真的要这么使用,且需要修改其他层级的数据,那么我们依然只能通过重新赋值的方式来实现吗?针对这个问题,Vue3 为我们提供了一种方式:triggerRef。它会查看之前 state 中发生变化的数据,然后主动帮我们更新。看代码:
<script>
import { shallowRef, triggerRef } from 'vue'
export default {
setup(){
let state = shallowRef({
a: 'a',
b: {
c: 'c',
d: {
e: 'e'
}
}
})
function myFn(){
state.value.b.d.e = '5'
triggerRef(state)
}
return { state,myFn };
}
}
</script>
这么用就简便的多了。但是这其中最重要的矛盾就是,为什么要使用非递归监听去监听 ref,而且还要让 ref 存储对象或者数组,而不是简单数据类型。而且即使非递归监听,还需要通过重新赋值新对象,或者使用 triggerRef 去让其数据更新,于我而言没发现这种用法的好处。虽然这样能避免递归监听的效率损耗,但在编码上带来的变化也很大。既然是各位大佬最终得到的产物,这样做必然有它的优势,这个优势就需要后续在开发中去体会了。
需要说明的是,虽然之前所有内容都是成对出现的,但这里确实是没有 triggerReactive 的。也就是说,非递归监听下,我们就真没办法修改 reactive 其中任意一层的数据了,这也确实满足非递归监听的本质概念。更何况递归监听下,修改响应式对象的数据是很简单的,不需要这种方式的存在。
所以综上所述,在笔者看来,一般情况下我们使用 ref 和 reactive 即可,只有在需要监听的数据量比较大的时候,才考虑使用 shallowRef 和 shallowReactive。而什么情况下需要使用 shallowRef 仍是需要考量的问题。
toRefs(Vue3 的’模块化’)
Vue3 为了能够帮助我们让代码再简洁一点,还提供了一个 toRefs 函数。这个函数的作用就是将一个响应式函数的对象,转变为普通的对象。但是这个普通的对象里的内容,又都是响应式对象,所以还需要解构,也就是应该这么使用: …toRefs(data)
。这一步也可以验证一下,是否 Vue3 真的这么做了。
测试证明如下:
<template>
<div id="app">
<p>姓名:{{ name }}</p>
<p>年龄:
<button @click="changeAge(-1)">-</button>
{{ age }}
<button @click="changeAge(1)">+</button>
</p>
<p>出生年份:
<button @click="changeYear(-1)">-</button>
{{ year }}
<button @click="changeYear(1)">+</button>
</p>
</div>
</template>
<script>
import { reactive,computed,toRefs } from 'vue'
export default {
setup(){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
}
function changeYear(val){
data.year += val;
}
console.log('data', data);
console.log('toRefs', toRefs(data));
return { ...toRefs(data), changeAge, changeYear };
}
}
</script>
从结果上来看,使用 toRefs 后,它会将一个响应式函数的对象,转变为一个普通的对象。这个普通对象里的内容,都会是响应式对象。
这么做之后,在 template 里就不需要写 data.age
了。再在此的基础上,我们还能把 data 部分的数据拿出来,写在一个函数中,这样就更方便我们区分各个功能模块了:
<script>
import { reactive,computed,toRefs } from 'vue'
export default {
setup(){
const { data, changeAge, changeYear } = test();
return { ...toRefs(data), changeAge, changeYear };
}
}
function test(){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
}
function changeYear(val){
data.year += val;
}
return { data, changeAge, changeYear };
}
</script>
那这样一来,我们就还可以把test函数从这个vue组件当中提取出来,放在一个js文件当中集中管理相关功能了。
这样就达成了所谓 Vue3 的模块化,从而简化了代码,而且把各个功能模块抽分出去,方便管理。
toRef
首先先看个结论:
setup(){
let obj = {name: 'zs'};
let state = ref(obj.name);
function myFn(){
state.value = 'ls';
console.log(state.value); // 输出ls,页面更新
console.log(obj.name); // 输出zs
}
return { state, myFn };
}
结论就是:如果利用 ref 将某一个对象中的属性变成响应式的数据,那我们修改响应式的数据是不会影响到原始数据的。
但当我们使用 toRef 将某一个对象中的属性变成响应式的数据,那我们修改响应式的数据是会影响到原始数据的。但是此时就不会触发页面的更新了。
setup(){
let obj = {name: 'zs'};
let state = toRef(obj, 'name');
function myFn(){
state.value = 'ls';
console.log(state.value); // 输出ls,页面不更新
console.log(obj.name); // 输出ls,页面不更新
}
return { state, myFn };
}
所以 ref 和 toRef 的区别是:
ref 是对原始数据的复制,修改响应式数据不会影响原始数据,同时数据发生改变,界面就会自动更新。
toRef 是对原始数据的引用,修改响应式数据会影响原始数据,但数据发生改变,界面不会自动更新。
toRef 的应用场景就是:响应式数据和原始数据相关联,但我们又不想更新数据后更新界面,那么就可以使用 toRef。
基于上述内容,如果 obj 中有很多属性,又想使用 toRef,此时我们可以利用 toRefs。因为 toRefs 会将一个响应式函数的对象,转变为普通的对象。但是这个普通的对象里的内容,又都是响应式对象,所以 state 中就可以这样用了:
<template>
<div id="app">
<p>{{name}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import { toRefs } from 'vue'
export default {
setup(){
let obj = {name: 'zs', age: 17};
let state = toRefs(obj);
function myFn(){
state.name.value = 'ls';
state.age.value = '16';
}
return { ...toRefs(state), myFn };
}
}
</script>
customRef
之前我们使用的是 ref 去创建一个响应式对象。如果我们想显式地控制依赖追踪和触发响应,此时我们就可以使用 customRef 去自定义一个 ref。customRef 的作用就是返回一个 ref 对象。相关代码:
<template>
<div id="app">
<p>{{age}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import { customRef } from 'vue'
function myRef(value){
return customRef((track, trigger)=>{
return{
get(){
track(); //告诉Vue这个数据需要追踪变化
return value;
},
set(newValue){
value = newValue;
trigger(); //告诉Vue触发界面更新
}
}
});
}
export default {
setup(){
let age = myRef(18);
function myFn(){
age.value += 1;
}
return { age,myFn };
}
}
</script>
那什么时候考虑选用 customRef 呢?
首先,如果我们想要去获取 json 数据,我们需要这么使用:(自己在public中建了一个data.json)
setup(){
let state = ref([]);
fetch('../public/data.json')
.then((res)=>{
return res.json();
})
.then((data)=>{
console.log(data);
state.value = data;
})
.catch((err)=>{
console.log(err);
})
return { state };
}
(这里补充一下,我之前使用 @vue/cli 的时候,这个方式去调用 json 数据会报错。但是根据报错信息去检查时,发现自己写的没有问题,所以在这里沉思一段时间,查阅资料也没找到解决方法。后来改用 Vite 创建项目,发现问题直接解决,暂时不知道原因,但之前提到过 Vite 是 Vue 作者开发的一款意图取代 webpack 的工具,也许 Vite 中帮我们处理了 json 数据。因此如果使用 @vue/cli 遇到 json 数据报错,却找不到原因的话,可以考虑使用 Vite 创建项目进行尝试)
言归正传,之前提到过,setup 是不能异步使用的,也就是在这里不能用 async 和 await 去获取 json 数据。那么之后获取更多数据,就要在其中写这么多的回调函数显然不方便管理。这时,我们可以考虑使用 customRef:
<script>
import { customRef } from 'vue'
function myRef(value){
return customRef((track, trigger)=>{
fetch(value)
.then((res)=>{
return res.json();
})
.then((data)=>{
console.log(data);
value = data;
trigger();
})
.catch((err)=>{
console.log(err);
})
return{
get(){
track(); //告诉Vue这个数据需要追踪变化
return value;
},
set(newValue){
value = newValue;
trigger(); //告诉Vue触发界面更新
}
}
});
}
export default {
setup(){
let state = myRef('../public/data.json');
return { state };
}
}
</script>
参数 props 和 context
setup 函数,它其实是可以设置一些参数的,一个叫做 props,一个叫做 context。
这个 props 参数是用来获取在组件中定义的 props 的。如下所示:
export default {
props:{
title: String
},
setup(props){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
console.log(props.title)
}
function changeYear(val){
data.year += val;
}
return { ...toRefs(data), changeAge, changeYear };
}
}
需要注意的是 props.title,因为我们知道通过 props 传递过来的值都只是可读的,无法修改。
除此以外,我们定义的所有 props 都是响应式的,我们可以监听 props 的值,一旦发生变化我们就做出相应。比如我们想监听 title 的值,我们需要使用 watch,如下代码:
<script>
import { reactive, computed, toRefs, watch } from 'vue'
export default {
props:{
title: String
},
setup(props){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
console.log(props.title)
}
function changeYear(val){
data.year += val;
}
watch(() => props.title, (newTitle, oldTitle) => {
console.log(newTitle,oldTitle)
})
return { ...toRefs(data), changeAge, changeYear };
}
}
</script>
对于第二个参数 context,我们之前说到在 setup 里是不能使用 this 的,但如果我们有些功能需要使用 this,我们就可以使用 context 来获取 attribute,获取插槽,或者发送事件。比如:
setup(props, context){
const data = reactive({
name: '王路飞',
age: 17,
year: computed({
get: () => {
return 2020 - data.age;
},
set: val => {
data.age = 2020 - val;
}
})
});
function changeAge(val){
data.age += val;
console.log(props.title)
}
function changeYear(val){
data.year += val;
}
watch(() => props.title, (newTitle, oldTitle) => {
console.log(newTitle,oldTitle);
context.emit('title-change');
})
return { ...toRefs(data), changeAge, changeYear };
}
context 的使用方法和以前是一样的,比如使用 emit。
toRaw
我们现在知道,在 setup 函数里,只有响应式的数据发生改变,页面才有可能发生更新,也就是在 setup 函数里一个普通对象发生改变,是无论如何都不能引起页面更新的。那现在我们去做这些操作:
setup(){
let obj = {name: 'zs', age: 17};
let state = reactive(obj);
console.log(obj === state); // false
function myFn(){
// 对obj操作无法让页面发生更新,但是会修改obj数据
obj.name = 'ls'
console.log(obj);
// 对state操作才能让页面发生更新,同时会修改obj数据
// state.name = 'ls';
// console.log(state);
}
return { state,myFn };
}
那么这里的 obj 和 state 是什么关系呢?
它们是引用关系,state 的本质是一个 Proxy 对象,在这个 Proxy 对象中引用了 obj。
说到 toRaw 的作用,它会从 reactive 或 ref 中得到原始数据(引用)。也就是说:
let obj = {name: 'zs', age: 17};
let state = reactive(obj);
let obj2 = toRaw(state);
// let state = ref(obj);
// let obj2 = toRaw(state.value);
console.log(obj === state); // false
console.log(obj === obj2); // true
那么这么做有什么用?
因为 ref 和 reactive 每次修改都会被追踪,都会更新 UI 界面,所以如果有一些操作不需要追踪,不需要更新界面,那么这个时候 toRaw 的作用就体现出来了。因为它拿到原始数据,对原始数据进行修改就不会被追踪了,从而让性能提升。
除此以外还有一个 markRaw。如果某数据永远都不想被追踪,就可以使用 markRaw。
let obj = {name: 'zs', age: 17};
obj = markRaw(obj);
let state = reactive(obj);
readonly
readonly 和它的名字一样,数据只能是只读的,并且是递归只读的。也就是它里面所有层级都是只读的。比如下面代码:
<template>
<div id="app">
<p>{{state.name}}</p>
<p>{{state.attr.age}}</p>
<p>{{state.attr.height}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import { readonly, isReadonly, shallowReadonly } from 'vue'
export default {
setup(){
let state = readonly({name: 'ls', attr:{age: 18,height: 1.88}});
function myFn(){
state.name = 'zs';
state.attr.age = 16;
state.attr.height = 1.66;
}
return {state, myFn};
}
}
</script>
当我们试图去修改state的数据时,就会出现提示:
shallowReadonly 就可以让只有第一层是只读的:
setup(){
let state = shallowReadonly({name: 'ls', attr:{age: 18,height: 1.88}});
function myFn(){
state.name = 'zs';
state.attr.age = 16;
state.attr.height = 1.66;
console.log(state);
}
return {state, myFn};
}
虽然设置 shallowReadonly 只有第一层是只读的,但是对其它内容进行修改,也无法让视图发生更新。
isReadonly 就很简单了,用于判定是否为只读类型数据:
function myFn(){
console.log(isReadonly(state));
}
对于只读类型数据,第一时间就可以想到 const。const 和 readonly 的区别:
我们知道如果 const 声明了一个对象,对象内部数据再重新赋值,依然是可以修改的,那么 const 做到的其实是赋值保护,即不能给变量重新赋值。但 readonly 是属性保护,即不能给属性重新赋值。
补充说明:了解了 Composition API 之后,需要说的是,它的本质其实还是 Vue2.x 的 Option API。setup 函数 return 时,它就会把响应式对象写入到 data 里,把 methods 方法写入到 methods 里,其他功能都是同理。
更多推荐
所有评论(0)