Vue的watch和computed属性

Vue的watch属性

Vue的watch属性可以用来监听data属性中数据的变化

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.js"></script><script src="lib/vue-router-3.0.1.js"></script></head><body><div id="app"><input type="text" v-model="firstname" /></div><script type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},watch:{firstname:function(){console.log(this.firstname)}}})</script></body>
</html>复制代码

可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次

同时还可以直接在监听的function中使用参数来获取新值与旧值

              watch:{firstname:function(newValue,OldValue){console.log(newValue);console.log(OldValue);}}
复制代码

其中第一个参数是新值，第二个参数是旧值

同时Watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.js"></script><script src="lib/vue-router-3.0.1.js"></script><style type="text/css"></style></head><body><div id="app"><!--由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号-->
<!--         <a href="#/login">登录</a><a href="#/register">注册</a>--><router-link to="/login" tag="span">登录</router-link><router-link to="/register">注册</router-link><router-view></router-view></div></body><script>var login={template:'<h1>登录组件</h1>'}var register={template:'<h1>注册组件</h1>'}var routerObj = new VueRouter({routes:[//此处的component只能使用组件对象，而不能使用注册的模板的名称{path:"/login",component:login},{path:"/register",component:register}]})var vm = new Vue({el:'#app',data:{},methods:{},router:routerObj,//将路由规则对象注册到VM实例上watch:{'$route.path':function(newValue,OldValue){console.log(newValue);console.log(OldValue);}}})</script>
</html>复制代码

计算属性Computed的作用

computed属性的作用与watch类似，也可以监听属性的变化

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="lib/vue.min.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 type="text/javascript">var vm = new Vue({el:"#app",data:{firstname:"",lastname:""},methods:{},
/*              watch:{firstname:function(newValue,OldValue){console.log(newValue);console.log(OldValue);}}*/computed:{fullname:function(){return this.firstname +"-"+this.lastname}}})</script></body>
</html>复制代码

只是他会根据他依赖的属性，生成一个属性，让vm对象可以使用这个属性

methods,watch,computed的区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

转载于:https://juejin.im/post/5b8fe6f8f265da0aee3eedf6

Vue的watch和computed属性相关推荐

Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
Vue中methods、computed和watch属性联系及区别
methods属性当我们在Vue中想要调用函数或者方法时,可以在methods中调用方法,如下: <template><div><h1>methods属性< ...
实现 VUE 中 MVVM - step10 - Computed
看这篇之前,如果没有看过之前的文章,移步查看: 实现 VUE 中 MVVM - step1 - defineProperty 实现 VUE 中 MVVM - step2 - Dep 实现 VUE 中 ...
Vue(ES6)中的data属性为什么不能是一个对象？
以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例.如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 ...
VUE自学日志05-计算属性和侦听器
## 计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如,有一个嵌套数组对象: Vue.createApp({data() {re ...
computed用发_Vue中的computed属性和nextTick方法
computed computed属性的实现原理 Vue实例初始化时,给data的每个属性(dataKey)都添加getter和setter方法计算属性computed初始化时,提供的函数将作为对应 ...
关于vue中watch和computed
computed:计算属性通过属性计算的来的属性 1.computed里面的函数建议有返回值,不建议去修改data中的属性 2.在使用computed中的方法时,是不需要加() 3.compu ...
vue中Watch 和 Computed 的区别是什么？
Watch 和 Computed 的区别监听属性watch: 不支持缓存,数据变,直接会触发相应的操作: watch支持异步: 监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值 ...
Vue中 watch 和 computed 区别和使用场景
在 vue 的项目中,经常用到 watch 和 computed 这两个属性.两个都是数值改变触发改变的属性,他们之间有什么区别? 1.区别 Computed: computed: 是计算属性,依赖其 ...

Vue的watch和computed属性

Vue的watch属性

计算属性Computed的作用

methods,watch,computed的区别

Vue的watch和computed属性相关推荐

最新文章

热门文章