vue2.x版本中computed和watch的使用及关联和区别

目录
  • 前言
  • 区别
  • 补充
  • 结语

前言

前面篇介绍了computed和watch的基本使用vue2.x版详解computed和watch的使用

两者的区别，继续通过代码实现的方式具体去了解

html

<li>最开始的value值：{{ name }}</li>
<li>computed计算后的值：{{ computedName }}</li>
<li>
	watch修改后的值：{{ watchName }}
	<input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber">修改名字</button></li>

JS

data() {
	return {
		name: "zhangsan",
		watchName: "张三",
	};
},
watch: {
	watchName(newVal, oldVal) {
		console.log("旧的值---->", newVal);
		console.log("新的值---->", oldVal);
		console.log("watch下所有的状态都会监听this.name---->", this.name);
		console.log(
			"watch下所有的状态都会监听this.computedName---->",
			this.computedName
		);
		this.watchName = newVal;
	},
},
computed: {
	computedName: function (currentThis) {
		console.log(
			"和计算属性无关的状态发生更改时,不会执行，只要依赖的状态发生更改，缓存才会更新",
			currentThis
		);
		return `依赖于name，：${this.name}`;
	},
},
methods: {
	handleNumber() {
		this.name = "lisi";
	},
},

区别

依赖值： computed依赖于所使用的状态，类似在data中声明的name,
而watch中监听的值不依赖于某个值，只要组件状态发生更改，监听的值就实时获取最新值,
computed的实现使用的是getter和setter获取值，属于同步操作。

使用方法：

  • computed最后需要进行return处理返回值，并且可以使用更深层次的getter和setter，具体参考vue2.x版详解computed和watch的使用
  • watch除了callback回调函数外，还有两个属性值为布尔值的属性，用于首次绑定immediate，以及对对象的深度监听deep
  • 两者相同点就是可以通过方法参数获取新值，结合其他状态处理相关的业务

补充

在官方文档中，除了在组件中使用的watch外，官方文档中，还有对于示例中watch的介绍

具体用法可以在官网中：

https://cn.vuejs.org/v2/api/#vm-watch

$watch基础使用–来自官方文档例子

官方文档提示：

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})
// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

需要注意的是，如果使用vm.$watch，那么使用unwatch有助于我们取消对某个状态的监听，减少不必要的监听和交互开销

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

结语

花了两个篇幅去介绍watch和computed的使用方法，以及这两个钩子函数的区别，在实际的企业项目开发中，使用的场景和次数较多，所以尽量写的稍微详细一些，同时也将笔记的代码放在了开源仓库，希望对大家在开发vue2.x的项目中有所帮助

到此这篇关于vue2.x版本中computed和watch的使用及关联和区别的文章就介绍到这了,更多相关vue2.x computed与watch 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中computed及watch区别实例解析

    计算属性computed : 1. 支持缓存,只有依赖数据发生改变,才会重新进行计算 2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed5.如果computed属性属性值是函数,那么默认会走get方法:

  • Vue中watch、computed、updated三者的区别及用法

    1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediat

  • vue.js中methods watch和computed的区别示例详解

    vue.js中methods watch和computed的区别示例详解

    目录 前言 介绍 一.作用机制上 二.从性质上 三.watch和computed的对比 四.methods不处理数据逻辑关系,只提供可调用的函数 五.从功能的互补上看待methods,watch和computed的关系 六.利用computed处理watch在特定情况下代码冗余的现象,简化代码 总结 computed watch 前言 这篇文章主要简述vue中的watch和computer区别,还有methods 首先,先说一下这几个不同在哪里,那当然是长得不一样啦~~~, 哈哈哈哈哈不开玩笑了

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • Vue中computed和watch有哪些区别

    计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,那么默认会走get方法:函数的返回值就是属性的属性

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • Vue中computed、methods与watch的区别总结

    前言 对于那些开始学习Vue的人来说,对于方法.计算属性和观察者之间的区别有点混淆. 尽管通常可以使用它们中的每一个来完成或多或少相同的事情,但了解每个人在哪里胜过其他人还是很重要的. 在这个快速提示中,我们将了解Vue应用程序的这三个重要方面及其用例.我们将通过使用这三种方法中的每一种构建相同的搜索组件来实现这一点. Methods 在一个方法中,或多或少是您所期望的--一个对象属性的函数.您可以使用方法对发生在DOM中的事件作出反应,或者可以从组件中的其他位置调用它们,例如,从计算属性或观察

  • 关于Vue的 watch、computed和methods的区别汇总

    目录 1 前言 2 基础用法 2.1 methods 方法 2.2 computed 计算属性 2.3 watch 侦听器 3 三者的区别 3.1 方法 VS 计算属性 3.2 计算属性 VS 侦听器 1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, watch: {} }) 这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但

  • vue2.x版本中computed和watch的使用及关联和区别

    目录 前言 区别 补充 结语 前言 前面篇介绍了computed和watch的基本使用vue2.x版详解computed和watch的使用 两者的区别,继续通过代码实现的方式具体去了解 html <li>最开始的value值:{{ name }}</li> <li>computed计算后的值:{{ computedName }}</li> <li> watch修改后的值:{{ watchName }} <input type="t

  • 深入浅析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

  • vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

    我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 <template> <div> <div class="row" v-for="RowItem in rows"> <div class="col" v-for="colItem in RowItem.

  • vue3 中 computed 新用法示例小结

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法. 组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue".引入之后 computed 可以传入的参数有两种:回调函数和 options .具体看看它是如何使用

  • 派发器抽离vue2单组件中的大量逻辑技巧

    目录 概述 本质 具体实现 总结 概述 在vue2当中,我们写的逻辑都是options配置对象,比较固定的写法,方法,数据,都对应到各自的配置项当中,但是当一个组件的逻辑变得更加复杂,逻辑也越来越多的时候,这时候,我们一个组件避免不了要写大量的逻辑代码,在2版本中,使用官方推荐的mixin可以解决一个组件逻辑过多的问题,现在记录我在工作用用到的另外方法. 本质 在react中,我们使用redux,会接触到对应的action,reducer,dispatch等等,通过派发对应事件类型,然后触发对应

  • vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题

    vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题

    目录 vue-i18n的9以上版本中@被用作特殊字符处理 解决方法 vue@2.6.14安装vue-i18n报错 peer vue@“^3.0.0“ from vue-i18n@9.1.9 vue-i18n的9以上版本中@被用作特殊字符处理 vue3项目中使用vue-i18n的9以上的版本实现国际化,使用过程中出现报错: 国际化使用 "validation.regExp.name": "仅允许输入字母.数字与_.@字符"报如下错误 Message compilati

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • 低版本中Python除法运算小技巧

    首先要说的是python中的除法运算,在python 2.5版本中存在两种除法运算,即所谓的true除法和floor除法.当使用x/y形式进行除法运算时,如果x和y都是整形,那么运算的会对结果进行截取,取运算的整数部分,比如2/3的运算结果是0:如果x和y中有一个是浮点数,那么会进行所谓的true除法,比如2.0/3的结果是 0.66666666666666663.另外一种除法是采用x//y的形式,那么这里采用的是所谓floor除法,即得到不大于结果的最大整数值,这个运算时与操作数无关的.比如2

  • Python2.6版本中实现字典推导 PEP 274（Dict Comprehensions）

    之前自己也遇到过一次,这段时间在群里也遇到过几次的一个问题 用python2.7写的一段程序,里面用到了字典推导式,但是服务器版本是python2.6,无法运行. 今天查了下关于Dict Comprehensions,在pep274中有明确的说明. http://legacy.python.org/dev/peps/pep-0274/ 复制代码 代码如下: Implementation     All implementation details were resolved in the Pyt

随机推荐