Vue教程(methods,watch及computed的区别)
wxin55 2024-10-31 15:40 9 浏览 0 评论
?本文我们通过案例来介绍下 watch 和 computed 的使用，案例效果如下：
在这里插入图片描述
??如上，该案例就是实现一个简单的名称拼接处理。实现的方式也比较多，本文我们会分别采用三种方式来实现。
一、案例实现
基础页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" > +
<input type="text" > =
<input type="text" >
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
</body>
</html>
1.普通DOM操作实现
??看到上面的效果，相信大家通过普通的dom对象操作都能够实现这个效果，我们也来实现下，如下:
?? 首先我们给三个 input 输入框和 vm实例 做双向绑定
在这里插入图片描述
?? 然后我们给 firstname 和 lastname 的输入框分别绑定 keyup 事件，然后在 vm 实例的 methods 中定义拼接名称的方法
在这里插入图片描述
搞定！效果如下:
在这里插入图片描述
2.watch使用
??接下来我们再来看下通过watch来实现上面的效果.
在这里插入图片描述
?? watch 会监视 data 中指定的数据，当这些数据发生变动的时候会触发对应的 function来处理相关的业务。
??此处可能大家会比较疑惑，watch 需要监视 firstname 和 lastname 这两个信息，而 我们通过 keyup 只需要在 methods 中定义一个方法就可以了，感觉watch 反而没有前面例子中来的方便，那么 watch 的作用还有什么呢？前面的事件监听只能处理DOM元素而针对 路由的变化就无能为力了，所以我们来看下下面这个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
// 创建两个组件
var login = {
template: "<h1>这是个登录组件</h1>"
}
var register = {
template: "<h1>这是个注册组件</h1>"
}
var routerObj = new VueRouter({
routes:[
{ path : "/login" , component : login },
{ path : "/register" , component : register }
]
})
var vm = new Vue({
el: "#app",
data: {},
methods: {},
router: routerObj
})
</script>
</body>
</html>
效果
在这里插入图片描述
??现在我们希望能够在路由变化的时候来捕获到这个行为，并给出对应的响应。这时我们可以监视 vm.$route.path 来处理
在这里插入图片描述
??所以可以如下方式实现
在这里插入图片描述在这里插入图片描述
??watch 监视路由变化的效果搞定~
3.computed使用
?? 最后我们来看下 computed 怎么来实现上面案例的效果的。
在这里插入图片描述
??在 computed 中，可以定义一些 属性，这些属性，叫做 计算属性， 计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把计算属性，当作方法去调用；
计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
计算属性的求值结果，会被缓存起来，方便下次直接使用；如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则不会重新对 计算属性求值；
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname : "",
lastname : ""
},
methods: {} ,
computed: {
'fullname' : function(){
return this.firstname + '-' + this.lastname
}
}
})
</script>
</body>
</html>
二、methods、watch、computed的区别
??最后来看下这三者的区别，具体如下:
元素描述computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用methods方法表示一个具体的操作，主要书写业务逻辑watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体
好了本文就介绍到此~有问题的小伙伴欢迎留言交流哦
https://www.ixiera.com 转发自波哥带你学编程
相关推荐
- ES6中 Promise的使用场景?（es6promise用法例子）
-
一、介绍Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码doSomething(f...
- JavaScript 对 Promise 并发的处理方法
-
Promise对象代表一个未来的值，它有三种状态：pending待定，这是Promise的初始状态，它可能成功，也可能失败，前途未卜fulfilled已完成，这是一种成功的状态，此时可以获取...
- Promise的九大方法（promise的实例方法）
-
1、promise.resolv静态方法Promise.resolve(value)可以认为是newPromise方法的语法糖,比如Promise.resolve(42)可以认为是以下代码的语...
- 360前端一面~面试题解析（360前端开发面试题）
-
1.组件库按需加载怎么做的，具体打包配了什么-按需加载实现：借助打包工具（如Webpack的require.context或ES模块动态导入），在使用组件时才引入对应的代码。例如在V...
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
-
Promise的finally方法是一个非常有用的工具，它无论Promise是成功（fulfilled）还是失败（rejected）都会执行，且不改变Promise的最终结果。它的实现原...
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
-
看了全网手写Promise的，大部分对于新手还是比较难理解的，其中几个比较难的点：状态还未改变时通过发布订阅模式去收集事件实例化的时候通过调用构造函数里传出来的方法去修改类里面的状态，这个叫Re...
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
-
传统Promise就像一台需要手动组装的设备，每次使用都要重新接线。而Promise.withResolvers的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。它解决了三大...
- 手写 Promise（手写输入法 中文）
-
前言都2020年了，Promise大家肯定都在用了，但是估计很多人对其原理还是一知半解，今天就让我们一起实现一个符合PromiseA+规范的Promise。附PromiseA+规范地址...
- 什么是 Promise.allSettled()!新手老手都要会?
-
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的pr...
- 前端面试-关于Promise解析与高频面试题示范
-
Promise是啥，直接上图：Promise就是处理异步函数的API，它可以包裹一个异步函数，在异步函数完成时抛出完成状态，让代码结束远古时无限回掉的窘境。配合async/await语法糖，可...
- 宇宙厂:为什么前端离不开 Promise.withResolvers() ?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。1.为什么需要Promise.with...
- Promise 新增了一个超实用的 API!
-
在JavaScript的世界里，Promise一直是处理异步操作的神器。而现在，随着ES2025的发布，Promise又迎来了一个超实用的新成员——Promise.try()！这个新方法简...
- 一次搞懂 Promise 异步处理（promise 异步顺序执行）
-
PromisePromise就像这个词的表面意识一样，表示一种承诺、许诺，会在后面给出一个结果，成功或者失败。现在已经成为了主流的异步编程的操作方式，写进了标准里面。状态Promise有且仅有...
- Promise 核心机制详解（promise机制的实现原理）
-
一、Promise的核心状态机Promise本质上是一个状态机，其行为由内部状态严格管控。每个Promise实例在创建时处于Pending（等待）状态，此时异步操作尚未完成。当异步操作成功...
- javascript——Promise（js实现promise）
-
1.PromiseES6开始支持，Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。简单说就是处理异步请求的。之所以叫Promise，就是我承诺，如果成功则怎么处理，失败怎...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- ES6中 Promise的使用场景?（es6promise用法例子）
- JavaScript 对 Promise 并发的处理方法
- Promise的九大方法（promise的实例方法）
- 360前端一面~面试题解析（360前端开发面试题）
- 前端面试-Promise 的 finally 怎么实现的?如何在工作中使用?
- 最简单手写Promise，30行代码理解Promise核心原理和发布订阅模式
- 前端分享-Promise可以中途取消啦（promise可以取消吗）
- 手写 Promise（手写输入法 中文）
- 什么是 Promise.allSettled()!新手老手都要会?
- 前端面试-关于Promise解析与高频面试题示范
- 标签列表
-
- hive行转列函数 (63)
- sourcemap文件是什么 (54)
- display none 隐藏后怎么显示 (56)
- 共享锁和排他锁的区别 (51)
- httpservletrequest 获取参数 (64)
- jstl包 (64)
- qsharedmemory (50)
- watch computed (53)
- java中switch (68)
- date.now (55)
- git-bash (56)
- 盒子垂直居中 (68)
- npm是什么命令 (62)
- python中+=代表什么 (70)
- fsimage (51)
- nginx break (61)
- mysql分区表的优缺点 (53)
- centos7切换到图形界面 (55)
- 前端深拷贝 (62)
- kmp模式匹配算法 (57)
- jsjson字符串转json对象 (53)
- jdbc connection (61)
- javascript字符串转换为数字 (54)
- mybatis 使用 (73)
- 安装mysql数据库 (55)