vue5.计算属性和侦听器

---

计算属性

模板内的表达式非常便利,但是设计它们的初衷是简单运算,在模板中放入过多逻辑会让模板过重且难以维护

<h1>计算属性</h1>
<p>模板内的表达式非常便利,但是设计它们的初衷是简单运算,在模板中放入过多逻辑会让模板过重且难以维护</p>
<h2>基础例子</h2>
    <div id="app-1">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>

<script>
    var vm = new Vue({
        el: '#app-1',
        data: {
            message: 'hello'
        },
        computed: {
            // 计算属性的getter
            reversedMessage: function () {
                //this指向vm实例
                return this.message.split('').reverse().join('');
            }
        }
    });
    console.log(vm.reversedMessage); // => 'olleH'
    vm.message = 'Goodbye';
    console.log(vm.reversedMessage); // => 'eybdooG'
</script>

---

计算属性缓存vs方法

两个方法是结果看起来是没有什么区别的,但是计算属性是存在缓存的,当响应式依赖发生改变时它们才会重新求值,只要不改变就不会再次执行函数,而方法是每次都需要去执行的

<h2>计算属性缓存vs方法</h2>
<p>两个方法是结果看起来是没有什么区别的,但是计算属性是存在缓存的,当响应式依赖发生改变时它们才会重新求值,只要不改变就不会再次执行函数,而方法是每次都需要去执行的</p>
<div id="app-2">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage() }}"</p>
    <p>date now: {{ now }}</p>
</div>

<script>
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            message: 'hello'
        },
        methods: {
            // 计算属性的getter
            reversedMessage: function () {
                //this指向vm实例
                return this.message.split('').reverse().join('');
            }
        },
        computed: {
            now: function () {
                return Date.now();
            }
        }
    });
</script>

---

计算属性vs侦听属性

<h2>计算属性vs侦听属性</h2>
<div id="demo">侦听属性:{{ fullName }}</div>
<div id="demo1">计算属性:{{ fullName }}</div>
<script>
    var vm3 = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
       watch: {
            firstName:function (val) {
                console.log("firstName val",val);
                this.fullName = val+'&&'+this.lastName;
            },
           lastName:function (val) {
               console.log("lastName val",val);
               this.fullName = this.firstName + ' ' +val;
           }
       }
    });

    var vm4 = new Vue({
        el: '#demo1',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
        },
        computed: {
            fullName: function () {
                return this.firstName + '$$$' + this.lastName;
            }
        }
    });
</script>

---

计算属性的setter

计算属性默认只有getter,需要时也可以提供一个setter

<h2>计算属性的setter</h2>
<p>计算属性默认只有getter,需要时也可以提供一个setter</p>
<div id="demo2">计算属性:{{ fullName }}</div>
<script>
    var vm5 = new Vue({
        el: '#demo2',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
        },
        computed: {
            fullName: {
                //getter
                get: function () {
                    return this.firstName + '$' + this.lastName;
                },
                //setter
                set: function (newValue) {
                    console.log("newValue-->",newValue);
                    var names = newValue.split('$');
                    console.log("names-->",names);
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1];
                }
            }
        }
    });
</script>

---

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<h2>侦听器</h2>
<p>虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。</p>
<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</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>
    var watchExampleVM = new Vue({
       el: '#watch-example',
        data: {
           question: '',
            answer: 'I cannot give you an answer until you ask a question!',
        },
        watch: {
           //如果`question`发生改变,这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                this.answer = 'Waiting for you to stop typing...';
                this.debouncedGetAnswer();
            }
        },
        created: function () {
            // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
            // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
            // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
            // 请参考：https://lodash.com/docs#debounce
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
        },
        methods: {
           getAnswer: function () {
               if (this.question.indexOf('?') === -1) {
                   this.answer = 'Questions usually contain a question mark. ;-)';
                   return;
               }
               this.answer = 'Thinking...';
               var vm = this;
               axios.get('https://yesno.wtf/api').then(function (response) {
                   vm.answer = _.capitalize(response.data.answer);

               }).catch(function (error) {
                   vm.answer = 'Error! Could not reach the API. ' + error;
               });
           }
        }
    });
</script>

---