计算属性 computed
指通过计算得来的属性，用于监听属性的变化
computed里面的函数调用的时候 不需要加（）
方法里必须有一个返回值 return
computed中的函数不会通过事件去触发的，而是当属性（必须是data中的属性）发生改变的时候，computed里面的函数就自然而然的去触发
computed最大的特点就是 当属性状态未发生改变的时候。当前的函数会从缓存中读取

监听属性 watch
用于监听每一个属性的变化
watch这个对象里面都是函数，函数的名称一定是 data中属性的名称 。 watch中函数是不需要调用的
我们可以在watch中进行新旧值的判断 从而来减少虚拟DOM的渲染
只要当前属性发生改变就会触发 与之对应的函数
若我们需要对对象进行监听 ， 需要将属性设置为 key 值 ， val 为一个对象 且对象中有两个参数必写 ， 一个数handle函数， 一个为 deep = true 从而实现深度监听

computed 与 watch 区别
1 computed中的函数调用是不需要（）的 ， 而watch是不需要进行函数调用的
2. 当属性没有发生改变的时候 ，computed中的函数会从 缓存 中读取值 当属性发生改变的时候，watch中的函数会接受两个参数，一个代表 新值，另一个代表旧值
3. watch 若需要监听对象，必须使用 深度监听
4. computed 中的函数必须要带有返回值 return
5. 命名: computed 中的函数命名是任意的 ， watch中的函数名必须是 data 中参数的名

vue中的computed 与 watch的更多相关文章

  1. Vue 中的 computed 和 methods

    Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.

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

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

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

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

  4. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  5. 浅尝 Vue 中的 computed 属性 与 watch

    对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...

  6. Vue中的computed属性

    阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...

  7. 八、Vue中的computed属性

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  8. 十三、Vue中的computed属性

    以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...

  9. Vue中的computed和watch

    看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...

  10. vue中的computed和watch区别

    在vue.js官方文档中看到computed和watch获取全名的一个例子: var var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', ...

随机推荐

  1. 利用mysql中if函数排序

    格式:IF(Condition,A,B) 意义:当Condition为TRUE时,返回A:当Condition为FALSE时,返回B. 作用:作为条件语句使用. select if(`from_use ...

  2. mongodb 在 linux 中的安装和简单使用

    一.环境介绍 1．mongodb版本: mongodb-linux-x86_64-rhel70-3.2.22  # 点击下载2．linux版本: Ubuntu 18.04.2 LTS 二.安装1．上传 ...

  3. MTK6261之检测是否插了T卡

    T卡的更目录可用SRV_FMGR_CARD_DRV 其宏定义如下: #define SRV_FMGR_CARD_DRV FS_GetDrive(FS_DRIVE_V_REMOVABLE, 1, FS_ ...

  4. Linux-day-1

    1. ls    作用:列出文件信息,默认为当前目录下 常用选项:         -a: 列出所有的文件,包括所有以.开头的隐藏文件         -d: 列出目录本身,并不包含目录中的文件    ...

  5. Linux之bash的变量

    1. 变量的显示,echo echo $变量   或    echo ${变量} eg. echo $HOME   或   echo ${HOME} 2. 变量的设置 变量的设置规则: (1)变量与变 ...

  6. flutter 布局简介

    import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @override Widget ...

  7. GUI学习之二十二——QRubberBand学习总结

    今天学习一种全新的输入控件——QRubberBand()控件(橡皮筋选中) 一.描述 QRubberBand()提供了一个矩形或西安来只是选择或边界的效果(就像在桌面上点击鼠标后拖拽拉出来的框一样), ...

  8. amazon-aws 使用 SNS 发送短信

    jar-maven <!-- https://mvnrepository.com/artifact/com.amazonaws/aws-java-sdk-sns --> <depen ...

  9. 【GDOI 2016 Day1】疯狂动物城

    题目 分析 注意注意:码农题一道,打之前做好心理准备. 对于操作1.2,修改或查询x到y的路径,显然树链剖分. 对于操作2,我们将x到y的路径分为x到lca(x,y)和lca(x,y)到y两部分. 对 ...

  10. darknet-yolov3模型预测框size不正确的原因

    问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...