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只有在它的相关依赖发生变化才会重新计算 ...
随机推荐
- 0920CSP-S模拟测试赛后总结
依旧挂了. 这次出题人十分良心.白送了180分……于是我没有拿到.130分rank43滚粗了. T1是道sbdp.然而我死想哈希.然后就死在哈希上了. 我简直是个傻子.之前考了几次字符串的题可以用哈希 ...
- QQ聊天机器人 Delphi代码
QQ聊天机器人 前几日,看到杂志上有一篇关于开发QQ聊天机器人的文章.谈到了对QQ循环发送消息内容,感觉倒也很好玩,于是拿起Delphi开始了我的QQ聊天机器人之路. 首先要明白自己要做什么, ...
- inspect模块的使用
一.介绍 inspect模块主要的四种用处: 1.对是否是模块.框架.函数等进行类型检测 2.获取源码 3.获取类或函数的参数信息 4.解析堆栈 二.使用 只写了2个自己用到的方法,方法太用,http ...
- P1977 出租车拼车
P1977 出租车拼车 题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆 ...
- 19.SimLogin_case03
# 模拟登录GitHub import requests from lxml import etree class Login(): def __init__(self): self.headers ...
- Python自学--part1
概要 Python介绍 Python安装 Hello World程序 变量 字符编码 用户输入 pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语句 表达式while 循环 表达 ...
- 使用CEfSharp之旅（6）拦截网络请求 截取response返回
原文:使用CEfSharp之旅(6)拦截网络请求 截取response返回 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https ...
- wpf 让正执行的程序暂停几秒钟
public static class DispatcherHelper { [SecurityPermissionAttribute(SecurityAction.Deman ...
- SPOJ10707 COT2-Count on a tree II
COT2 - Count on a tree II 中文题意 离线询问一颗树上路径(u,v)中经过所有点的权值的种类数. 题解 树上莫队.即在树的欧拉序列上进行莫队.同一个点加第一次时增加,第二次时减 ...
- Android开发 设备横屏与竖屏的详解
需要了解横竖屏切换关键知识 1.在Android设备的横竖屏幕,每一次切换横竖屏其实是在重新创建Activity,Activity会重新走一遍生命周期.从onCreate 到 onDestroy 2. ...