vue中的计算属性computed和侦听器watch

深藏阁楼爱情的钟 2021-09-29 12:06 382阅读 0赞

computed称为计算属性，computed基本用于以下这个情况：

也就是说reversedMessage只取决于message，并且computed中的reversedMessage其实就是响应到data中的数据对象，

<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+"Vue"
    		    }
    		  }
    		})

也就是说当message初次加载时，reversedMessage表现为HelloVue,当message发生变化时，reversedMessage随之变化，

**计算属性是基于它们的响应式依赖进行缓存的**

只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `reversedMessage`计算

属性会立即返回之前的计算结果，而不必再次执行函数。

假设我们有一个性能开销比较大的计算属性 **A**，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用方法来替代。

![20190712104759822.png][]![20190712104812308.png][]

watch侦听器一般适用于，我们需要改变前后的具体的值，做一些相应操作

data: {
        question: '',
    
      },

watch: {
        // 如果 `question` 发生改变，这个函数就会运行
        question: function (newQuestion, oldQuestion) {
               //这里的newQuestion就是改变后的具体值，oldQuestion则是改变前的具体值
        }

[20190712104759822.png]: https://img-blog.csdnimg.cn/20190712104759822.png
[20190712104812308.png]: /images/20210812/f2dc8b7c489643ccace8bf72d52261a0.png