详解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 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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
Yii开启片段缓存的方法
2016/03/28 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python编程中的for循环语句学习教程
2015/10/14 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
详解python3中tkinter知识点
2018/06/21 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
基于Python fminunc 的替代方法
2020/02/29 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
美术社团活动总结
2014/06/27 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
实施意见格式范本
2015/06/05 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫