uni-app中使用侦听器和计算属性

侦听器watch

• 类型：{ [key: string]: string | Function | Object | Array }

• 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch() ，遍历 watch 对象的每一个 property 。

• 示例：

<template>
    <view>
        <input type="text" v-model="word">
    </view>
</template>
<script>
    export default {
        data() {
            return {
                word: 'word'
            }
        },
        watch: {
            /* 使用watch来响应数据的变化 */
            word(newVal, oldVal) {
                console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
            }
        },
    }
</script>

示例：

<script>
    export default {
        data() {
            return {
                a: 1,
                b: 2,
                c: 3,
                d: 4,
                e: {
                    f: {
                        g: 5
                    }
                }
            }
        },
        watch: {
            a: function(val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
            },
            // 方法名
            b: 'someMethod',
            // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
            c: {
                handler: function(val, oldVal) { /* ... */ },
                deep: true
            },
            // 该回调将会在侦听开始之后被立即调用
            d: {
                handler: 'someMethod',
                immediate: true
            },
            // 你可以传入回调数组，它们会被逐一调用
            e: [
                'handle1',
                function handle2(val, oldVal) { /* ... */ },
                {
                    handler: function handle3(val, oldVal) { /* ... */ },
                    /* ... */
                }
            ],
            // watch vm.e.f's value: {g: 5}
            'e.f': function(val, oldVal) { /* ... */ }
        }
    }
</script>

 

 

计算属性computed

每一个计算属性都包含一个 getter 和一个 setter ，默认是利用 getter 来读取。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

计算属性的 getter

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

    <view>
        {{ message.split('').reverse().join('') }}
    </view>

这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

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

    <template>
        <view>
            <view>Original message: "{{ message }}"</view>
            <view>Computed reversed message: "{{ reversedMessage }}"</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    message: 'Hello'
                }
            },
            computed: {
                // 计算属性的 getter
                reversedMessage(){
                  return this.message.split('').reverse().join('')
                }
            }
        }
    </script>

结果：

    Original message: "Hello"
    Computed reversed message: "olleH"

你可以像绑定普通 property 一样在模板中绑定计算属性。

Vue 知道 reversedMessage 依赖于 message，因此当 message 发生改变时，所有依赖 reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

计算属性的 setter

在你需要时也可以提供一个 setter 函数， 当手动修改计算属性的值时，就会触发 setter 函数，执行一些自定义的操作。

 

    <template>
        <view>
            <view>{{ fullName }}</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    firstName: 'Foo',
                    lastName: 'Bar'
                }
            },
            computed: {
                fullName: {
                    // getter
                    get(){
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter
                    set(newValue){
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        }
    </script>

 

现在再运行 fullName = 'John Doe' 时，setter 会被调用，firstName 和 lastName 也会相应地被更新。

getter与setter区别

• get：通过设置get方法可以得到fullName的新值。
• set：通过set的方法，设置一个值（newValue）来改变fullName相关联的值，引起fullName重新的计算，相应的页面上fullName也会发生改变成新的内容。

 

什么时候使用侦听器 什么时候用计算属性

侦听器监听data里面的数据,此数据变化引起多个其他数据变化,关系是1对多,既一个数据变化引起多个数据变化时使用侦听器watch

 

计算属性不监听data里面的数据,computed中的方法名当做一个新的data来用,有多个数据的变化都能引起computed发生变化,关系是多对1,既多个数据变化引起一个数据变化时使用计算属性computed