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只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- 训练计划Day1
Day1:二分答案,三分查找,快速幂,欧拉筛素数 | 题目:火星人,Bridge,GCD,Prime Path 二分答案 [JSOI 2008] 火星人 对于第一个操作用\(hash + 二分\)来求 ...
- 牛客多校第六场 J Upgrading Technology dp
题意: 有n个技能,一开始都是0级,第i个技能从j-1级升到j级,花费$c_{i,j}$,但是花费不一定是正的 所有的技能升到j级时,奖励$d_j$但是奖励也不一定是正的 题解: 用sum[i][j] ...
- MVC到底是设计模式还是一种框架还是一种架构？ https://www.zhihu.com/question/31079945
具体知乎讨论内容:https://www.zhihu.com/question/31079945 MVC到底是设计模式还是一种框架还是一种架构? 我认为它是3种设计模式的演变和组合:观察者模式(Obs ...
- 洛谷P1792——[国家集训队]种树
传送门:QAQQAQ 题意:$n$个点中选$m$个不相邻的点,使得这些点不相邻(1和n算相邻),求这些点的最大值 思路:这不是神仙题不是神仙题…… 刚看到这题觉得不难,好像只要贪心就可以了但贪心不知从 ...
- 面试系列15 如何保证Redis的高并发和高可用
就是如果你用redis缓存技术的话,肯定要考虑如何用redis来加多台机器,保证redis是高并发的,还有就是如何让Redis保证自己不是挂掉以后就直接死掉了,redis高可用 我这里会选用我之前讲解 ...
- 2019-8-31-dotnet-获取指定进程的输入命令行
title author date CreateTime categories dotnet 获取指定进程的输入命令行 lindexi 2019-08-31 16:55:58 +0800 2019-0 ...
- 对this的理解与总结
this既不指向函数自身,也不指向函数的词法作用域!它指向谁完全取决于它在哪里被调用,被谁调用! 绑定规则 总体来说,this的绑定规则有: 默认绑定(严格模式/非严格模式) 隐式绑定 显式绑定 ne ...
- Android开发 MediaPlayer将视频播放时尺寸适配完美
前言 视频播放有一个较为蛋疼的问题,那就是尺寸适配.如果不做尺寸适配视频将会变形拉伸或者压缩.下面我就介绍个人实现的算法. 满足一边的算法 满足一边?你可能是疑问是什么意思.意思是就是始终将视频的高度 ...
- 【JZOJ1259】牛棚安排
description Farmer John的N(1<=N<=1000)头奶牛分别居住在农场所拥有的B(1<=B<=20)个牛棚的某一个里.有些奶牛很喜欢她们当前住的牛棚,而 ...
- 如何玩转跨库Join？跨数据库实例查询应用实践
背景 随着业务复杂程度的提高.数据规模的增长,越来越多的公司选择对其在线业务数据库进行垂直或水平拆分,甚至选择不同的数据库类型以满足其业务需求.原本在同一数据库实例里就能实现的SQL查询,现在需要跨多 ...