Vue的Computed、Methods和Watch

发布时间:2024年01月09日

????????模板内的表达式用于简单的运算,当遇到逻辑复杂的运算的时候就会难以维护计算属性和监听属性去解决该问题。

1、计算属性(Computed)

  • 什么是计算属性
<div id="element">
    <p>原字符串:{{str}}</p>
    <p>新字符串:{{newstr}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            str: 'Hello * World * !'
        },
        computed:{
            newstr:function(){
                return this.str.split('*').join('+');//对字符串进行分割并重新连接
            }
        }
    })
 
</script>

//'Hello * World * !
//'Hello + World + !

? ? ? ? 模板当中声明了一个newstr计算属性依赖于str属性,当str发生变化的时候,newstr属性的值也会自动更新。

  • setter和getter

????????每一个计算属性都包含一个getter和setter。当没有指明方法时,默认使用getter方法来读取数据,getter用来执行读取操作,而setter用来执行设置值的操作,当手动更新时就会触发setter,并触发视图更新。

<div id="element">
    <p>姓名:{{fullname}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            name1: '法外狂徒',
            name2: '张三'
        },
        computed:{
            fullname:{
                //getter
                get : function(){
                    return this.name1+this.name2;
                },
                //setter
                set:function(value){
                    this.name1=value.substr(0,4);
                    this.name2=value.substr(4)
                }
            }
        }
    })
    
    demo.fullname='法外狂徒———————————张三'
</script>

//法外狂徒———————————张三
  1. ?代码中定义了一个计算属性fullname,在为其重新赋值的时候,Vue会自动调用setter,模版中绑定的值也会随之更新到视图上。
  2. 如果没有设置setter方法建立fullname与name1和name2的依赖,fullname的值会改变,但视图不会更新
  • 计算属性缓存

? ? ? ? 计算属性computed和methods可以实现完全是一样的效果。他们有什么区别呢?

  1. computed:计算属性是基于依赖进行缓存的,只有他的相关依赖发生改变才会重新请求值
  2. methods:调用总会执行函数
<div id="element">
    <input v-model="message">
    <p>methods方法:{{getTimeA()}}</p>
    <p>computed方法:{{getTimeB}}</p>
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            message:''
        },
        computed:{
            getTimeB:function(){
                var hour=new Date().getHours();
                var minute=new Date().getMinutes();
                var second=new Date().getSeconds();
                return hour+":"+minute+":"+second;
            }
        },
        methods:{
            getTimeA:function(){
                var hour=new Date().getHours();
                var minute=new Date().getMinutes();
                var second=new Date().getSeconds();
                return hour+":"+minute+":"+second;
            }
        }
    })

</script>

//method方法:11:16:35
//computed方法:11:16:13

?上面代码,vue实例发生变化的时候就会重新渲染

  1. computed依赖于缓存,每次访问getTimeB计算属性时会立即返回之前的计算结果,而不会再次执行函数,因此会缓存输出的时间(没有setter,无依赖关系
  2. methods将会更新新时间(自动添加setter

2、监听属性(Watch)

? ? ? ? 监听属性是Vue.js提供的一种用来监听和响应Vue实例中的数据变化的方式。在监听数据对象中属性时,都会执行特定的操作。监听属性可以定义在Vue实例选项之中,也可以使用实例方法xx.$watch()

<div id="element">
    <input v-model="name">
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            name:'法外狂徒张三'
        },
        watch:{
            name:function(newValue,oldValue){
                alert("原值:"+oldValue+"新值:"+newValue)
            }
        }
    })
    //使用xxx.$watch
    // demo.$watch('name',function(newValue,oldValue){
    //     alert("原值:"+oldValue+"新值:"+newValue)
    // })
 
</script>

?????????deep选项,如果要监听的属性是一个对象,为了监听对象内布值的变化,可以在选项参数中设置deep:true。?

<div id="element">
</div>
 
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
 
    var demo = new Vue({
        el: '#element',
        data: {
            dogs:{
                name:'雄文岸田',
                sex:'gay',
                hobby:'e.a.t s.h.i.t'
            }
        },
        watch:{
            dogs:{
                handler:function(val){
                    alert("新值:"+val.name+"-"+val.sex+"-"+val.hobby)
                },
                deep:true
            }
        }
    })
    demo.dogs.name='文雄岸田'
 
</script>

? ? ?3、Computed和Watch区别又是什么?

  • Computed:
  1. 支持缓存,只有依赖发生变化才会重新计算
  2. 不支持异步,有异步操作时候,无法监听到数据的变化
  3. 默认走缓存,基于他们响应式依赖(data声明、父组件props)进行缓存
  4. 一般用于依赖其他属性情况
  5. 属性是函数,那么默认使用get方法,函数的返回值就是属性的属性值
  • Watch
  1. 不支持缓存
  2. 支持异步监听(第一个是最新的值,第二个是变化之前的值)
  3. 一个属性变化,就需要执行相应的操作
  4. 监听必须data声明、父组件props中的数据,当数据发生变化时候会触发其他操作(immediate:组件加载立即触发回调函数,deep:深度监听,发现数据内部的变化)
  5. 想要执行异步或者昂贵的操作以不断响应不断的变化,达到观察的作用
  • 运用场景
  1. Computed:需要进行数值计数依赖其他数据,利用他的缓存特性
  2. Watch:需要在数据变化时候执行异步开销较大的操作

????????看到最后,可以结合MVVM 模式、Vue 双向绑定原理加以理解,observe的任务就是对Data属性加上setter和getter,一旦数据发生变化就会触发监听回调,达到双向绑定的目的。

参考文献:

vue —— 计算属性 & 监听属性_计算属性关键词-CSDN博客

Vue的计算属性与监听属性_vue 监听计算属性-CSDN博客

文章来源:https://blog.csdn.net/qq_42794545/article/details/135489975
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。