当前位置：首页 > 资讯 > 技术文档

详解Vue监听数据变化原理

时间：2021-10-24 22:29 编辑：来源：阅读：
扫一扫，手机访问

摘要：详解Vue监听数据变化原理

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

<!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>

[b]深度监听[/b]

<!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>

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

全部评论(0)

上一篇：Vue.js实战之通过监听滚动事件实现动态锚点
下一篇：详解vue数据渲染出现闪烁问题

资讯排行榜
更多>>