运维开发网

vue3的ref的反应式和toRefs

运维开发网 https://www.qedev.com 2022-05-28 16:01 出处:网络
这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

在vue2中,数据函数返回的值是直接响应的,但在vue3中,我们需要使用一些函数来达到这种效果。

无法在设置功能中获得vue的这个。


1、ref

本质上是一个函数,输入参数是一个值(原始类型),以及一个返回响应类型的对象。


2、computed

本质上是函数,输入参数是函数,我们需要的值可以作为输入函数的返回值。

示例:单击按钮将屏幕上的数字加1。

lt;templategt; lt;div id='app'gt; lt;img src="./assets/logo.png"gt; lt;!-- ref对象在模板中引用时,vue可以直接把内部的值展示出来,不需要写count.value --gt; lt;h1gt;{{count}}lt;/h1gt; lt;h1gt;{{double}}lt;/h1gt; lt;button @click='increase'gt;点击lt;/buttongt; lt;/divgt;lt;/templategt;lt;script lang='ts'gt;//ref API:是一个函数,输入参数为一个值,返回一个响应式对象//computed API:是一个函数,输入参数为函数类型,该输入函数中包含咱们需要的值//reactive:将响应式变量包裹在一起,更加清晰import {computed, ref,reactive} from 'vue'export default({ name: 'App', /*data(){ return{ count: 0 } }, methods:{ increase(){ this.count++ } }*/ // 注意:在vue3中不使用data和methods,可以使用ref函数,完成响应式 setup(){ const count = ref(0) //将0传入,返回一个对象 const double = computed(()=gt;{ return count.value*2 }) const increase = ()=gt;{ count.value++ //通过返回对象的value属性获得响应式的数据 } return{ //要在外面使用的变量都要先通过return导出,才能使用 count, increase, double } }});lt;/scriptgt;


3、reactive

本质上是一个函数,接受一个对象作为传入参数。

上面的代码在setup函数中有很多响应式的数据,而且都是分散的。我们可以用reactive把它们都包起来。数据需要取出的输出类型。属性。

lt;templategt; lt;div id='app'gt; lt;img src="./assets/logo.png"gt; lt;h1gt;{{data.count}}lt;/h1gt; lt;h1gt;{{data.double}}lt;/h1gt; lt;button @click='data.increase'gt;点击lt;/buttongt; lt;/divgt;lt;/templategt;lt;script lang='ts'gt;import {computed, ref,reactive} from 'vue'export default({ name: 'App', // 注意:在vue3中不使用data和methods,可以使用ref函数,完成响应式 setup(){ const data = reactive({ count:0, increase:()=gt;{ data.count++ }, double:computed(()=gt; data.count*2 ) }) return{ //要在外面使用的变量都要先通过return导出,才能使用 data } }});lt;/scriptgt;

上面的代码运行时会报错,数据类型错误。这是因为需要解决由内部计算函数引起的数据类型推理循环。您可以手动设置要分配给数据的数据类型。

interface dataProps{ count:number, double:number, increase:()=gt;void}

继续修改上面的代码,发现每次使用模板中的数据,都需要这些数据。属性来获取它。可以直接使用属性吗?这时,我们想到了...es6的扩展字符,但是改了之后我们发现点击按钮并没有改变屏幕上的数字,数据也没有反应。

这是因为这样返回的数据都是普通的js数据类型,不是响应式ref数据类型,所以我们需要一个新的方法。


4、toRefs

本质上是一个函数,接受反应函数作为输入参数,并返回ref类型的对象。

lt;templategt; lt;div id='app'gt; lt;img src="./assets/logo.png"gt; lt;!-- ref对象在模板中引用时,vue可以直接把内部的值展示出来,不需要写count.value --gt; lt;h1gt;{{count}}lt;/h1gt; lt;h1gt;{{double}}lt;/h1gt; lt;button @click='increase'gt;点击lt;/buttongt; lt;/divgt;lt;/templategt;const refData = toRefs(data)return{ //要在外面使用的变量都要先通过return导出,才能使用 ...refData}

此时,我们扩展refData,就可以实现响应了。


总结

本文到此为止。希望能帮到你    

0

精彩评论

暂无评论...
验证码 换一张
取 消