Vue之監聽數據變化

本文轉載自查看原文 2017-10-22 11:38 4461 js/ vue.js

1.輕度監視

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
  
  
        window.onload=function(){  
            var vm=new Vue({  
                el:'#box',  
                data:{  
                    a:111,  
                    b:2  
                }  
            });  
  
            vm.$watch('a',function(){  
                alert('發生變化了');  
  
                this.b=this.a+100;  
            });  
  
            document.onclick=function(){  
                vm.a=1;  
            };  
        };  
  
    </script>  
</head>  
<body>  
    <div id="box">  
        {{a}}  
        <br>  
        {{b}}  
    </div>  
  
</body>  
</html>

初始狀態：

點擊完后：

2.深度監視：deep:true

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
  
  
        window.onload=function(){  
            var vm=new Vue({  
                el:'#box',  
                data:{  
                    json:{name:'strive',age:16},  
                    b:2  
                }  
            });  
  
            vm.$watch('json',function(){  
                alert('發生變化了');  
            },{deep:true});  
  
            document.onclick=function(){  
                vm.json.name='aaa';  
            };  
        };  
  
    </script>  
</head>  
<body>  
    <div id="box">  
        {{json | json}}  
        <br>  
        {{b}}  
    </div>  
  
</body>  
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 監聽data數據變化 vue 監聽data中數據變化 Vue之監聽數據變化watch、computed、methods vue監聽store中對象數據的變化 vue中監聽數據變化 watch Vue中使用watch來監聽數據變化 vue中監聽數據變化 watch vue 監聽input數據實時變化 vue 對watch的使用監聽數據並包含$store 數據變化的監聽 Vue 如何監聽數組變化