vue中的计算属性和监听属性

一：监听属性。
1.watch：用来监听每一个属性的变化。
2.watch这个对象里面都是函数，函数的名称是data中的属性名称，watch中的函数不需要调用。
3.当属性发生改变那么就会触发watch函数，每个函数都会接受两个值，一个是新值，一个是旧值。

<div id="app">
    <input type="text" v-model="first">+
    <input type="text" v-model="last">=
    <input type="text" v-model="all">
</div>

<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        first:"",
        last:"",
        all:""
    },
    methods:{},
    watch:{
        //使用watch可以监听到data指定数据的变化，然后触发watch中对应的function函数
        //newVal为新值，oldVal为旧值
        'first':function(newVal,oldVal){
            this.all=newVal+'。。。'+this.last
        },
        'last':function(newVal){
            this.all=this.first+'。。。'+newVal
        },
        // 'all':function(){
        //     this.all=this.first+this.last
        // }
    }
})
</script>

效果:

4，监听路由地址的改变。

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 容器 -->
    <router-view></router-view>
</div>

<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- //导入包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 创建子组件
var login={
    template:'<h1>这是登录界面</h1>'
}
var register={
    template:'<h1>这是注册界面</h1>'
}
// 创建路由对象
var router=new VueRouter({
    routes:[//路由规则数组
        {path:'/',redirect:'/login'},
        {path:'/login',component:login},
        {path:'/register',component:register}
    ],
    linkActiveClass:'myactive'// 激活相关类
})
//创建vue实例
var vm=new Vue({
    el:"#app",
    data:{},
    methods:{},
    //router:router
    router,
    watch:{
        '$route.path':function(newVal,oldVal){
            if(newVal==='/login'){
                console.log("欢迎进入登陆界面")
            }else if(newVal==='/register'){
                console.log("欢迎进入注册界面")
            }
        }
    }
})
</script>

效果：

二：计算属性。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ TMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Monday!'
  },
  computed: {
    TMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

效果：

补充：
1，在computed中定义一些属性，这些属性叫做【计算属性】，计算属性本质就是一个方法，在使用的时候，是把他们的名称直接当做属性来使用的，并不会把计算属性当做方法去使用。
2，只要计算属性中function内部所用到的data数据发生变化，就会重新计算。