详解Vue监听数据变化原理


Posted in Javascript onMarch 08, 2017

本人最近在学习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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
vue 文件目录结构详解
Nov 24 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
详解JavaScript的变量
Apr 04 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
Vue 父子组件、组件间通信
Mar 08 #Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
vue-resourse将json数据输出实例
Mar 08 #Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 #Javascript
js实现五星评价功能
Mar 08 #Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
You might like
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python删除列表内容
2015/08/04 Python
Python在线运行代码助手
2016/07/15 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Python如何实现远程方法调用
2020/08/07 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
教师自我评价范文
2013/12/16 职场文书
消防安全管理制度
2014/02/01 职场文书
市场调查策划方案
2014/06/10 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2014年电工工作总结
2014/11/20 职场文书
婚礼父母致辞
2015/07/28 职场文书
医学会议开幕词
2016/03/03 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Golang流模式之grpc的四种数据流
2022/04/13 Golang