vue中的函数(methods)，计算属性(computed)，监听器(watch)的区别demo 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore" name="" id="">
        英语：<input type="text" v-model="englishScore" name="" id=""><br>
        得分(函数-单项绑定)：<input type="text" name="" id="" v-model="sumScore()"><br>
        得分(计算属性-单项绑定)：<input type="text" name="" id="" v-model="sumScore1"><br>
        得分(计算属性-双项绑定)：<input type="text" name="" id="" v-model="sumScore2"><br>
        得分(监听器-watch方式)：<input type="text" name="" id="" v-model="sumScore3"><br>
        得分(监听器-$watch方式)：<input type="text" name="" id="" v-model="sumScore3">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
    <script>
        /*
            1.函数没有缓存,每次都会调用函数
            2.计算属性有缓存，只有当计算属性体内的属性数据更改后才能被调用
        */
        var vm = new Vue({
            el: "#app",
            data: {
                mathScore: 80,
                englishScore: 90,
                sumScore3: 0  //通过监听器算出来的得分
            },
            //函数
            methods: {
                sumScore: function () {
                    console.log("函数被调用");
                    return (this.mathScore - 0) + (this.englishScore - 0);
                }
            },
            //计算属性
            computed: {
                sumScore1: function () { //计算属性有缓存，如果计算属性没有被更改的情况下，计算属性不会重新调用
                    console.log("sumScore1 计算属性被调用");
                    return (this.mathScore - 0) + (this.englishScore - 0);
                },
                sumScore2: { //有了setter和getter之后就可以实现双向绑定
                    //获取数据
                    get: function () {
                        console.log('sumScore2计算属性getter被调用');
                        return (this.mathScore - 0) + (this.englishScore - 0);
                    },
                    //设置数据，当sumScore2计算属性更新之后，则会调用set方法
                    set: function (newVale) {
                        var avgScore = newVale / 2;
                        this.mathScore = avgScore;
                        this.englishScore = avgScore;
                        console.log('sumScore2计算属性setter被调用');
                    }
                }

            },

            //监听器
            //需求：通过watch选项监听数学分数，当数学更新后回调函数中重新计算得分sumScore3
            watch: {
                mathScore: function (newVlaue, oldValue) {
                    this.sumScore3 = (newVlaue - 0) + (this.englishScore - 0);
                }
            }
        })
        vm.$watch("englishScore", function (newVlaue) {
            this.sumScore3 = (newVlaue - 0) + (this.mathScore - 0);
        })

        vm.$watch("sumScore3", function (newVlaue) {
            var avgScore = newVlaue / 2;
            this.englishScore = avgScore;
            this.mathScore = avgScore;
        })
    </script>
</body>

</html>

　　

posted on 2021-06-04 12:37  水行者  阅读(157)  评论(0)    收藏  举报

导航