vue2.x版本中computed和watch的使用入门详解-关联和区别
前面两篇介绍了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的介绍
具体用法可以在官网中:
$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的使用入门详解-关联和区别的更多相关文章
- vue2.x版本中computed和watch的使用入门详解-computed篇
前言 在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作. 基础使用 在computed中,声 ...
- vue2.x版本中computed和watch的使用入门详解-watch篇
前言 watch顾名思义,属于vue2.x版本中,监听和观察组件状态变化的钩子函数,常见的应用场景有监听路由变化,以及父组件传递给子组件的props数据的变化等 基本使用 在使用watch的时候,需要 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- 在 IntelliJ IDEA 中配置 JSF 开发环境的入门详解
JSF 作为 JavaEE 官方标准,在了解并掌握其基本开发技术后,对于功能要求较高.业务流程复杂的各种现代 Web 应用程序开发将会成为非常合适且强大的高效率开发利器.JSF 的开发环境搭建涉及到在 ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- SVN组成中trunk,branches and tags功能用法详解
SVN组成中trunk,branches and tags功能用法详解 我相信初学开发在SVN作为版本管理时,都估计没可能考虑到如何灵活的运用SVN来管理开发代码的版本,下面我就摘录一篇文章来简单说 ...
- opencv中 int main(int argc,char* argv[])详解
opencv中 int main(int argc,char* argv[])详解 argc是命令行总的参数个数 argv[]是argc个参数,其中第0个参数是程序的全名,以后的参数 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- UIViewController中各方法调用顺序及功能详解
UIViewController中各方法调用顺序及功能详解 UIViewController中loadView, viewDidLoad, viewWillUnload, viewDidUnload, ...
随机推荐
- Unreal ListView使用篇
应用 ListView,在Unreal UI界面开发中用途非常广泛,基本只要你使用列表,就得需要用ListView.比如排行榜100个列表,界面上只需要显示出10个,我们肯定不能生成100个ui实例, ...
- 我是如何破解你的WINDOWS密码的 ?(2)
介绍 在这个系类的第一部分中,我们揭示了windows创建和储存密码的机制.我们也涉猎了一点两种加密方法的弱点和破解的方法.在这系列的第二篇也是最后一篇文章中,我会实战用网上免费的工具一步一步的来破解 ...
- 通过shell脚本统计elasticsearch indices每天的数量以及大小
前情提要: 最近elasticsearch集群总出问题,之前虽然修复了,现在又出现新的问题,于是PM要求拉取elasticsearch每天建立的索引有多少,索引有多大,需要对机器进行评估 客户现场无法 ...
- shell脚本之判断当前内核主版本是否为3,且次版本是否大于10
[root@localhost ~]# cat uname.sh #!/bin/bash main=`uname -r | awk -F . '{print $1}'` minor=`uname -r ...
- 三、Mybatis多表关联查询应用
一对一查询 实现语句:select * from neworder o, user u where o.uid = u.id 实体Order: 接口: 配置: 测试: 一对多查询 实现语句:selec ...
- Ansible-DevOps
Ansible-DevOps Ansible 搭建 CentOS7 yum install epel-release yum search ansible yum install ansible -y ...
- windev中的内存机制及其与C语言中的内存指针相似性(一)
windev中的内存机制,是初入windev世界必须要越过的一道高山,以下我的理解和经验未必都对,如有错误或遗漏,以后再纠正或补充!另外,以下内容,咱先谈应用,再说对机制的认识和理解. 一.新建表单, ...
- 【C# 调试】.net中的 .pdb文件是什么,有什么用
mscn:在 Visual Studio 调试器(C#)中指定符号 (.pdb) 和源文件 PDB全称Program Database,程序数据库 ( .pdb) 文件(也称为符号文件)将项目源代码中 ...
- 【C# 程序集】C# assembly和module 根本区别
相同点 两者都有:manifest.metadata.IL 不同点 1.assembly 有main程序函数.module只能附属于程序集,程序集可以拥有多个. 2.metadata的差异 程序集特有 ...
- C# 事件Event(个人整理)
内容来源:MSN:https://docs.microsoft.com/zh-cn/dotnet/csharp/event-pattern 操作符详解(上) https://www.youtube ...