详解Vue的watch中的immediate与watch是什么意思
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监听不到改变
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue.js 中的 $watch使用方法
这两天学习了Vue.js 中的 $watch这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. github 源码 Observer, Watcher, vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.下面我们来看看 如何实现一个简单的 $watch 功能,当然Vue 中使用了很多优化手段,在本文中暂不一一讨论. 例子: // 创建 vm let vm = new Vue({ data: 'a' }) // 键路径 vm.$watch('a.b.c', func
-
vue watch监听对象及对应值的变化详解
如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }
-
Vue数据监听方法watch的使用
watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/
-
vue.js中$watch的用法示例
前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m
-
详解vue2 $watch要注意的问题
使用$watch监听的时候,监听的数据是一个对象的时候,要注意几点: 监听组件内某个对象里面的某项属性时,不要监听对象,直接监听对象里面的属性(深度监听),只有直接监听这个对象里面的属性,只更新对象里面的属性时也能直接监听到此数组的变化. 如 data(){ return { msgs : { list:[1,2,3] } } }, watch:{ msg(newVal,oldVal){ console.log(newVal);//(1) }, "msg.list":function(
-
vue watch普通监听和深度监听实例详解(数组和对象)
下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console
-
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新.如图: 页面代码如下: <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </sc
-
详解Vue中watch的高级用法
假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' },
-
vue.js使用watch监听路由变化的方法
watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe
-
Vue的watch和computed方法的使用及区别介绍
Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3
随机推荐
- javascript复制对象使用说明
- php for 循环语句使用方法详细说明
- JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
- java 学习笔记(入门篇)_程序流程控制结构和方法
- IOS面试大全之常见算法
- 莱鸟介绍window.print()方法
- ASP.NET在上传文件时对文件类型的高级判断的代码
- C#实现程序开机启动的方法
- Android使用http协议与服务器通信的实例
- 详解JavaScript中数组和字符串的lastIndexOf()方法使用
- Javascript 八进制转义字符(8进制)
- linux中Jetty的安装和配置方法
- 一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
- Linux上安装Python的PIL和Pillow库处理图片的实例教程
- java 实现约瑟夫环的实例代码
- react高阶组件经典应用之权限控制详解
- Android 实现ViewPager边界回弹效果实例代码
- 关于Vue的路由权限管理的示例代码
- Django中间件基础用法详解
- 虚拟机中ubuntu不能联网问题的解决方法