• 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不一样。

    适用场景:

  • 相关阅读:
    HDU 3757 Evacuation Plan DP
    UVa 1473
    LA 6047 Perfect Matching 字符串哈希
    HDU 3038 How Many Answers Are Wrong 并查集带权路径压缩
    专业程序员必知必会技巧:驯服复杂代码
    OpenCV、OpenCL、OpenGL、OpenPCL
    关于dlg和pro的问题
    关于编译PCL1.71
    VS2010编译错误:fatal error C1189: #error : This file requires _WIN32_WINNT to be #defined at least to 0x
    AI:从游戏引擎--到AI
  • 原文地址:https://www.cnblogs.com/scriptcss3/p/12030051.html
Copyright © 2020-2023  润新知