vue.js_12_vue的watch和computed
1.watch用来监测指定Vue实例上的数据变动。
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
1.>使用watch监听路由的变化打印在控制台 $route.path路由地址
当$route.path的数据变动时触发watch中的方法
watch: { '$route.path': function(newval,oldval) {
console.log(this.$route)
}
}
<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: '<h2>登陆组件</h2>'
};
var register = {
template: '<h2>注册组件</h2>'
};
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: login
},
{
path: '/register',
component: register
},
],
linkActiveClass: 'myclass'
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
watch: {
'$route.path': function(newval,oldval) {
console.log(this.$route) }
}
});
</script>
</body>
2.computed
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
1>使用computed监视完成firstname+lastname
computed：不可再data中定义
computed：当computed中的任意属性值发生改变时computed方式会重新加载
computed：被多次使用时不会加载多次，computed的结果会被缓存
<body>
<div id="app">
<input type="text" v-model="firstname" />+
<input type="text" v-model="lastname" />=
<input type="text" v-model="name" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
computed: { //computed中可以定义一些计算属相，本质就是方法，
//直接把name当作熟属性使用
//在name: function() {}中所有的属性发生改变时 就会触发 该方法
name: function() {
return this.lastname + '-' + this.firstname
}
}
})
</script>
</body>
vue.js_12_vue的watch和computed的更多相关文章
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- Vue 基础自查——watch、computed和methods的区别
1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue里的watch 和 computed 监听的不同
1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- 计算几何——线段和直线判交点poj3304
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...
- 牛客多校第五场 G subsequence 1 最长公共子序列/组合数
题意: 给定两个由数字组成的序列s,t,找出s所有数值大于t的子序列.注意不是字典序大. 题解: 首先特判s比t短或一样长的情况. 当s比t长时,直接用组合数计算s不以0开头的,长度大于t的所有子序列 ...
- Mysql优化系列之索引性能
实际上,前面的数据类型和表结构设计优化不能算优化,只能算规范,也就是说在设计表的时候,应该且必须做到这些 索引是sql优化的核心部分,在<高性能Mysql>中单独抽出一章讲,也印证了其重要 ...
- Git远程仓库版本回退
1.首先将本地仓库版本回退到自己想要的版本. git reset commit_id 2.将回退后的版本强制推送到远程仓库. git push -f origin master
- Spoj-DISUBSTR - Distinct Substrings~New Distinct Substrings SPOJ - SUBST1~(后缀数组求解子串个数)
Spoj-DISUBSTR - Distinct Substrings New Distinct Substrings SPOJ - SUBST1 我是根据kuangbin的后缀数组专题来的 这两题题 ...
- 基于VGGnet的人脸识别系统-ubuntu 系统下的Caffe环境搭建(CPU)
对于caffe的系统一般使用linux系统,当然也有windows版本的caffe,不过如果你一开始使用了windows下面的caffe,后面学习的过程中,会经常遇到各种错误,网上下载的一些源码.模型 ...
- [NOIP2019模拟赛]序列（Sequence）
题目大意 有一个序列$A_i$ • 对于 i ≥ 1,如果有$ A_i > 0.A_{i+1}> 0$ 且存在 $A_{i+2}$,那么法老可以令$ Ai$ 和 $A_{i+1}$ 减一, ...
- FileCloud 的原理简述&自己搭建文件云
FileCloud 的原理简述&自己搭建文件云 copyright(c) by zcy 关于如何使用IIS创建asp服务,请读者自行研究 注:不要忘记添加入站规则 代码的存储: 根目录 fil ...
- 2016.10.6初中部上午NOIP普及组比赛总结
2016.10.6初中部上午NOIP普及组比赛总结 中了病毒--病毒--病毒-- 进度: 比赛:AC+0+0+20=120 改题:AC+0+AC+20=220 Stairs 好--简--单!递推就过了 ...
- 拦截器和自定义注解@interface
1 .拦截器(Interceptor): 用于在某个方法被访问之前进行拦截,然后在Handler执行之前或之后加入某些操作,其实就是AOP的一种实现策略. 拦截用户的请求并进行相应的处理,比如:判断用 ...