计算属性 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. 长沙理工大学第十二届ACM大赛-重现赛 B 日历中的数字 (实现)

    链接:https://ac.nowcoder.com/acm/contest/1/B来源:牛客网 全屏查看题目   时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他 ...

  2. 计蒜客 蓝桥模拟 G. 数列求值

    递归式移项得Ai+1 = 2Ai + 2Ci - Ai-1; 1.A2 = 2A1 + 2C1 - A0; 2.A3 = 2A2 + 2C2 - A1; . . . n.An+1 = 2An + 2C ...

  3. 从输入URL到页面加载到底发生了什么

    很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...

  4. NOIP2017 D2T2 宝藏

    洛谷P3959 其实就是一道暴力搜索题……只是需要一个状态压缩的剪枝比较难想而已 这根本不叫dfs!只是一个递归而已……开始就被dfs坑了 思路: 首先一个基本的预处理 数据范围n≤12,m≤5000 ...

  5. kali安装docker以及配置阿里云镜像加速

    1.需求 最近需要用到docker比较多,遂安装使用下,第一次用docker搭建测试环境,不得不说,docker真香.期间遇到了比较多奇奇怪怪的问题,网上的教程也比较多比较乱,遂记录一下. 2.安装d ...

  6. [每日一讲] Python系列：数字与运算符

    数字(数值)型 Python 数字数据类型用于存储数值.数据类型是不可变(immutable)的,这就意味着如果改变数字数据类型的值,将重新分配内存空间. Python 支持三种不同的数值类型: 整型 ...

  7. elementui多个文件上传问题

    我认为绑定一个值 然后把值改变不同的名字即可

  8. js加密php解密（CryptoJS）碰到的坑

    今天做了一个功能,需要js传密码到php文件,对js密码 进行判断,为想为这个传输过程进行解密,参考了网上的一个方法(这个方法我只是使用了,并没有太深了解0.0) 首先要引入3个js文件 (在网上可搜 ...

  9. 果蝇优化算法（FOA）

    果蝇优化算法(FOA) 果蝇优化算法(Fruit Fly Optimization Algorithm, FOA)是基于果蝇觅食行为的仿生学原理而提出的一种新兴群体智能优化算法. 果蝇优化算法(FOA ...

  10. 把图片画到画布上，适应PC和移动端

    画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...