Vue3 Computed

Posted on  by admin

Modified1 year, 2 months ago. I have a Vue3 project with TypeScript, and I'm finding I cannot access the properties (using dot notation or named indexing) of the returned JS object from one computed property in another computed property.

So given the code below, my TS compiler will have a compilation error trying to read friends on the this.user object.

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3vue-composition-apivue-script-setup or ask your own question.

This makes sense as this.user is a function, but in the Vue world it's treated as a property. And the code will work fine if the lang="ts" part is removed. Here is the error:. I created this sample code with the Vue cli (vue create).

I'm not sure if this is even a problem with TypeScript or Vue? I don't want to remove the TypeScript tag for this code, but might be the best option. not sure what your user computed is supposed to do as it has no reactive source?

一、函数式写法

however, in Vue3, its much nicer to use the reactivity API, and do something like. 1515 gold badges8787 silver badges149149 bronze badges. 149149 bronze badges. One way would be to convert the type before accessing it:. Interested to know if there's a better way though. 44 gold badges1616 silver badges3838 bronze badges.

Introduction

3838 bronze badges. Might not be the best solution but I guess you can appease the compiler by specifying the this parameter .. 11 gold badge1414 silver badges2626 bronze badges. 2626 bronze badges. vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法。.

Putting It All Together

组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue"。引入之后 computed 可以传入的参数有两种:回调函数和 options 。具体看看它是如何使用的?. 在vue2中,computed 写法:. 在vue3 如果使用选项式API也可以这样写,主要看下组合式API的使用。. 调用 computed 时, 传入了一个箭头函数,返回值作为 sum 。相比之前,使用更加简单了。如果需要计算多个属性值,直接调用就可以。如:.

Computed

计算属性默认只有 getter ,在需要的时候也可以提供 setter 。在vue2中用法如下:. mul 属性是 给num1 放大10,如果修改 mul 的值,则 num1 也随之改变。. 这两种写法不太一样,仔细观察区别不大,get 和 set 调用也是一样的。.

直接这样写,运行的时候,出现错误:Uncaught TypeError: $setup.sltEle is not a function。. computed 计算属性并没有给定返回值,我们调用的是一个函数,而 computed 内部返回的并不是一个函数,所以就会报错:sltEle is not a function。.

Methods

需要在计算属性 内部返回一个函数。修改代码如下:. posted @ 2021-11-25 09:34前端人 阅读(4393) 评论(0) 编辑收藏举报. Vue 3 is in beta and it’s subject to change.

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2. In this article, we’ll look at Vue computed properties and watchers. We can add computed properties to derive some from an existing property.

For instance, we can write:. We added the message property to the object we return in data .

Then we added the computed property to the object we passed into createApp . Methods are inside it getters, so we return things derived from other properties.

The method must be synchronous. Now when we type in something to the input, we’ll see the reversed version displayed below it. We can achieve the same result by running a method to reverse the string. But it wouldn’t be cached based on their dependency if we use a regular method to return derived data.

Computed properties are cached based on the original reactive dependencies. As long as this.message stays the same, reversedMessage won’t be run. However, if we have dependencies that aren’t reactive in our computed property, then the method won’t run.

In this case, we’ve to use methods to make them update. So something like:. We can have setters in our computed properties.

二、options 写法

For instance, we can write:. We have the firstName and lastName properties in the object we return with data .

Then we can create the getter for the fullName property by returning the 2 properties combined into one string.

The setter would be the set method which takes the newValue and then split it back into its parts.

We set the this.firstName and this.lastName based on the combined string we have returned from get . When this.firstName and this.lastName change then get is run. If get is run, then set is run. Computed properties work for most cases, but sometimes we need watchers to provide us with a more generic way to watch for data changes.

For example, we can use it by writing:. We have a getData method which takes a newName parameter and get some data from an API.

And then we have our watch property, which has an object with watchers.

Conclusion

The name of the method would match the name of the instance property name. A watcher takes an old value and a new value as the parameter.

三、computed 传参

And we can run what we want inside it. The code we run is async so we got to use a watcher instead of computed properties.

Computed properties and watchers let us watch for reactive data changes and let us run code when they change. Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Modified1 month ago. I'm trying to get computed to work in