watch监听数据发生变化

Posted 2023-04-04

参考技术A Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如

queryData:

    name: '',

    creator: '',

    selectedStatus: '',

    time: [],

,

现在我需要监听这个queryData，我可以这样做：

watch:

    queryData:

        handler: function()

            //do something

        ,

        deep: true

   



里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样

watch:

    'queryData.name':

        handler: function()

            //do something

        ,

   



或者还可以这样巧用计算属性

computed:

    getName: function()

    return this.queryData.name

   



watch:

    getName:

        handler: function()

            //do something

        ,

   

$scope.$watch()——监听数据变化

$scope.$watch(watchFn, watchAction, [deepWatch])：监听数据变化，三个参数

　　——watchFn：监听的对象，一个带有Angular 表达式或者函数的字符串

　　——watchAction：是一个函数或者表达式，当watchFn 发生变化时会被调用。如果是函数的形式，它将会接收到watchFn 的新旧两个值，以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)

　　——deepWatch：是否深度监听，可选。如果设置为true，这个可选的布尔型参数将会命令Angular去检查被监听对象的每个属性是否发生了变化