详解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 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
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中的超全局变量
2006/10/09 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
用JS实现选项卡
2020/03/23 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python实现简单遗传算法
2018/03/19 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Linux的文件类型
2016/07/05 面试题
抗洪抢险事迹材料
2014/05/06 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
催款函范文
2015/06/24 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Android Rxjava3 使用场景详解
2022/04/07 Java/Android