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. Java Android 开发数字不足位数前面补0

    import java.text.DecimalFormat; public void changeColor(View view) { DecimalFormat decimalFormat = n ...

  2. js知识点——1

    onload 事件会在页面或图像加载完成后立即发生. document.write("内容")将在加载页面时输出 内容可以是什么,可以是一个标签,它输出的文件不能自动换行: < ...

  3. nginx配置本地域名反向代理实现本地多域名80访问

    什么是反向代理? 代理:通过客户机的配置,实现让一台服务器代理客户机,客户的所有请求都交给代理服务器处理. 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器. ...

  4. TCP的三次握手与四次挥手理解及面试题

    TCP的三次握手与四次挥手理解及面试题(很全面) 转载自:https://blog.csdn.net/qq_38950316/article/details/81087809 本文经过借鉴书籍资料.他 ...

  5. 2019-2020-1 20199319《Linux内核原理与分析》第二周作业

    计算机是如何工作的 反汇编一个简单的C程序 1.在实验环境下,创建main.c,并进入该文件进行代码的编写 在VIM文本编辑器中编写完代码后按"Shift"+":&quo ...

  6. Linux日常之命令tee

    命令tee (1)读取标准输入的数据,并将其内容输出成文件 (2)主要用于重定向到文件 常用参数 -a,将读取的内容追加到文件的后面,而不是覆盖(在默认的情况下是覆盖) 命令tee与重定向的区别 重定 ...

  7. Idea集成使用SVN教程

    第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!官网下载地址:https://tortoisesvn.net/downloads.html 下载之后直接安装就好了,但是要注意这里,选择安装所有的 ...

  8. MapReduce 中的两表 join 方案解析

    1. 概述 在传统数据库(如:MYSQL)中,JOIN操作是非常常见且非常耗时的.而在HADOOP中进行JOIN操作,同样常见且耗时,由于Hadoop的独特设计思想,当进行JOIN操作时,有一些特殊的 ...

  9. LDA主题模型评估方法–Perplexity

    在LDA主题模型之后,需要对模型的好坏进行评估,以此依据,判断改进的参数或者算法的建模能力. Blei先生在论文<Latent Dirichlet Allocation>实验中用的是Per ...

  10. Mapnik使用postgres中的栅格数据

    XML: <?xml version="1.0" encoding="utf-8"?> <Map background-color=" ...