专栏首页coding个人笔记重新认识vue中watch用法

重新认识vue中watch用法

vue使用了真的很长时间了,但越是使用,越是去看api,就越发现,一直使用的api都仅仅是使用,而且使用的还不够到位。之前分享过计算属性computed和watch的区别,今天因为有个需求使用watch,重新看了一下官网文档,发现对watch一无所知。

watch观察vue实例的变化,回调函数参数为新值和旧值,先看基础写法:

watch:{
  msg(a, b){
    console.log(a);
    console.log(b);
  }
},

watch监听的必须是data的数据,当数据发生改变,就会执行。

有配置的写法:

msg: {
  handler:(a, b) =>{
    console.log(a);
    console.log(b);
  },
  deep: true,
  immediate: true
}

deep:为了发现内部值的变化,数组不需要,简单说就是一个对象如果想要监听深层次的变化,想要使用,普通变量是不需要的。

immediate:是否初始化就触发,true为立即执行,注意,如果使用了,新值是undefined。

watch可以监听数组:

watch:{
  arr(a, b){
    console.log(a);
    console.log(b);
  },
},

要注意,对象可以直接监听某个key:

watch:{
  'obj.a'(a, b){
  console.log(a);
  console.log(b);
},
},

当a变化的时候是可以监听到的,如果不写deep,是不能监听到的:

watch:{
 obj(a, b){
  console.log(a);
  console.log(b);
 },
},

上面obj有变化的时候不执行,下面的方法才会执行:

obj: {
  handler: (a, b) => {
    console.log(a);
    console.log(b);
  },
  deep: true
}

有一点要注意,在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。这也是为什么说computed性能会好一些,computed是从缓存中获取:

watch:{
  obj: {
    handler: (a, b) => {
      console.log(a);
      console.log(b);
    },
    deep: true
  }
},

输出的新值旧值都是一样的

vm.$watch 返回一个取消观察函数,用来停止触发回调,但是不知道在实例里面怎么操作。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6之数值的扩展

    之前说过,严格模式八进制不能使用前缀0表示,ES6规定必须使用0o。ES6提供了二进制和八进制的新写法:

    wade
  • vue和react中循环key的作用

    没用过react开发项目,但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候,vue会警告。但是这个key的作用是什么。

    wade
  • ES6之变量的解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在一些场景下还是很有用的。

    wade
  • Linux 命令(122)—— watch 命令

    watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有。如同名字一样,watch 可以帮助监测一个命令的运行结果,省得我们一遍遍地手动运行。比如...

    Dabelv
  • java.util.logging 例子

    Logging java.util.logging import java.util.logging.*; public class Main { pub...

    netkiller old
  • Scrapy之日志文件的产生

    我们写爬虫的时候,也许会需要记录一些数据或者异常信息,通常这些数据我们会希望以日志的形式保存下来。

    钱塘小甲子
  • 生产环境日志清理脚本

    生产上有40多个微服务部署的应用,每个应用都会产生日志,随着时间的增长,日志量不断增大,现需要清理。有两个重要的应用日志需保留90天,其它应用保留20天。

    loong576
  • 每个程序员都应该收藏的算法复杂度速查表

    算法复杂度这件事 这篇文章覆盖了计算机科学里面常见算法的时间和空间的大 O(Big-O)复杂度。我之前在参加面试前,经常需要花费很多时间从互联网上查找各种搜索和...

    用户1667431
  • 详解Linux监控重要进程的实现方法

    不管后台服务程序写的多么健壮,还是可能会出现core dump等程序异常退出的情况,但是一般情况下需要在无

    砸漏
  • 每个程序员都应该收藏的算法复杂度速查表

    这篇文章覆盖了计算机科学里面常见算法的时间和空间的大 O(Big-O)复杂度。我之前在参加面试前,经常需要花费很多时间从互联网上查找各种搜索和排序算法的优劣,以...

    哲洛不闹

扫码关注云+社区

领取腾讯云代金券