前面两篇介绍了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,具体参考computed篇
  • 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的使用入门详解-关联和区别的更多相关文章

  1. vue2.x版本中computed和watch的使用入门详解-computed篇

    前言 在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作. 基础使用 在computed中,声 ...

  2. vue2.x版本中computed和watch的使用入门详解-watch篇

    前言 watch顾名思义,属于vue2.x版本中,监听和观察组件状态变化的钩子函数,常见的应用场景有监听路由变化,以及父组件传递给子组件的props数据的变化等 基本使用 在使用watch的时候,需要 ...

  3. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  4. 在 IntelliJ IDEA 中配置 JSF 开发环境的入门详解

    JSF 作为 JavaEE 官方标准,在了解并掌握其基本开发技术后,对于功能要求较高.业务流程复杂的各种现代 Web 应用程序开发将会成为非常合适且强大的高效率开发利器.JSF 的开发环境搭建涉及到在 ...

  5. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  6. SVN组成中trunk,branches and tags功能用法详解

    SVN组成中trunk,branches and tags功能用法详解  我相信初学开发在SVN作为版本管理时,都估计没可能考虑到如何灵活的运用SVN来管理开发代码的版本,下面我就摘录一篇文章来简单说 ...

  7. opencv中 int main(int argc,char* argv[])详解

    opencv中  int main(int argc,char* argv[])详解 argc是命令行总的参数个数     argv[]是argc个参数,其中第0个参数是程序的全名,以后的参数     ...

  8. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  9. UIViewController中各方法调用顺序及功能详解

    UIViewController中各方法调用顺序及功能详解 UIViewController中loadView, viewDidLoad, viewWillUnload, viewDidUnload, ...

随机推荐

  1. v79.01 鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上) | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(用户态锁篇) | 如何使用快锁Futex(上) 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁) ...

  2. 部署 Docker Registry 并配置认证登录

    文章目录 搭建 Docker Registry 创建本地映射目录 启动 Docker Registry 配置 Docker Registry 配置 Docker Registry 认证 启动带认证的 ...

  3. JMM之Java中锁概念的分类总结

    在Java的并发编程中不可避免的涉及到锁.从不同维护可以将锁进行不同的分类,如下: 1.乐观锁和悲观锁(根据读写操作的比例划分) 乐观锁是一种乐观思想,即认为读多写少,遇到并发写的可能性低,每次去拿数 ...

  4. netty系列之:channel,ServerChannel和netty中的实现

    目录 简介 channel和ServerChannel netty中channel的实现 AbstractChannel和AbstractServerChannel LocalChannel和Loca ...

  5. C++ 派生类函数重载与虚函数继承详解

    目录 一.作用域与名字查找 1.作用域的嵌套 2.在编译时进行名字查找 3.名字冲突与继承 4.通过作用域运算符来使用隐藏的成员 二.同名函数隐藏与虚函数覆盖 1.几种必须区分的情况 2.一个更复杂的 ...

  6. Zookeeper应用场景和ZAB协议

    Zookeeper应用场景 数据发布/订阅(配置中心) 我们平常的开发过程中,经常会碰到这样的需求:系统中需要一些通用的配置信息,如一些运行时的开关.前端需要展示的通知信息.数据库配置信息等等.这些需 ...

  7. Winfrom中关于toolStrip工具栏中按钮背景的设置

    在ToolStrip中可以存放很多种控件,一般来说,主要使用的是Button和DropDownButton,通常情况下,Button需要设置图片和文字,网上找了很多个方法都不太靠谱,自己试验了下,下面 ...

  8. CentOS安装时,软件选择(Software Selection)项介绍

    要指定软件包将被安装,选择软件时选择安装摘要屏幕.包组分为基础环境.这些环境是预先定义的一组具有特定用途的软件包:例如,在虚拟化主机环境中包含的一组所需的系统上运行的虚拟机软件程序包.只有一个软件环境 ...

  9. 解决矩池云GPU显存未释放问题

    很多用户反馈说终止程序之后,显存依然被占用,这里我们提供了两种解决方案,帮助用户解决这个问题. nvidia-smi查看 我们可以先用如下命令 nvidia-smi 查看一下当前GPU进程情况. _ ...

  10. mysql中MyISAM与InooDB存储引擎的区别

    MyISAM存储引擎特点 不支持事务 表级锁定 读写相互阻塞,写入不能读,读时不能写 只缓存索引 不支持外键约束 不支持聚簇索引 读取数据较快,占用资源较少 不支持MVCC(多版本并发控制机制)高并发 ...