标签：vue computed firstname lastname watch fullname 监听 methods

let vm = new Vue({

　　el: "#app"

　　data: {

　　　　firstname: '',

　　　　lastname: '',

　　　　fullname: '',

　　},

　　methods: {   //可用keyup动作绑定事件

　　　　getFullname () {

　　　　　　this.fullname = this.firstname + '-' + this.lastname

　　　　}

　　},

　　watch: {

　　　　firstname: function () {

　　　　　　this.fullname = this.firstname + '-' + this.lastname

　　　　},   //设置多个监听属性时用逗号分隔

　　　　$route.path: function ( newval, oldval ) {   //监听路由的变化

　　　　　　if (newval === '/login')  console.log('欢迎来到登录页面！')

　　　　　　else if (newval === '/login')  console.log('欢迎来到注册页面！')

　　　　}

　　},

　　computed: {

　　　　fullname: function () {

　　　　　　return this.firstname + '-' + this.lastname

　　}

}

})

总结：

1. methods中写的是一些方法，用于处理业务逻辑；

2. computed的本质是一个方法，但我们把他们的名称当做属性来使用，它的值通过在函数中的return来返回。当computed值所依赖的值发生变化时，这个computed值也会立即重新求值，且computed值的结果会被缓存起来，当它所依赖的数据都没有发生变化时，不会对它重新求值

3. watch用于监听data中的以及其他（比如路由）的数据的变化，当被监听的内容发生变化时，触发相应的函数，从而进行某些逻辑操作。可以认为是methods和computed的结合体。

标签：vue,computed,firstname,lastname,watch,fullname,监听,methods
来源： https://www.cnblogs.com/Ryan368/p/11320745.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。