Vue计算属性和侦听器

目录

一、什么是计算属性

二、计算属性用法

三、计算属性的使用技巧

四、计算属性缓存

五、Vue 侦听器

 1、基本使用

2、侦听是否 “及时” ？

3、小结：

---

一、什么是计算属性

        在 Vue 应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更
为复杂时，就会变得臃肿甚至难以维护和阅读，比如：

<div>
    {
  {text.split(',').reverse().join(',')}}
</div>

        这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。 上
例可以用计算属性进行改写：

<div id="CalculationProperties">
    {
  {ReversedText}}
</div>
<script>
    var CalculationProperties = new Vue({
        el: "#CalculationProperties",
        data: {
            text:"123,456",
        },
        computed: {
            ReversedText: function ()
            {
//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果
                return this.text.split(',').reverse().join(',')
            }
        }
    })
</script>

注意:所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果

二、计算属性用法

        在一个计算属性里可以完成各种复杂的逻辑，包括逻辑运算、函数调用等，只要最终返回一
个结果就可以。除了上面的简单的用法，计算属性还可以依赖多个 vue 实例的数据，只要其中任
意一个数据变化，计算属性就会重新执行，视图也会更新。

        例如：计算购物车内两个包裹的物品总价

<div id="prices">
    总价： {
  {prices}}
</div>
<script>
    // <!--购物车总价-->
    var prices = new Vue({
        el: "#prices",
        data: {
            package1: [
            {
                name: "华为 mate20pro",
                price: 4566,
                count: 2
            },
            {
                name: "华为 p30",
                price: 4166,