关于VUE的计算属性

/ 0评 / 0

问题

今天在维护之前同事的旧项目时,发现一处搜索功能不能实现,原因是同事在判断逻辑中将计算属性的值赋给了data中的变量,希望search内容更改时能够更新计算属性。
这就衍生出了两个问题

  1. 为何计算属性的方法只在第一次赋值时调用了
  2. 为何计算属性的方法触发后data内的值仍旧未发生改变

在进入正题之前,我们先来复习一下吧

计算属性使用方法

template

<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>

js

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

带有get、set方法

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意:我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

计算属性知识点:

  1. 写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用

  2. 计算属性和data属性都是变量-不能重名. 用法和data相同

  3. 想要给计算属性赋值, 需要使用set方法

  4. 虽然模板语法使用非常便利,但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,此时可以使用计算属性

  5. 因为计算属性是基于缓存实现的,只在计算属性所依赖的数据发生改变时它们才会重新求值,否则访问 计算属性会立即返回之前的计算结果,而不必再次执行函数。 相比之下,每当触发重新渲染时,调用方法将总会再次执行函数,因此相比于函数,在需要运算求得结果时可以优先考虑计算属性

  6. 在js中执行计算属性赋值,并不能让被赋值的属性成为计算属性,因为js中的计算属性赋值其实是相当于执行了计算属性的方法,获得他的返回值而已,返回值每次在计算属性中执行时都会重新生成,自然也不存在浅拷贝使双方数据同步的说法。

  7. 计算属性本身必须被template模板应用才会在引用值更新时触发方法

答案

答案就在6、7两条

  1. 在js中执行计算属性赋值,并不能让被赋值的属性成为计算属性,因为js中的计算属性赋值其实是相当于执行了计算属性的方法,获得他的返回值而已,返回值每次在计算属性中执行时都会重新生成,自然也不存在浅拷贝使双方数据同步的说法。

  2. 计算属性本身必须被template模板应用才会在引用值更新时触发方法

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注