Vue---day02---计算属性和侦听器

计算属性

在{{}}内的表达式确实很简便，但是有时却容易因为逻辑过多而显得异常繁杂。从而违背了它的设计初衷，那么就有离了别的方法来达到需要的结果

1. 计算属性
2. 方法
3. 侦听属性

对于计算属性和方法

		<div id="app">
            <p>{{message}}</p>
            <p>{{res_com}}</p>
            <p>{{res_met()}}</p>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    message:"hello"
                },
                // 计算属性
                computed:{
                    res_com:function(){
                        return this.message.split("").reverse().join("")
                    }
                },
                //方法
                methods:{
                    res_met:function(){
                        return this.message.split("").reverse().join("")
                    }
                }
            })
        </script>

结果可以看出计算属性和方法两种方式都可以得到一个相同的结果，但是两者有个极大的差别就是计算属性是基于响应式依赖进行缓存的，也就是说，如果message没有发生过变化，那么是不需要再次执行
res_com方法，而是直接从缓存中取值的。相比之下，每次重新渲染时，res.met总是会执行的。
现在假设一种情况，最初获取一个目标值需要从处理大量数据，耗费较多资源，然后每次渲染网页时，由于数据没变，那么基于res_com获取的目标值直接从缓存里获取，而基于res_met的则需要再次执行一次漫长的处理数据的过程。这样一来使用计算属性就显得很合适了。

计算属性认只有一个getter方法，而没有setter方法

<div id="app">
            <p>{{fullName}}</p>
        </div>

        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    firstName:"hello",
                    lastName:"hi"
                },
                computed:{
                    fullName:function(){
                        return this.firstName + " " + this.lastName
                    }
                }
            })
        </script>

没有加setter方法时，只能通过改变firstName和lastName来改变fullName
再来加上setter方法

				computed:{
                    fullName:{
                        get:function(){
                            return this.firstName + " " + this.lastName
                        },
                        set:function(newValue) {
                            var names = newValue.split(" ")
                            this.firstName = names[0]
                            this.lastName = names[1]
                        }
                    }
                }

可见增加set方法后可以通过修改fullName来修改firstName和lastName。

侦听器

就是监听数据是否变化，若变化则执行事先写好的处理流程

		<div id="app">
            <p>{{fullName}}</p>
        </div>
        <script>
            var vm= new Vue({
                el:"#app",
                data:{
                    firstName:"Foo",
                    lastName:"Bob",
                    fullName:"Foo Bob"
                },
                watch:{
                    firstName:function(val){
                        this.fullName = val+" "+this.lastName;
                    },
                    lastName:function(val){
                        this.fullName = this.firstName+" "+ val;
                    }
                }
            })
        </script>

如上图所示，对firstName和lastName进行监听后，在控制台进行修改这两个数据后，相应的方法则会执行，并且反应到fullName在网页的输出上。
再来看一个例子

		<div id="app">
            <p>{{answer}}</p> 
            <input v-model="question">                  
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    question:"",
                    answer:"please write something",
                    num:0
                },
                watch:{
                    question:function(val){
                        var words = val.split("")
                        this.answer = " have been writed "+ words.length+" word"
                    }
                }
            })
        </script>

v-model:"question"相当于v-bind:value="question",v-on:input="question=$event.target.value"
这里通过对“question”进行监听，同步实时获取“question”字段的长度，做一个简单的字符串长度计数的功能实现。