详解Vue监听数据变化原理

2019-11-19 17:14:24

字体：大中小

来源：转载

供稿：网友

本人最近在学习Vue，从网上查询了很多关于Vue监听数据变化原理，稍微整理精简一下做下分享。

浅度监听

<!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">  <script src="../js/vue1.0.js"></script>  <script src="../js/vue-resource.js"></script>  <script>    window.onload = function(){      var vm = new Vue({        el:'#box',        data:{          a:111,          b:2        }      });      vm.$watch('a',function(){        alert('发生变化了');      });      document.onclick = function(){        vm.a = 1;      }    }  </script></head><body><div id="box">  {{a}}  <hr>  {{b}}</div></body></html>

深度监听

<!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">  <script src="../js/vue1.0.js"></script>  <script src="../js/vue-resource.js"></script>  <script>    window.onload = function(){      var vm = new Vue({        el:'#box',        data:{          json:{name:'abcdef',age:'16'},          b:2        }      });      vm.$watch('json',function(){        alert('发生变化了');      },{deep:true});      document.onclick = function(){        vm.json.name = "aaaaaa";      }    }  </script></head><body><div id="box">  {{json | json}}  <hr>  {{b}}</div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现倒计时效果（小于10补零）

下一篇：JS文件/图片从电脑里面拖拽到浏览器上传文件/图片