首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同;

一、computer

当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。

<p id="app">  {{fullName}}  </p>

<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。

计算属性默认只有getter,可以在需要的时候自己设定setter:

// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

这个时候在控制台直接运行vm.fullName = ‘bibi wang’,相应的firstName和lastName也会改变。

适用场景:

二、watch

watch和computed很相似,watch用于观察和监听页面上的vue实例,当然在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。直接引用文档例子

var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。

适用场景:

三、methods

方法,跟前面的都不一样,我们通常在这里面写入方法,只要调用就会重新执行一次,相应的有一些触发条件,在某些时候methods和computed看不出来具体的差别,但是一旦在运算量比较复杂的页面中,就会体现出不一样。

需要注意的是,computed是具有缓存的,这就意味着只要计算属性的依赖没有进行相应的数据更新,那么computed会直接从缓存中获取值,多次访问都会返回之前的计算结果。

总结:

在computed和watch方面,一个是计算,一个是观察,在语义上是有区别的。

计算是通过变量计算来得出数据。而观察是观察一个特定的值,根据被观察者的变动进行相应的变化,在特定的场景下不能相互混用,所以还是需要注意api运用的合理性和语义性。

vue中methods、watch、computed之间的差别对比以及适用场景的更多相关文章

  1. vue中methods、computed、watch区别

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

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

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

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

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

  4. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  5. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  6. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  7. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  8. Vue中method与computed的区别

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

  9. Vue中使用watch computed

    watch:监听属性,来监听dta中的数据变化  或者route的变化 computed:计算属性, <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. 《JavaScript高级程序设计(第三版)》-3

    相等操作符 相等和不相等 在转换不同的数据类型时,相等和不想等操作符遵循下面基本规则: 如果有一个操作符数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1: 如果 ...

  2. Rabbitmq -- direct

    一.前言 RabbitMQ还支持根据关键字发送,即:队列绑定关键字,发送者将数据根据关键字发送到消息exchange.direct类型的Exchange路由规则也很简单,它会把消息路由到那些bindi ...

  3. zTree使用技巧与详解

    zTree--Jquery 树插件,是在后台管理页面中常使用到的插件. 使用效果图: 核心代码: zTree配置: var setting = { data:{simpleData:{enable:t ...

  4. 【Java】将字符串转化为整数

    前几天面试遇到这个问题:在Java中如何将字符串转化为整数,当时too young too naive,随便回答了一下.今天跑去看Java源码中paresInt函数的写法,Oh my god!其实不看 ...

  5. Codechef Dynamic Trees and Queries

    Home » Practice(Hard) » Dynamic Trees and Queries Problem Code: ANUDTQSubmit https://www.codechef.co ...

  6. CF821 C. Okabe and Boxes 栈模拟

    Link 题意:给出操作,如果当前出栈操作使得出栈序列非顺序,可以在此之前自由排序栈中所有数,问最少排几次. 思路:已经出栈到第x个元素时,每次需要排序的操作后,能够保证前x元素出栈有序,否则说明该操 ...

  7. JVM学习十:JVM之垃圾收集器及GC参数

    接近两个月左右没有写博客,主要是因为小孩过来后,回家比较忙,现在小孩端午送回家了,开始继续之前的JVM学习之路,前面学习了GC的算法和种类,那么本章则是基于算法来产生实际的用途,即垃圾收集器. 一.堆 ...

  8. 给你灵感!21个精美的 iOS APP 网站设计欣赏

    iOS 吹起了轰轰烈烈的扁平化设计风格,而做为承载 App 宣传重任的网页,整体设计风格的变迁如何?是否也如iOS的设计风格改革一样彻底的翻转?还是如往常一直深耕成熟的设计风格? Spendee Fo ...

  9. ADO.NET中带参数的Sql语句的陷阱

    1.使用Parameter //利用构造函数方式 ,不推荐这样写 Parameter p =new Parameter("@id",值); cmd.Parameters.Add(p ...

  10. 浅析 Spring Aop

    aop也是Spring里比较重要的一个点,最近把源码看了下,这里总结一下 使用上主要就下面的点注意下: 相关的Annotaion Around Before After AfterReturning ...