• vue中computed 和 watch 语法


    一、computed

    当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性

    <p id="app">  {{fullName}}  </p>
    
    <script>
        var vm = new Vue({  
            el: '#app',  
            data: {  
                firstName: 'Foo',  
                lastName: 'Bar',  
            },  
            computed: {  
                fullName: function () {  
                    return this.firstName + ' ' + this.lastName  
                }  
            }  
        })
    </script>

    需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。

    计算属性默认只有getter,可以在需要的时候自己设定setter:

    ...
        computed: {
            fullName: {
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    

    这个时候在控制台直接运行vm.fullName = ‘bibi wang’,相应的firstName和lastName也会改变。

    适用场景:

    二、watch

    watch和computed很相似,watch用于观察和监听页面上的vue实例,当然在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象.

    var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    

      如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。

    适用场景:

  • 相关阅读:
    就现在的几种代码管理库的比较
    就书籍“构造之法”的问题
    软件工程之中期学习总结
    软件项目管理之理解
    软件代码规范之理解
    介绍几个常用的代码管理工具
    关于构建之法的问题
    研究生竞赛系统需求规格说明书
    各种GIT代码托管工具比较
    第一个作业
  • 原文地址:https://www.cnblogs.com/scriptcss3/p/12030051.html
Copyright © 2020-2023  润新知