计算属性 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. 继续死磕python

    一.数据运算 算术运算 比较运算 赋值运算 逻辑运算 成员运算 身份运算 位运算 其中左右移运算是逻辑左右移即缺失位补0,而算数右移缺失补符号位(注意逻辑运算都是补码运算即都取补码再运算,然后结果也是 ...

  2. Ubuntu 16.04安装N卡驱动、cuda、cudnn和tensorflow GPU版

    安装驱动 最开始在英伟达官网下载了官方驱动,安装之后无法登录系统,在登录界面反复循环,用cuda里的驱动也出现了同样的问题.最后解决办法是把驱动卸载之后,通过命令行在线安装驱动. 卸载驱动: sudo ...

  3. STM32 常用词汇释义

    1.AF——Alternate function   复用功能: 2.NVIC——Nested Vectored Interrupt Controller   内嵌向量中断控制器 3.ISER[8]— ...

  4. VB TreeView控件使用详解(有趣的示例)

    第一小时:学习直接用代码将数据填充到树控件中. 为什么要先学习直接用代码将数据填充到树控件中?因为这种方法是最简单的,代码也最容易理解,学习树控件,先将这个学会,已经掌握了一半,所以先不要急着想怎么将 ...

  5. JVM 常量池、运行时常量池、字符串常量池

    常量池: 即class文件常量池,是class文件的一部分,用于保存编译时确定的数据. 保存的内容如下图: D:\java\test\out\production\test>javap -ver ...

  6. Vscode窗口被覆盖

    用Vscode用的好好的,突然就发现窗口被覆盖了 解决办法如下:1.ctrl+shift+p 快捷键打开如下界面, 2.接着在搜索框中输入settings,点击首先项:打开设置(json) 3.再se ...

  7. Flask之 请求，应用 上下文源码解析

    什么是上下文? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是没有外部变量的.一旦你的一段程序有了外部变量,这段程序就不完整,不能独立运行.你为了使他们运行,就要给所有的外部变量一个一个写 ...

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

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

  9. 【hackerrank】Placements

    题目如下: You are given three tables: Students, Friends and Packages. Students contains two columns: ID  ...

  10. LeetCode--062--不同路径(python)

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 问总共有多 ...