Vue学习之监听methods、watch及computed比较小结（十一）
一、三者之间的对比：
1、methods方法表示一个具体的操作，主要书写业务逻辑；
2、watch；一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体业务逻辑操作；可以看作是”computed"和“methods”的结合体；
3、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。
二、methods：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullname" /> +
<input type="text" v-model="lastname" @keyup="getFullname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
getFullname() {
this.fullname = this.firstname + "-" + this.lastname;
}
}
});
</script>
</body>
</html>
2、watch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="firstname" @keyup="getFullname" /> +
<input type="text" v-model="lastname" @keyup="getFullname" /> = -->
<input type="text" v-model="firstname" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
// getFullname() {
// this.fullname = this.firstname + "-" + this.lastname;
// }
},
watch: {
firstname: function(newVal, oldval) {
this.fullname = newVal + "-" + this.lastname;
},
lastname: function(newVal) {
this.fullname = this.firstname + "-" + newVal;
}
}
});
</script>
</body>
</html>
3、watch监听路由地址的变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
<!-- 1.导包 -->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
//2.创建子组件
var login = {
template: "<h3>这是登录子组件</h3>"
}; var register = {
template: "<h3>这是注册子组件</h3>"
};
//3.创建一个路由对象
var router = new VueRouter({
routes: [
//路由规则数组
{ path: "/", redirect: "/login" },
{ path: "/login", component: login },
{ path: "/register", component: register }
],
linkActiveClass: "myactive" //和激活有关的类
});
var vm = new Vue({
el: "#app",
data: { },
methods: {}, router, watch: { "$route.path": function(newVal, oldVal) {
if (newVal === "/login") {
console.log("欢迎进入登录页面");
} else if (newVal === "/register") {
console.log("欢迎进入注册页面");
}
}
}
});
</script>
</body>
</html>
4、computed：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" /> +
<input type="text" v-model="middlename" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
middlename: "",
lastname: ""
},
methods: {},
watch: {},
computed: {
fullname: function() {
console.log("ok");
return this.firstname + "-" + this.middlename + "-" + this.lastname;
}
}
});
</script>
</body>
</html>
在computed 中，可以定义一些属性，这些属性 ，叫做 【计算属性】，计算属性的本质就是一个方法。
只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性当作方法去调用。
需要注意的是：
①、计算属性在引用的时候，一定不要加（)去调用，直接把它当作 普通属性去使用就好了；
②、只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值；
③、计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则 不会重新对 计算属性求值。
Vue学习之监听methods、watch及computed比较小结（十一）的更多相关文章
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue浏览器返回监听
具体步骤如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) ...
- vue.js 组件监听
一.在通过点击事件触发的子组件中: addCart(event) { if (!event._constructed) { return; } if (!this.food.count) { Vue. ...
- Vue.js：监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- vue的属性监听
一.vue的监听 1.监听的例子 如: html:<input type="number" v-model="a" /> js: watch: { ...
随机推荐
- 23-C#笔记-正则表达式
等用的时候,可以现查. 参考: http://www.runoob.com/csharp/csharp-regular-expressions.html
- ESA2GJK1DH1K开发教程: 来看看最新整理的整个开发板的教程大纲吧
项目开发:教程大纲(测试板型号:ESA2GJK1DH1K) 购买链接: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb ...
- 洛谷P3063 [USACO12DEC]牛奶的路由Milk Routing
链接 其实在博客园里写题解都挺应付的都是在洛谷写了之后 挑一部分粘过来 在洛谷写的也都是废话,是为了凑篇幅 主要就是代码 大体思路就一提 这题贪心不行废话 跑m遍SPFA更新最小值 注意数组记得清空 ...
- BootstrapTable的简单使用教程
1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="boo ...
- 关于qt creator各种假死的问题
来自CSDN网友( qq191329827)内容,亲自尝试,且经历一致: 我有两个笔记本,1个台式机,都装了qt, 然后,我的thinkpad x1c,装上之后creator各种假死,网上看了好多解决 ...
- 每日一问：不一样的角度吐槽下 DataBinding
我们项目采用的是 kotlin && DataBinding 处理的,可能你会疑问,既然用的是 kotlin,为啥没有用 kotlinx?新的页面当然是用的 kotlinx 啦,但我们 ...
- Java小学四则运算
本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 github远程仓库的地址:https://github.c ...
- Sourcetree 集成 Azure DevOps Server（Git）
概述- SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mercurial和Subversion版本控制系统工具.支持创建.克隆.提交 ...
- Java爬虫利器HTML解析工具-Jsoup
Jsoup简介 Java爬虫解析HTML文档的工具有:htmlparser, Jsoup.本文将会详细介绍Jsoup的使用方法,10分钟搞定Java爬虫HTML解析. Jsoup可以直接解析某个URL ...
- 【leet-code】接雨水
给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下,可以接 ...