Vue中computed用法

科技前沿 • 2025-03-14 11:42 • 阅读 45

大家好，我是讯享网，很高兴认识大家。

一、 computed是什么？

`对于任何复杂逻辑，你都应当使用计算属性。`

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义.
然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：总金额=价格*数量

<div id="example"> <p>Original message: "{ 
   { message }}"</p> <p>Computed reversed message: "{ 
   { reversedMessage }}"</p> </div> var vm = new Vue({ 
    el: '#example', data: { 
    message: 'Hello' }, computed: { 
    // 计算属性的 getter reversedMessage: function () { 
    // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })

讯享网

二、在Vue中有多种方法为视图设置值：

使用指令直接将数据值绑定到视图
使用简单的表达式对内容进行简单的转换
使用过滤器对内容进行简单的转换
我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。

计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。

讯享网

1、计算属性 computed

computed用来`监控自己定义的变量`，该变量`不在data`里面声明，

直接`在computed里面定义`，进行处理后返回一个结果值

基础用法：

讯享网<div id="example"> <p>Original message: "{ 
  
    
  { message }}"</p> <p>Computed reversed message: "{ 
  
    
  { reversedMessage }}"</p> </div>

computed: { 
    // 计算属性的 getter reversedMessage: function () { 
    // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }

使用computed计算属性传参：

讯享网<p v-for="(item, index) in 4" :key="index"> <span>初始值：{ 
  
    
  {item}}，</span> <span>{ 
  
    
  {item}}*2 = { 
  
    
  {caculate(item)}}</span> </p>

computed: { 
    // 将每个传进来的值乘以2 caculate () { 
    //此处不需要携带参数 return function (val) { 
    return val*2 } }, }

在这里插入图片描述
注：在组件内为computed属性赋值的时候，如果没有显示的声明setter，会遇到Computed property ‘XX‘ was assigned to but it has no setter，根据控制台错误提示，组件中定义的computed属性缺少setter，需要设置get()和set()方法，解决办法如下：

讯享网computed: { 
    setting: { 
    get() { 
    return this.xx }, set(val) { 
    this.xx = val; } }, }

2、方法 methods

你我们也可以通过`在表达式中调用方法`来达到同样的效果：

<p>Original message: "{ 
  
    
  { message }}"</p> <p>Reversed message: "{ 
  
    
  { reversedMessage() }}"</p>

讯享网// 在组件中 methods: { 
    reversedMessage: function () { 
    return this.message.split('').reverse().join('') } }

3、侦听器 watch

watch直接写一个`监听处理函数`，两个参数

当每次监听到 cityName `值发生改变`时，`执行函数`。

new Vue({ 
    el: '#root', data: { 
    cityName: 'shanghai', name: '' }, watch: { 
    cityName(newName, oldName) { 
    this.name = newName } } })

Vue中computed用法

一、 computed是什么？

对于任何复杂逻辑，你都应当使用计算属性。

二、 在Vue中有多种方法为视图设置值：

1、计算属性 computed

computed用来监控自己定义的变量，该变量不在data里面声明，

直接在computed里面定义，进行处理后返回一个结果值

2、方法 methods

你我们也可以通过在表达式中调用方法来达到同样的效果：