详解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 相关文章推荐
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
jquery实现上传文件进度条
Mar 26 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闭包函数详解
2016/02/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python对文件操作知识汇总
2016/05/15 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
趣味活动策划方案
2014/02/08 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
理发店策划方案
2014/06/05 职场文书
现场活动策划方案
2014/08/22 职场文书
婚庆主持词大全
2015/06/30 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS