详解Vue的watch中的immediate与watch是什么意思


Posted in Javascript onDecember 30, 2019

immediate

immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为“undefined”。如

当我们手动改变newValue.id的值后,输出如下:

如果不设置immediate,或者将immediate设为false的话,则刷新页面后不会立即监听此对象,也就是控制台不会有输出,必须要监听的对象有值改变时控制台才会有输出。

data() {
   return {
    value:''
   };
  },
  watch:{
   value:{
    handler:'init',
    immediate:true
   }
  },
  methods: {
   init(){
    alert(1)
   }
  }

deep设为true后,就可以深入监听了。简单点说,就是可以监听到对象里面的值的变化了

<div>
  <input type="text" v-model="student.studentName">{{student.studentName}}
 </div>
 

student:{
     studentName:'xi'
    }

watch:{
  student:{
    handler:function (newValue,oldValue) {
     console.log(newValue,'new')
     console.log(oldValue,'old')
    },
     deep:true,
     immediate:true
   }

}

不加deep监听不到改变

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

Javascript 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jquery常用操作小结
Jul 21 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
angular.bind使用心得
Oct 26 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
Vue实现星级评价效果实例详解
Dec 30 #Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 #Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 #Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 #Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 #Javascript
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
实时获取Python的print输出流方法
2019/01/07 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
2014年减负工作总结
2014/12/10 职场文书
工作检讨书范文
2015/01/23 职场文书
离婚协议书格式
2015/01/26 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python