vue-总结2-计算属性-侦听属性

计算属性

<div id="app">
        <p> 没有反向： {{ info }} </p>
        <p> {{ info.split('').reverse().join('') }} </p>
        <p> 反向字符： {{ reserseInfo }} </p>
    </div>

 /* 
        业务： 如果我们想要让一个字符串反向，应该如何操作？
            1. 部分逻辑操作
                字符串 -》 数组  -》 反向 -》 字符串
            2. 思考： 这部分逻辑操作往哪里写？
                - methods   更适合用户交互
                - 直接写在mustache里面

            以上方案，我们发现将逻辑交给了v做，有点违背了关注点分离 

            新的方案
                1. 能写逻辑，逻辑要放在vm
                2. mustache里面更希望得到的事一个类似全局变量的内容

            Vue提供的方案叫做  计算属性
            
            Vure里面默认处理了computed里面的方法调用，我们直接写计算属性名称即可，不需要加()
    */
    new Vue({
        el: '#app',
        data: {
            info: '你很美丽'
        },
        computed: {
            //这里面放的都是方法
            reserseInfo () {
                return this.info.split('').reverse().join('')
            }
        }
    })

侦听属性

 <div id="app">
        姓：<input type="text" v-model = "firstName"> <br>
        名：<input type="text" v-model = "lastName"> <br>
        全名：<input type="text" v-model = "fullName"> <br>
        <hr/>
        
		<!-- 深度监听 -->
 		单价： <input type="text" v-model = "money">

        <br>

        数量： <input type="text" v-model = "num">

        <hr>

        <p> 总价： {{ totalPrice }} </p>
 </div>

 /* 
        侦听属性【 监听 】 - watch
            1. 和data选项有关
 
        侦听属性 vs  计算属性  vs 方法

        项目中如何选择
            1. 如果是事件处理程序： 方法
            2. 如果是由某一个数据改变引起新的异步数据请求，那么我们可以watch
            3. 如果有逻辑处理，但是将来使用类似于变量，那么我们选择计算属性
    
     */
    new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            fullName: '',
            num:1,
            money:2000,
            totalPrice:0
        },
        watch: {
            //watch是一个对象
            // watch里面存储的类型： 方法，对象，普通字符
            firstName ( val ) {//方法的名称和data选项中的key相同，是谁就监听谁
                console.log( val )
                console.log('firstName发生了改变')
                this.fullName = val + this.lastName
            },
            lastName ( val ) {
                this.fullName = this.firstName + val 
            },
			money(val){
				this.totalPrice=val*this.num
			},
			num:{
				deep:true,//代表深度监听
				handler(val){//num改变后执行的处理程序
				this.totalPrice=val*this.money
						}
				}
        }
    })