Vue计算属性和侦听器

2019-03-12 本文已影响0人 quanCN

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，你都应当使用计算属性。

例子

<body>
<div id="app">
    <h1>{{text}}</h1>
    <h1>{{add1}}</h1>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            text:"hello"
        },
        computed:{
            // 计算属性的 getter
            add1:function () {
                return this.text+"world";
            }
        }
    })
</script>

像绑定普通属性一样在模板中绑定计算属性

计算属性与方法
用以下方式同样可以实现相同效果
```
<h1>{{add2()}}</h1>
```
```
methods:{
    //方法
    add2:function () {
        return this.text+"world";
    }
}
```
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 text 还没有发生改变，多次访问 add1 计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性， Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例子

<div id="app">
    <p>Please:<input v-model="text"></p>
    <p>{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            text: '',
            message: 'Please enter'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            text: function (newQuestion, oldQuestion) {
                this.message = 'Waiting for you to stop typing...';
                this.debounced()
            }
        },
        created() {
            this.debounced = _.debounce(this.getText, 500)
        },
        methods: {
            getText: function () {
                if (this.text.indexOf('?') === -1) {
                    this.message = 'Please enter'
                }
            }
        }
    })
</script>

Vue计算属性和侦听器

计算属性

侦听属性

猜你喜欢

热点阅读