Vue学习之监听methods、watch及computed比较小结…
2019-08-14 10:03:08来源:博客园 阅读 ()
一、三者之间的对比:
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 中的数据发送了变化,就会立即重新计算这个计算属性的值;
③、计算属性的求值结果,会被缓存起来,方便下次直接使用;如果计算属性方法中,所以来的任何数据,都没有发生过变化,则 不会重新对 计算属性求值。
原文链接:https://www.cnblogs.com/21-forever/p/11109762.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash