计算属性和侦听器

1，计算属性

① 在 computed 属性对象中定义计算属性的方法

② 在页面中使用 {{ 方法名 }} 来显示计算的结果

③ 通过 getter / setter 实现对属性数据的显示和监视

④ 计算属性存在缓存，多次读取只执行一次 getter 计算

通过在表达式中调用方法也可以达到同样的效果

但是，不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，只要 msg  没有发生改变，多次访问 reverse_msg 计算属性会立即返回之前的计算结果，而不必再次执行函数，相比之下，每次触发重新渲染时，调用方法将总会再次执行函数。

2，侦听属性

① 通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性

② 当属性变化时，回调函数自动调用，在函数内部进行计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓：<input type="text" placeholder="First Name" v-model="lastName" /><br>
        名：<input type="text" placeholder="Last Name" v-model="firstName"><br>
        姓名1(监听姓):<input type="text" placeholder="Full Name" v-model="fullName1"><br>
        姓名2(监听名):<input type="text" placeholder="Full Name" v-model="fullName2"><br>
        姓名3(监听姓和名):<input type="text" placeholder="Full Name" v-model="fullName3">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                firstName:'',
                lastName:'',
                fullName1:'',
                fullName2:'',            
            },
            watch:{
                lastName: function (new_lastName) {
                    this.fullName1 = this.firstName + ' ' + new_lastName
                },
                firstName:function(new_firstName){
                     this.fullName2 = new_firstName + ' ' + this.lastName
                },
            },
            computed:{
                 fullName3: {
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function (value) {
                        let fullName3 = value.split(' ');
                        this.firstName = fullName3[0];
                        this.lastName = fullName3[1];
                    }
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2021-02-01 23:46  shanlu  阅读(79)  评论(0)    收藏  举报