1.监听对象需要深度监听 ,如下代码可以监听整个msg对象的变化

watch: {
  msg: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

2.监听对象里面某个属性的变化,通过computed做中间层实现

computed: {
  channel() {
    return this.msg.channel
  }
},
watch:{
channel(newValue, oldValue) {
    console.log('new: %s, old: %s', newval, oldVal)
    //这里面可以执行一旦监听的值发生变化你想做的操作
  }
}

vue watch的用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  3. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  4. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  5. Vue SSR: 基本用法 (二)

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...

  6. cdn模式下vue的基本用法

    我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQ ...

  7. vue watch详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法 html: <input type="text" v-model ...

  8. vue的基本用法

    公共样式---pc版的404报错 动态src 这个是vue组件template部分 <div class="not-found"> <img :src=" ...

  9. vue路由高级用法

    五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...

  10. vue 事件基本用法

    事件基本用法 事件的函数都定义在VUE实例中的methods中,当然也可以直接写在元素内,但是这并不利于后期的维护,需要注意的是:在methods定义的函数内想要引用插值内容,需要使用this,不然就 ...

随机推荐

  1. Laravel Exception结合自定义Log服务的使用

    Laravel Exception结合自定义Log服务的使用 第一部分:laravel关于错误和异常的部分源码 第二部分:自定义异常的使用(结合serviceprovider monolog elas ...

  2. Spring Boot学习(二)搭建一个简易的Spring Boot工程

    第一步:新建项目 新建一个SpringBoot工程 修改项目信息 勾选项目依赖和工具 选择好项目的位置,点击[Finish] 第二步:项目结构分析 新建好项目之后的结构如下图所示,少了很多配置文件: ...

  3. Spring框架分为哪七大模块,各模块的主要功能作用是什么

    七大模块,如下: 1. Spring Core: Core封装包是框架的最基础部分,提供IOC和依赖注入特性.这里的基础概念是BeanFactory,它提供对Factory模式的经典实现来消除对程序性 ...

  4. chrome浏览器控制台 console不打印信息问题解决办法

    谷歌浏览器控制台不能显示consle打印的东西,我记得之前可以正常打印,代码没问题,可能是你在浏览器中无意间点到了fifter,我们2可以使用最简单粗暴的方法---->恢复默认值. 按下F12, ...

  5. 如何使用NuGet package .nupkg文件?

    如果你本来就有.nupkg文件并且你只需要.dll文件的话,你可以通过打开.zip下的lib文件夹来获取. 例如:

  6. org.springframework.dao.InvalidDataAccessApiUsageException: The given id must not be null!; nested exception is java.lang.IllegalArgumentException: The given id must not be null

    通过这个简单的案例,手把手教给你分析异常信息(适合初学者看) org.springframework.dao.InvalidDataAccessApiUsageException: The given ...

  7. mysql存储过程的初步学习及案例示例

    存储过程 几个月前小编开始初步接触学习存储过程,当然是跟着大神的视频学习的,在学习的过程中自己也记录了一下笔记,如今整理一下,接下来我将从概念,优缺点以及语法和实际应用几方面为大家详细讲解一下存储过程 ...

  8. JVM内存模型不再是秘密

    前言 上篇文章我们一起了解了jvm虚拟机类的加载机制,而且是以一种纯大白话进行的一场闲聊,相信小伙伴们应该印象深刻,感兴趣的小伙伴可以重温一下上一篇文章大白话谈JVM的类加载机制. 当jvm加载了类后 ...

  9. Power Designer建模之餐饮在线点评系统——需求模型实例

    总览 一级需求 二级需求 管理门户  会员门户 三级需求 系统管理  企业中心  会员中心  统计分析 四级需求

  10. 晚间测试3 B. 单(single)

    题目描述 单车联通大街小巷.这就是出题人没有写题目背景的原因. 对于一棵树,认为每条边长度为 \(1\),每个点有一个权值\(a[i]\).\(dis(u,v)\)为点\(u\)到\(v\)的最短路径 ...