VUE:计算属性和监视

Posted it-taosir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE:计算属性和监视相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1、计算属性:
                在computed属性对象中定义计算属性的方法
                在页面中使用{{方法名}}来显示计算结果
            2、监视属性:
                通过vm对象的$watch()或watch配置来监视指定的属性
                当属性变化时,回调函数自动调用,在函数内部进行计算
            3、计算属性高级:
                通过getter/setter实现对属性数据的显示和监视
                计算属性存在缓存,多次读取只执行一次getter计算
        -->
        
        <div id="app">
            姓:<input type="text" placeholder="First Name" v-model="firstName"/><br />
            名:<input type="text" placeholder="Last Name" v-model="lastName" /><br />
            姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullName1"/><br />
            姓名2(单向):<input type="text" placeholder="Full Name2" v-model="fullName2"/><br />
            姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullName3"/><br />
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script type="text/javascript">
            //const常量
            const vm=new Vue({
                el:"#app",
                data:{
                    firstName:A,
                    lastName:B,
                    fullName2:A B
                },
                computed:{
                    //计算属性的方法,方法的返回值作为属性值。
                    //执行条件:初始化显示的时候或data发生改变的时候调用
                    fullName1(){
                        return this.firstName+ +this.lastName;
                    },
                    fullName3:{
                        //回调函数(1.你定义的,2.你没有调,3.但最终它执行了)计算并返回结果
                        //当需要读取当前属性值时回调,根据相关的数据计算并返回当前属性的值
                        get(){
                            return this.firstName+ +this.lastName;
                        },
                        //当属性值发生改变时回调,更新相关的属性数据
                        //value:fullName3的最新值
                        set(value){
                            const names=value.split( );
                            this.firstName=names[0];
                            this.lastName=names[1];
                        }
                    }
                    
                    
                },
                watch:{
                    //传参    (新的值,旧的值) 或 (旧的值)
                    firstName:function(value){
                        this.fullName2=value+ +this.lastName;
                    },
                    /*lastName:function(value){
                        this.fullName2=this.firstName+‘ ‘+value;
                    }*/
                }
            })
            
            vm.$watch(lastName,function(value){
                    this.fullName2=this.firstName+ +value;
            })
        </script>
    </body>
</html>

重点:计算属性存在缓存

以上是关于VUE:计算属性和监视的主要内容,如果未能解决你的问题,请参考以下文章

Vue 中的计算属性不会触发监视

Vue 计算属性和监视属性详解细节 class类绑定和style样式绑定

VUE:计算属性和监视

vue计算属性computed和监视器watch的使用

Vue基础(中):数据代理事件处理计算和监视属性class与style绑定

vue3中计算属性与监视