Vue 中的 computed 和 watch 的区别详解

目录
  • computed
    • 注意
    • 应用场景
  • watch
  • 总结

computed

computed 看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算。

1）下面是一个比较经典简单的案例

<template>
  <div class="hello">
      {{fullName}}
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
}
</script>

注意

在 Vue 的 template 模板内（{{}}）是可以写一些简单的js表达式的很便利，如上直接计算 {{this.firstName + ' ' + this.lastName}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而 computed 的设计初衷也正是用于解决此类问题。

应用场景

适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为 computed

watch

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

<template>
  <div class="hello">
      {{fullName}}
      <button @click="setNameFun">click</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    methods: {
        setNameFun() {
            this.firstName = "大";
            this.lastName = "熊"
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    },
    watch: {
        firstName(newval,oldval) {
          console.log(newval)
          console.log(oldval)
        }
    }
}
</script>

总结

  • 1.如果一个数据依赖于其他数据，那么把这个数据设计为 computed
  • 2.如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化

到此这篇关于Vue 中的 computed 和 watch 的区别详解的文章就介绍到这了,更多相关Vue computed 和 watch 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue watch原理源码层深入讲解

    Vue watch原理源码层深入讲解

    目录 添加依赖 触发依赖 总结 由于我在从源码看vue(v2.7.10)的computed的实现原理中详细的讲解过computed的实现,本篇跟computed的原理类似.我就带大家简单分析一下. 添加依赖 代码如下: <template> <div> {{a}} <button @click="addModule">新增</button> </div> </template> <script> exp

  • vue3中watch和watchEffect实战梳理

    vue3中watch和watchEffect实战梳理

    目录 前言 watch watch监听单个数据 watch监听多个数据 watch监听对象 watch监听对象的某一个值 watchEffect watchEffect副作用 停止监听 区别 前言 watch和watchEffect都是vue3中的监听器,但是在写法和使用上是有区别的,这篇文章主要是介绍一下watch和watchEffect的使用方法以及他们之间的区别. watch watch监听单个数据 <template> <input type="text" v

  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    目录 watch 侦听器使用. 侦听器监听 reactive 监听多个参数执行各自逻辑 监听多个参数执行相同逻辑 上一节我们简单的介绍了一下vue3 项目中的计算属性,这一节我们继续 vue3 的基础知识讲解. 这一节我们来说 vue3 的侦听器. 学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,换汤不换药的东西. 侦听器是常用的 Vue API 之一,它用于监听一个数据并在数据变动时做一些

  • Vue3中watch监听使用详解

    Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • Vue3源码分析侦听器watch的实现原理

    目录 watch 的本质 watch 的函数签名 侦听多个源 侦听单一源 watch 的实现 watch 函数 source 参数 cb 参数 options 参数 doWatch 函数 doWatch 函数签名 初始化变量 递归读取响应式数据 定义清除副作用函数 封装 scheduler 调度函数 设置 job 的 allowRecurse 属性 flush 选项指定回调函数的执行时机 创建副作用函数 执行副作用函数 返回匿名函数,停止侦听 总结 watch 的本质 所谓的watch,其本质就

  • 使用Vue逐步实现Watch属性详解

    使用Vue逐步实现Watch属性详解

    目录 watch 初始化watch deep.immdediate属性 结语 watch 对于watch的用法,在Vue文档 中有详细描述,它可以让我们观察data中属性的变化.并提供了一个回调函数,可以让用户在属性值变化后做一些事情. watch对象中的value分别支持函数.数组.字符串.对象,较为常用的是函数的方式,当想要观察一个对象以及对象中的每一个属性的变化时,便会用到对象的方式. 下面是官方的一个例子,相信在看完之后就能对watch的几种用法有大概的了解: var vm = new

  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    目录 一.侦听器watch 1.1.初识侦听器watch 1.2.Vue的data的watch 1.3.Vue的watch侦听选项 一.侦听器watch (思维导图不太完善,因为是按照自己看懂的方式记的,如有错误,还请指正) 1.1.初识侦听器watch watch:观看,监视 那么什么是侦听器watch呢 开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中: 当数据变化时,template会自动进行更新来显示最新的数据: 但是在某些情况下,我们希望在

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • vue中的v-if和v-show的区别详解

    v-if和v-show的区别是前端面试中常问的基础知识点,v-if.v-show顾名思义就是用来判断视图层展示效果的.那么具体是怎么展示呢?v-if和v-show的区别又是什么呢? 首先我们可以来看一下Vue中文社区说明文档的介绍: Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示: 在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解: <div class="tc" v-if="pload && lis

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • Vue路由钩子之afterEach beforeEach的区别详解

    vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path: '/cart', name: 'cart', component: cart, meta :{ title: "购物车"} //用于给定网页名 } ] vue-router 的路由跳转的方法 第一种 : 编程式的导航 <router-link to="/" tag

  • VUE中的mapState和mapActions的使用详解

    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝... 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapActions主要是用于同步定义的方法,一般两者是结合使用,mapState同步项目中定义的全局的变量或者对象,mapActions是用于变量或者对象为空时,调用方法定义的全局方法获取. mapActions

  • C++ 中指针和引用有什么区别详解

    C++ 中指针和引用有什么区别详解 1.从内存上来讲  系统为指针分寸内存空间,而引用与绑定的对象共享内存空间,系统不为引用变量分配内容空间. 2指针初始化以后可以改变指向的对象,而引用定义的时候必须要初始化,且初始化以后不允许再重新绑定对象. 3.所以引用访问对象是直接访问.指针访问对象是间接访问. 4.如果pa是指针,那么*pa就是引用了. 但是两者在作为形参的时候非常相似,区别是指针拷贝副本,引用不拷贝.程序如下: #include<stdio.h> void pt(int * pta,

  • Python中set与frozenset方法和区别详解

    set(可变集合)与frozenset(不可变集合)的区别: set无序排序且不重复,是可变的,有add(),remove()等方法.既然是可变的,所以它不存在哈希值.基本功能包括关系测试和消除重复元素. 集合对象还支持union(联合), intersection(交集), difference(差集)和sysmmetric difference(对称差集)等数学运算. sets 支持 x in set, len(set),和 for x in set.作为一个无序的集合,sets不记录元素位

  • 基于js中style.width与offsetWidth的区别(详解)

    作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度. 但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而sty

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

随机推荐