todo

1,computed(计算属性) 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要 当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作的数据)

 computed: {
fullName: function () {
return this.firstName + this.lastName
}
}
1)firstName和lastName任意一个变化都会发生改变,但若都不发生变化,则直接取缓存中的值
2)fullName作为变量直接用在{{}}中,不可与data中的变量名重叠

2,methods(方法)表示一个具体的操作, 主要写 业务逻辑;(场景:方法的调用)

3,watch(监听器)一个对象, 键是需要观测的表达式, 值是对应的回调函数. 主要用来 监听某些特定数据的变化,从而进行某些业务逻辑的操作; 可以看做是computedmethods的结合体;(场景:监听路由地址)

 watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
1)简单理解:firstName是data或者computed中的变量,当其变化时会触发相应的函数变化
2)watch的handler,immediate和deep属性 https://www.jianshu.com/p/b70f1668d08f

vue中的methods,conputed,watcher的更多相关文章

  1. Vue中的三种Watcher

    Vue中的三种Watcher Vue可以说存在三种watcher,第一种是在定义data函数时定义数据的render watcher:第二种是computed watcher,是computed函数在 ...

  2. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  3. Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...

  4. vue中的methods、computed和watch

    1.computed属性: 经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改 ...

  5. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  6. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  7. VUE中常用的十大过滤器

    在vue的学习过程中,我发现过滤器是一个很好用的工具,过滤器(Filters)来渲染数据是一种很有趣的方式.过滤器不能替代Vue中的methods.computed或者watch,不改变真正的data ...

  8. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  9. Vue中computed,methods 和watch

    Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').re ...

随机推荐

  1. 服务器被植入木马,CPU飙升200%

    线上服务器用的是某云的,欢快的完美运行着Tomcat,MySQL,MongoDB,ActiveMQ等程序.突然一则噩耗从前线传来:网站不能访问了! 此项目是我负责,我以150+的手速立即打开了服务器, ...

  2. Being a Good Boy in Spring Festival

    Being a Good Boy in Spring Festival Problem Description 一年在外 父母时刻牵挂春节回家 你能做几天好孩子吗寒假里尝试做做下面的事情吧 陪妈妈逛一 ...

  3. 修建泳池&最大子矩阵

    [题目描述] 夏天到了,学校打算在教学楼后面的空地上挖一个泳池供大家使用. 经过实地勘察,这块土地可以划分成N 行M 列的方格,有的方格是树,有的方格是空地.现在要找一块最大的矩形空地修建泳池,请问泳 ...

  4. springboot2.0和Druid整合配置数据源

    1. idea使用spring 初始化工具初始化springboot项目(要选中web) 下一步,下一步 2. 在pom.xml中,引入Druid连接池依赖: <dependency> & ...

  5. 03、重定义CDF

    有一篇文章“Evolving gene/transcript definitions significantly alter the interpretation of GeneChip data”, ...

  6. 无法安装 Microsoft Visual Studio 2010 Service Pack 1,因为此计算机的状态不支持此安装。有关如何解决此问题的说明,请参阅 Microsoft 下载中心网站上的自述文件

    解决办法: 32 位系统删除:HKEY_LOCAL_MACHINE\Software\Microsoft\VSTO Designtime Setup\ 64 位系统删除:HKEY_LOCAL_MACH ...

  7. JS作用域及域解析规则

    1.JS作用域:变量和函数作用的范围. 2.JS解析器可以分为域解析和逐行解读代码两个过程. 域解析:1.当进行域解析的时候,一旦找到var,就会提取后面的变量名,并给它赋值给undefined. 2 ...

  8. jstat命令使用

    jstat命令使用 jstat是JDK自带的一个轻量级小工具,全称"Java Virtual Machine statistics monitoring tool",它位于java ...

  9. celery开发中踩的坑

    celery开发中踩的坑 celery连接redis 当使用redis做broker,redis连接需要密码时: BROKER_URL='redis://:xxxxx@127.0.0.1:6379/0 ...

  10. initlocation - 创建一个从属的 PostgreSQL数据库存储区

    SYNOPSIS initlocation directory DESCRIPTION 描述 initlocation 创建一个新的PostgreSQL从属数据库存储区.参阅 CREATE DATAB ...