vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理
watch监控自身属性变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
{{fullName}}
</div> <script>
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'vue',
fullName: 'hello.ve'
},
watch: {
'firstName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
},
'lastName': function(newval, oldval) {
// console.log(newval,oldval);
this.fullName = this.firstName + this.lastName;
}
}
});
</script>
</body>
</html>
watch监控路由对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register/value">注册</router-link>
<!--组件的显示占位域-->
<router-view></router-view>
</div> <script>
//1.0 准备组件
var App = Vue.extend({}); var login = Vue.extend({
template: '<div><h3>登录</h3></div>'
}); var register = Vue.extend({
template: '<div><h3>注册{{name}}</h3></div>',
data: function() {
return {
name: ''
}
},
created: function() {
this.name = this.$route.params.name;
}
}); //2.0 实例化路由规则对象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register/:name',
component: register
},
{
path: '/',
//当路径为/时，重定向到/login
redirect: '/login'
}
]
}); //3.0 开启路由对象
new Vue({
el: '#app',
router: router, //开启路由对象
watch: {
'$route': function(newroute, oldroute) {
console.log(newroute, oldroute);
//可以在这个函数中获取到当前的路由规则字符串是什么
//那么就可以针对一些特定的页面做一些特定的处理
}
}
})
</script>
</body>
</html>
计算属性computed的特点
- 计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性；
- 如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。
案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
{{fullName}}
</div> <script>
new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'vue'
},
computed: {
fullName: function() {
return this.firstName + this.lastName;
}
}
});
</script>
</body>
</html>
vue2.0中的watch和计算属性computed的更多相关文章
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- Vue2.0 【第三季】第2节 computed Option 计算选项
目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...
随机推荐
- Flexbox（弹性盒子）
CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...
- Python模拟鼠标和键盘操作实现重复性操作
前言 由于工作需要,要利用某软件去采集数据,做重复的动作大概500多次.所以想写一个程序代替人,去点击和输入. 一开始的思路有两个:1.用Python或者windows对此软件直接操作.2.利用Pyt ...
- 不存在类型或命名空间名称“HttpContext”
错误:命名空间“System.Web”中不存在类型或命名空间名称“HttpContext”(是缺少程序集引用吗?) 解决办法:创建类库项目时,默认是没有添加System.Web的,在项目名称上右键,添 ...
- linux下非root用户获得/dev/ttyUSB0的读写权限
首先查看/dev/ttyUSB0的权限属性,在终端输入: ll /dev/ttyUSB0 teashaw@xiaopeiqing.com:~$ ll /dev/ttyUSB0 crw-rw—- 1 r ...
- Git学习系列之Git的功能特性（从一般开发者的角度和主开发者的角度来剖析）
不多说,直接上干货! Git的功能特性,从一般开发者和主开发者的角度来进行剖析. Git的功能特性: 从一般开发者的角度来看,Git有以下功能: 1.从服务器上克隆完整的Git仓库(包括代码和版本信息 ...
- Java入门系列-27-反射
咱们可能都用过 Spring AOP ,底层的实现原理是怎样的呢? 反射常用于编写工具,企业级开发要用到的 Mybatis.Spring 等框架,底层的实现都用到了反射.能用好反射,就能提高我们编码的 ...
- What is the difference between modified duration, effective duration and duration?
Macaulay Duration (traditionally just called Duration) The formula usually used to calculate a bond' ...
- Ajax发送GET、POST请求和响应XML数据案例
1.新建工程 新建一个java web工程,新建一个Servlet文件 AServlet.java,用于返回get和post请求. public class AServlet extends Http ...
- Hadoop实战之二~ hadoop作业调度详解(1)
对Hadoop的最感兴趣的地方,也就在于Hadoop的作业调度了,在正式介绍如何搭建Hadoop之前,深入理解一下Hadoop的作业调度很有必要.我们不一定能用得上Hadoop,但是如果理通顺Hado ...
- JDK12 concurrenthashmap源码阅读
本文部分照片和代码分析来自文末参考资料 java8中的concurrenthashmap的方法逻辑和注解有些问题,建议看最新的JDK版本 建议阅读 concu ...