Vue 计算属性和侦听器

2024-02-06 15:56:58

在模板内使用表达式非常便利，但是这个目的是进行简单的运算。如果在模板中进行复杂的逻辑会让模板过重，且难以维护。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

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

#基础例子

<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('')
    }
  }
})

通过上面的例子，可以看出：

1、计算属性是是定义在 computed 属性中的。类似于：

var vm = new Vue({
//其他选项
computed:{
 
  computed_ property:funtion(){    }

}

})

2、通过Vue的API文档，我看看computed的解释：

#computed

　　类型：{ [key: string]: Function | { get: Function, set: Function } }

　　解释：(1)、computed的类型，首先是个 object ---> '{}'，

　　　　（2）、在computed中，可以 key 为 String 类型的 function 函数，或者定义一个包含 get 函数及 set 函数的 object 类。

　　　　（3）、这个key，是可以看做是函数名，同样也是属性名。

例子：

var vm = new Vue({
  data: { a: 1 },
  computed: {
   // 仅设置一个函数
　　// 仅读取
    aDouble: function () {
      return this.a * 2
    },
　　
　　//设置一个object，默认是有的get函数的（getter）， 也可以再新添一个set函数（setter）
    // 读取和设置
    aPlus: {
　　  get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})

vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

3、计算属性的使用，接上面的例子。

//调用 计算属性，跟正常调用属性的方式相同
//不要被计算属性 的方法搞蒙，搞成方法调用了。
vm.aPlus   // => 2
//计算属性 赋值，跟正常的属性赋值的方式相同，
//不要被 计算属性的 方法搞蒙，考虑成方法调用了。
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

#计算属性的缓存特点及计算属性与方法的区别

1、计算属性与方法的区别

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

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

上例中：

1、在 p元素的 {{}} 中，我们使用 reversedMessage() ,这是一个方法调用。

2、这种方式跟计算属性的调用 reversedMessage ，区别是什么呢？ 一看就是，Vue将计算属性 reversedMessage 作为属性对待，直接使用属性的方式调用。

问题是，两者都能实现相同的作用，那两者的区别是什么？

（1）、计算属性是基于它们的响应式依赖进行缓存的，只在相关的响应式依赖发生改变时它们才会重新求职。这就意味着，只要message还没发生改变，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必在执行函数。

（2）、相比，reversedMessage() 方法（函数），是该函数每次触发（比如重新页面刷新加载、其他位置调用），该方法将总会再次执行函数。

相比，计算属性的优势在于缓存，当有响应式依赖，并需要大量复杂计算的时候，一次计算的结果需要多次使用时，应当使用计算属性来完成复杂的函数运算，这样在多次使用的时候，就能避免计算资源的浪费。

但是，如果不是有响应式依赖，或者不需要缓存的时候，同样可以使用方法来实现运算需要。

这里还要在回答一个问题：什么是响应式依赖？

简单理解（错误之处，还请各位笔友在评论区指点），就是加入到Vue实例里 data 选项中的 property （说是属性也很尴尬，data中是类似与key：value 的键值对）。

又或者是依赖于其他计算属性，而被依赖的计算属性，最终也应该依赖于 data选中的property（具有响应式），否则就不是。

例如：

computed: {
  now: function () {
    return Date.now()
  }
}

在一次加载计算后，now的值将恒定（因为一次计算后，结果将会缓存，而不再触发函数运算），如果在想修改 now的值，就必须修改 now 依赖的 Date.now() 的值，但是，Date.now() 不是响应式依赖，原因是它没有到 Vue实例 data 选项中。

这里最明显就是，定义成函数：

methods: {
  now: function () {
    return Date.now()
  }
}

在每次调用函数的时候，这个总能获取当前时间。

<!DOCTYPE html>
<html>
<head>
    <title>计算属性与方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--挂在点-->
    <div id="app">
        <p>当前员工:</p>
        <p>姓名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>性别:{{sex}}</p>
        <p>技能:{{skill}}</p>
        <p>工资:{{gz}}</p>
        <p>年工资增量:{{m_n_z_l}}</p>
        <p>-----------一下是计算属性---------------</p>
        <p>年工资是:{{one_year_gz}}</p>
        <p>通过计算属性获取的年工资增量:{{mei_nian_gong_zi_zeng_jia_liang}}</p>
        <p>通过计算属性获取的 ,第5年的工资额度:{{fifth_year_gz}}</p>

    </div>

    <script>
        var vm = new  Vue({
            el:"#app",
            data:{
                name:'lilei',
                age:20,
                sex:"man",
                skill:"开车",
                gz:1000,
                m_n_z_l:100
            },

            methods:{
                skill_add:function (a,b) {
                    console.log('计算 a,b的和',a+b)
                    return (a+b)
                },
                skill_jian:function (a,b) {
                    // body...
                    console.log('计算 a-b的差',a-b)
                    return (a-b)
                },
                now:function(){
                    console.log('当前时间是:',Date.now())
                     return Date.now()
                }

            },

            // 获取数据
            computed:{
                // 计算属性
                // 一年的收入
                one_year_gz:function(){
                    // 计算出当前一年的说如
                    // 这里要注意,调用自身属性值的时候 ,使用this,指代 Vue的实例,vm
                    console.log('年收入是',this.gz*12)
                    return this.gz*12
                },

                // 十年的工资就没必要了
                // 当月工资改变的时候,one_year_gz也会改变

                // 另外一种方式
                // 设想:通过计算属性 修改关联的 data选项中的值
                mei_nian_gong_zi_zeng_jia_liang:{

                    // 定义这个值
                    get:function(){
                        console.log('获取每年的工资增加量',this.m_n_z_l)
                        // get 是有返回值的
                        return this.m_n_z_l
                    },

                    // 修改每年工资增加量
                    set:function(v){
                        // 这里只做修改,没有返回值
                        console.log('每年工资增加量更改为:',v)
                        this.m_n_z_l = v

                    }

                },

                // 考虑工资增量后,第5年的工资是:
                fifth_year_gz:function(){
                    //考虑增量后,第5年的工资
                    // 每年都增100,与每年增10%,完全不一样的.
                    var fifth_gz = 1000+this.m_n_z_l*5
                    console.log('考虑增量后,第5年的工资:',fifth_gz) 
                    return fifth_gz
                },

                //区别方法的同名函数
                computed_now:function(){
                    console.log('当前时间是:',Date.now())
                     return Date.now()
                }

            }

        })

    </script>
</body>
</html>

年收入是 12000
cvm.html:73 获取每年的工资增加量 100
cvm.html:93 考虑增量后,第5年的工资: 1500

vm.computed_now
cvm.html:99 当前时间是: 1612847980241
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.computed_now
1612847980243
vm.now()
cvm.html:47 当前时间是: 1612847994724
1612847994725
vm.now()
cvm.html:47 当前时间是: 1612847996623
1612847996623

码农公寓

相关文章