问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue, 计算属性如何赋值?

头像
Dreamer
    7110

    问个问题, vue computed不建议赋值, 因为computed是个只读对象, 但是computed不是有个set吗, 我现在在composition api, setup语法糖中想使用set并且给computed赋值该怎么做呢

    前端vue3computed
    阅读 1.7k
    avatarAI BotBETA

    在 Vue 3 的 Composition API 中，你可以使用 ref 和 reactive 函数来创建响应式对象，并使用 set 函数来更新这些响应式对象。

    但是，注意在 Vue 的 computed 函数中，我们通常不使用 set 函数来赋值。这是因为 computed 是一个计算属性，它应该只读，并且总是返回根据其依赖关系计算的结果。

    如果你需要一个可以改变的值，你可能需要使用一个普通的响应式引用（如 ref 或 reactive），然后在需要改变它的地方使用 set 函数。

    以下是一个示例：

    import { ref, reactive, set } from 'vue';

export default {
  setup() {
    const count = ref(0); // 初始值
    const state = reactive({ count });

    set(state, 'count', 10); // 修改值

    console.log(state.count.value); // 输出 10
  },
};

    在上述代码中，我们首先使用 ref 创建了一个响应式引用 count，然后使用 reactive 创建了一个响应式对象 state，并将 count 作为 state 的一个属性。然后，我们使用 set 函数修改了 state.count 的值。这个修改是响应式的，所以当 state.count 的值改变时，任何依赖于它的地方都会自动更新。

    2 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542

      你是否是要这样:

      <template>
  <div>
    <div>计算属性</div>
    <button @click="nextAge=25">修改计算属性</button>
    <div>今年：{{age}}岁了</div>
    <div>明年：{{nextAge}}岁了</div>
  </div>
  
</templat>
 
<scirpt>
import {ref,computed} from 'vue'
excort default {
   name:"App",
   setup(){
    const age=ref(18)
    const nextAge=computed({
    get(){
    // 读取计算属性的值，调用get方法
    return age.value+1
    },
    set(v){
    // 修改计算属性的值，调用set方法
     age.value=v-1 
    }
    })
  retuen { age , nextAge}
    
 }
      头像
      Meathill
        22.6k133642
        1. 既然名为计算属性，那么它的值应该是通过计算得来，而不是直接操作
        2. 如果你只用一次外界来源，那你其实是需要初始值，那么你应该使用 ref
        3. 所以计算属性大多数情况下不需要直接赋值，除非它来源于某个非本实例，比如 pinia/store
        4. 或者，你应该赋值给原始数值，而不是计算后的结果
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题