1.computed(计算属性)
computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上),

2.methods(方法)
写在html中的时候需要带()支持传参,且需要有触发条件(@)。
methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数。
methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)。
methods不处理数据逻辑关系,只提供可调用的函数。

3.watch
类似于监听机制+事件机制。

4.watch/computed
当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。
watch擅长处理的场景:一个数据影响多个数据。
computed擅长处理的场景:一个数据受多个数据影响。
methods里面的函数就是一群“耿直Boy”,如果有其他父函数调用它,它会每一次都“乖乖”地执行并返回结果,即使这些结果很可能是相同的,是不需要的。
而computed是一个“心机Boy”,它会以Vue提供的依赖追踪系统为基础,只要依赖数据没有发生变化,computed就不会再度进行计算。

vue computed、methods、watch的区别的更多相关文章

  1. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  2. 【Vue】----- computed与watch的区别

    1.computed computed是一种计算属性,用来监听属性的变化: computed里面的方法调用的时候不需要加(),并且里面的方法必须要有一个返回值: computed里面的方法不是通过事件 ...

  3. vue中computed/method/watch的区别

    摘要:本文通过官方文档结合源码来分析computed/method/watch的区别. Tips:本文分析的源码版本是v2.6.11,文章中牵涉到vue响应式系统原理部分,如果不是很了解,建议先阅读上 ...

  4. vue中methods,computed,filters,watch的总结

    08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...

  5. computed 与methods , watched 的区别

    computed 与watched 的区别: 异步请求 数据变化 使用watched ,计算属性不支持异步 计算一个值的结果 用 computed computed 与methods的区别: comp ...

  6. vue computed和methods 计算属性和侦听器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

  8. about use Vue of methods

    methods 处理事件 methods 在vue中处理一些逻辑方面的事情.vue事件监听的方式看上去有点违背分离的传统观念.而实际上vue中所有事件的处理方式和表达式都是严格绑定在当前的视图的vie ...

  9. vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug

    vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...

  10. vue中methods中的方法闭包缓存问题

    vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...

随机推荐

  1. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  2. Docker常用镜像

    Docker,具有快捷方便的特性,机器上不需要安装软件和进行各种配置,拉取镜像,一行命令即可启动服务,不使用时,一行命令关闭容器即可,快捷方便,干净.利索.建议将本地的redis.mysql.kafk ...

  3. C# AddRange为数组添加多个元素的代码

    将代码过程中重要的代码片段做个收藏,下面代码段是关于C# AddRange为数组添加多个元素的代码,希望对小伙伴有所用处.ArrayList ab = new ArrayList();ab.Add(& ...

  4. Shell中echo改变输出显示样式

    普通输出: echo '------------------------------------------------------' 输出的是系统默认的颜色和字体: 加上一些样式,看效果: echo ...

  5. 牛客网 272B Xor Path(树上操作)

    题目链接:Xor Path 题意:每个顶点的点权为Ai,任意两点路径上点权异或和为Path(i,j),求所有Path(i,j)和. 题解:考虑每个顶点被用到的次数,分以下三种情况: 1.本身和其他顶点 ...

  6. 给dataframe添加一列索引

    测试数据自己瞎编的 需求:给现在df数据添加一列sid,要求这一列是和stock一一对应的整数 代码如下: import pandas as pd test_data = {'stock': ['AA ...

  7. 论decltype和auto的区别

    论decltype和auto的区别   decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...

  8. 标签传播算法(Label Propagation Algorithm, LPA)初探

    0. 社区划分简介 0x1:非重叠社区划分方法 在一个网络里面,每一个样本只能是属于一个社区的,那么这样的问题就称为非重叠社区划分. 在非重叠社区划分算法里面,有很多的方法: 1. 基于模块度优化的社 ...

  9. TensorFlow windows 安装(base anaconda)

    Python conda安装之后(19年默认是python3.7) 1.降级到python3.6 2.查看python版本 3.安装tensorflow

  10. cannot update the cursor rep,since it is read-only

    操作DBF文件,开发机器读写都OK,但部署到服务器上后报:cannot update the cursor rep,since it is read-only 网上寻找解决方案英文答案比较多,也没有给 ...