watch: 用于监听 某个属性 的变化 侧重于某件事;
只要被监听的数据方式变化, 就会自动的触发 watch 中指定的处理函数
// 监听 password 的变化 watch: { // password 是在data中定义的 password:function(newVal, oldVal) { // 参数: newVal 是新的值 // oldVal 旧值 console.log('密码发生了变化!!!') } }
computed计算实现
计算属性的特点: 同时监听 多个数据 的变化, 侧重于得到新的值
只要依赖的任何一个数据发生变化, 都会自动触发计算属性的重新求值
computed使用的时候 不能当做一个方式来使用, 要当做一个 属性来使用
定义的计算属性: 计算属性, 在定义的时候,需要被定义为 function , 但是, 在页面UI结构轴, 计算属性是直接当做 普通属性 来使用的
在计算属性中, 必须 return一个返回值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue-2.5.16.js"></script> </head> <body> <div id="app"> firstname <br> <input type="text" v-model="fname"><br> lastname<br> <input type="text" v-model="lname"><br> fullname<br> <input type="text" disabled v-model="fullname"> </div> <script> new Vue({ el: '#app', data: { fname: '', lname: '' }, computed: { fullname:function() { return this.fname+ '--' +this.lname } } }) </script> </body> </html>
监听属性