jjzjj

vue全家桶进阶之路33：Vue3 计算属性computed

城南 2023-08-10 原文

在Vue3中，计算属性可以使用computed函数来定义。

computed函数接受两个参数：第一个参数是一个函数，该函数返回计算属性的值；第二个参数是一个可选的配置对象，可以包含getter和setter函数，以及控制计算属性缓存的缓存配置。

Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化：

  1. 使用computed函数 Vue3中使用computed函数来定义计算属性，而不是Vue2中使用computed属性。

  2. 支持ref和reactive响应式对象 Vue3中的计算属性不仅支持data对象上的响应式属性，还支持ref和reactive响应式对象。

  3. 计算属性不再是组件选项 Vue3中的计算属性不再作为组件选项，而是在setup()函数中定义。

  4. 更好的性能 Vue3中的计算属性与Vue2相比具有更好的性能。Vue3通过使用基于Proxy的响应式系统，优化了计算属性的性能。此外，Vue3还引入了缓存策略，以避免计算属性的重复计算。

下面是一个使用Vue3中的computed函数定义计算属性的示例：

import { computed, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    return { fullName };
  }
};

在这个例子中，state对象是使用reactive函数定义的响应式对象。fullName计算属性的值是通过连接state.firstName和state.lastName获得的。请注意，fullName计算属性是在setup函数中定义的。

你可以在模板中使用fullName计算属性：

<template>
  <div>{{ fullName }}</div>
</template>

每当state.firstName或state.lastName发生更改时，fullName计算属性的值将重新计算。这是因为Vue会自动追踪state.firstName和state.lastName的依赖关系，并在依赖项发生更改时重新计算计算属性的值。

 

以下是一个使用computed函数定义计算属性的非常基本的操作示例：

<script>
import { computed } from "vue";
export default {
  setup() {
    const firstName = "John";
    const lastName = "Doe";
    const fullName = computed(() => `${firstName} ${lastName}`);
    return { fullName };
  },
};
</script>

在这个例子中，fullName计算属性的值是通过将firstName和lastName连接起来获得的。注意，由于Vue3使用了Composition API，因此计算属性是在setup函数中定义的。

可以在模板中使用fullName计算属性：

<template>
  <div>{{ fullName }}</div>
</template>

每当firstName或lastName发生更改时，fullName计算属性的值将重新计算。这是因为Vue会自动追踪firstName和lastName的依赖关系，并在依赖项发生更改时重新计算计算属性的值。

以下是另一个示例：

<template>
  <div>{{ num1 }}---{{ num2 }}---{{ num3 }}</div>
  <button @click="add">add</button>
</template>
<script>
import { defineComponent, computed, ref } from "vue";

export default defineComponent({
  setup() {
    let num1 = ref(10);
    let num2 = ref(11);
    let num3 = computed(() => {
      return num1.value + num2.value;
    });
    let add = () => {
      num1.value++;
    };
    return {
      num1,
      num2,
      num3,
      add,
    };
  },
});
</script>

 

进阶之路codespancolorVue

有关vue全家桶进阶之路33：Vue3 计算属性computed的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  4. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  5. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  6. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  9. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么？ - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人？如何根据它对它们进行排序？ 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  10. ruby - 如何计算 Liquid 中的变量 +1 - 2

    我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。 最佳答案 因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我

随机推荐