03、Vue计算属性与监视

Vue计算属性与监视

  今天小白总结一下近期学习的内容——Vue计算属性与监视，
话不多说上图：

  上图是运行出来的状态，当在上图中姓和名的输入框中改变内容时，下面的三个输入框内容也会改变，相应的下面三个输入框内容改变时，姓和名的输入框内容也会随之改变，例如：
下面是一个Vue实例完整代码：

<div id="demo">
        姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
        名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名1（单向）:<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
        姓名2（单向）:<input type="text" placeholder="Full Name2"><br>
        姓名3（双向）:<input type="text" placeholder="Full Name3"><br>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{
                firstName:'A',
                lastName:'B',
                // fullName1:'A B'
            },
            computed:{
                //什么时候执行：初始化显示、相关的data属性数据发生改变
                fullName1(){//计算属性中的一属性值个方法，方法的返回值作为
                    console.log('fullName()');
                    return this.firstName+''+this.lastName

                }
            }
        })
    </script>

在上述代码中，computed是一个计算属性，计算属性可用于快速计算视图（ View ）中显示的属性。这些计算将被缓存，并且只在需要时更新。
 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
 computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化.
 与watch之间的区别：
　　刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed,这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象；一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据。
 split() 方法用于把一个字符串分割成字符串数组,其语法为stringObject.split(separator,howmany)，如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割，在本例中就是用作了（’ '）。
  小白还在学习中，就总结这些了，小白养成记ing~~