详解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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
微信小程序动态设置图片大小的方法
Nov 21 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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP Include文件实例讲解
2019/02/15 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
Python列表推导式的使用方法
2013/11/21 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
《荷花》教学反思
2014/04/16 职场文书
三好生演讲稿
2014/09/12 职场文书
环卫工作个人总结
2015/03/04 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
Go语言基础知识点介绍
2021/07/04 Golang