watch监听/computed计算属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <script src='../js/vue.js'></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 <input type="text" v-model='firstname'> + 14 <input type="text" v-model='lastname'> = 15 <input type="text" v-model=fullname> 16 </div> 17 </body> 18 <script> 19 let vm = new Vue({ 20 el: '#app', 21 data: { 22 firstname: '', 23 lastname: '', 24 fullname: '', 25 }, 26 methods: {}, 27 watch: { //这个方法可以监听vue实例中所有属性的变化，从而触发这个watch中的处理函数 watch对象里面采用键值对方式，key:监听的数据，val:监听的回调
//但是watch监听只适用于单个数据的监听，多个数据就要写多个键值对。业务逻辑一样也无法复用代码。显得代码冗余 28 'firstname': function(newval, oldval) { //表示监听data中firstname的变化，变化就执行后面的函数，newval为改变后的值，oldval为改变前的值 29 console.log(oldval + '---' + newval) // 30 this.fullname = newval + '-' + this.lastname; 31 }, 32 'lastname': function(newval, oldval) { //表示监听data中lastname的变化，变化就执行后面的函数，newval为改变后的值，oldval为改变前的值 33 console.log(oldval + '---' + newval) // 34 this.fullname = this.firstname + '-' + newval; 35 },
'$route.path':function(newval){ //监听路由的变化， 引入vue-router.js后，vue实例就会有这个$route属性，$route上的path属性就表示hash路由# 后的内容,
//加入有这样的业务，登录页面显示欢迎来到登录界面，注册页面就显示欢迎注册我们的产品，就可以监听路由
}, 36 37 } //watch 除了能监听data中数据的变化、dom变化，还可以监听非dom元素的变化 38 //例如 路由的变化， 39 //引入 路由包 vue-router.js 后，vue实例就自动绑定了一个$router对象, 40 //使用 '$router.path[或者任务$router中的属性值]:function(){}'就可以监听到这些值的改变从而做出相应的动作！！！ 41 42 }) 43 </script> 44 45 </html>
computed计算属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='../js/vue.js'></script> </head> <body> <div id="app"> <input type="text" v-model='firstname'> + <input type="text" v-model='lastname'> = <input type="text" v-model='fullname'> <!-- 这里的full那么 是computed属性中的 fullname 这个key --> </div> </body> <script> let vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', }, methods: { //methods/watch/computed 区别； // computed必须有return 值、结果会被缓存，watch不一定需要，methods也不一定需要 // methods 适合写复杂的业务逻辑，watch可以写某些具体的业务逻辑 而computed主要负责简单的数据操作 //watch可以看做methods和computed的结合 }, watch: { //这个方法可以监听data中指定数据的变化，从而触发这个watch中的处理函数 'firstname': (newval, oldval) => { //表示监听data中firstname的变化，变化就执行后面的函数，newval为改变后的值，oldval为改变前的值 console.log(oldval + '---' + newval) // }, 'lastname': (newval, oldval) => { //表示监听data中lastname的变化，变化就执行后面的函数，newval为改变后的值，oldval为改变前的值 console.log(oldval + '---' + newval) // } }, computed: { //计算属性 本质是function,但是调用的时候不需要加上()，直接当做属性即可使用,v-model 直接绑定计算属性 fullname 'fullname': function() { //把原本定义在data中的fullname放到computed属性中，进行计算 //这里引用了 data中的两个数据，只要被引用的数据任何一个改变 //都会触发计算属性去重新求值并返回计算后的结果，并且缓存起来 //如果数据不变，下次任何地方用到这个值就直接去缓存里拿数据，从而提高效率 // return this.firstname + '-' + this.lastname //到这里 computed计算属性都是根据依赖数据的改变而得到
//其实还可以双向计算，如果计算属性结果是form表单中的input可以修改，或者通过代码改变结果，那么依赖也可以随着改变！！！
/* 'fullname':{//完整的计算属性写法，键值对 ，值是一个对象，包含get set两个钩子
get(){}, //默认就会触发，当依赖改变也会触发这个get钩子
set(){}, //当计算属性结果改变不是通过依赖计算得到，而是直接修改这个结果，会触发这个set钩子函数
} */
},
func(){ //computed 中 写法二， 直接定义一个函数， 这个函数名可以当做变量名使用。
switch(this.firstname){
···
}
} //在vue实例控制的#app 这个div中， 如果func()中的firstname 改变 就会触发 func（）这个函数， 【计算属性 本质是function,但是调用的时候不需要加上()，直接当做属性即可使用】 } })
可以在#app 这个div 中 使用 v-for=“(item,index) in func”【其实就是在循环func的返回值】，如果func()中的firstname 改变，就可以触发func里的逻辑循环渲染不同的数据！！！
</script>
</html>
