1. computed(计算属性)

  计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

  eg:

<p>computed={{sum}}</p>
computed: {
sum: function () {
console.log('这是cpmputed实现的a+b处理')
return Number(this.a) + Number(this.b)
}
}

  注意:当页面多次调用sum,也只会在控制台打印一次日志:'这是cpmputed实现的a+b处理',除非改变 a 或者 b 的值。

2. methods(方法)

  methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
  eg:

<p>methods={{sums()}}</p>
methods: {
sums(){
console.log('这是methods实现的a+b处理')
return Number(this.a) + Number(this.b)
}
}

  注意:当页面多次调用sum,每调一次控制台打印一次日志:'这是mthods实现的a+b处理'。

3. watch(侦听属性)

  一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名、路由,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

  eg:

watch: {
a: function (val) {
console.log('这是watch a 的处理')
this.c = Number(val) + this.b
},
b: function (val) {
console.log('这是watch b 的处理')
this.c = Number(val) + this.a
}
}

  注意:Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。当你有一些数据需要随着其它数据的变动而变动时,很容易滥用 watch。 然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

完整 js 如下:

<script>
export default {
data () {
return {
a: 1,
b: 2,
c: 3
}
},
computed: {
sum: function () {
console.log('这是cpmputed实现的a+b处理')
return Number(this.a) + Number(this.b)
},
c: function () {
console.log('这是cpmputed实现的a+b处理')
return Number(this.a) + Number(this.b)
}
},
methods: {
sums () {
console.log('这是methods实现的a+b处理')
return Number(this.a) + Number(this.b)
}
},
created () {
},
watch: {
a: function (val) {
console.log('这是watch a 的处理')
this.c = Number(val) + this.b
},
b: function (val) {
console.log('这是watch b 的处理')
this.c = Number(val) + this.a
}
}
}
</script>

Vue methods,watch,computed的区别的更多相关文章

  1. Vue method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...

  2. Vue methods和computed

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

  3. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

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

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

  5. vue中methods、computed、watch区别

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

  6. vue methods computed watch区别

    一.methods和computed computed是计算属性,methods是方法. html: <p>Reversed message: "{{ reversedMessa ...

  7. Vue中method与computed的区别

    为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且 ...

  8. vue实例属性之methods和computed

    我们可以把同一函数放在methods或者computed中,区别在于computed有缓存,计算属性只有在它的相关依赖发生改变时才会重新求值,即数据改变才会执行函数.而methods每当触发重新渲染时 ...

  9. Vuejs中关于computed、methods、watch的区别。

    Vue.js在模板表达式中限制了,绑定表达式最多只能有一条表达式,但某些数据需要一条以上的表达式运算实现,此时就可以将此数据放在计算属性(computed)当中. Vuejs中关于computed.m ...

随机推荐

  1. 【一起学源码-微服务】Nexflix Eureka 源码五:EurekaClient启动要经历哪些艰难险阻?

    前言 在源码分析三.四都有提及到EurekaClient启动的一些过程.因为EurekaServer在集群模式下 自己本身就是一个client,所以之前初始化eurekaServerContext就有 ...

  2. Hadoop以及组件介绍

    一.背景介绍 在接触过大数据相关项目的时候常常都会听到Hadoop这个东西,简单来说,他是一个用分布式计算来处理大数据的开源软件,下面包含了许多的组件和子项目,这篇文章将会介绍Hadoop的原理以及一 ...

  3. 23.python虚拟环境配置

    1.安装 virtualenvwrapper-win pip3 install virtualenvwrapper-win 2.然后使用workon查看是否安装成功(workon是简化操作的神级命令之 ...

  4. C#调用Fortran生成的DLL的方法报内存不足

    最近在研究一个程序,公司给的,程序是VB写的,程序里面还有一个计算的模型,用Fortran语言写的. 在调试到这个模型里面的方法时报错,说是内存不足,于是就在网上查找方法,看了两篇博客之后问题解决了. ...

  5. 越来越清晰的TFRecord处理图片的步骤

    # 首先是模块的导入 """ os模块是处理文件夹用的 PIL模块是用来处理图片的 """ import tensorflow as tf ...

  6. python封装简介

    1.效果图: 对比一: 对比二: 2.学习来源代码: # 封装是面向对象的三大特性之一 # 封装指的是隐藏对象中一些不希望被外部所访问到的属性或方法 # 如何隐藏一个对象中的属性? # - 将对象的属 ...

  7. Spring Boot2 系列教程 (十五) | 服务端参数校验之一

    估计很多朋友都认为参数校验是客户端的职责,不关服务端的事.其实这是错误的,学过 Web 安全的都知道,客户端的验证只是第一道关卡.它的参数验证并不是安全的,一旦被有心人抓到可乘之机,他就可以有各种方法 ...

  8. 来自PTA Basic Level的三只小野兽

    点我阅读原文 最近利用闲暇时间做了一下 PTA Basic Level[1] 里的题,里面现在一共有 95 道题,这些题大部分很基础,对于刷倦了 leetcode 的小伙伴可以去里面愉快的玩耍哦. 这 ...

  9. 关于neo4j初入门(4)

    关于admin管理员 数据库备份和恢复 Neo4j数据库备份 步骤1 -点击“Neo4j Community”,如下图所示 Windows“开始”按钮>> "All Progra ...

  10. 提高开发效率的一些ipython技巧

    目录 一.显示ipython快速参考 二.书签功能 三.查看帮助或信息 四.执行python程序 五.执行剪贴板中的代码 六.与操作系统交互 七.测试代码执行时间 八.性能分析 九.matplotli ...