vue学习笔记（八）---- vue中的实例属性（wacth和computed的使用）

一、watch属性的使用

1.传统方式实现双向数据改变监听事件（姓名拼接案例）

<div id="app">

    姓:

   <input type="text" value="" @keyup="textChange()" v-model="firstname"/> +

    名:

    <input type="text" value="" @keyup="textChange()"  v-model="lastname"/> =

    姓名:

    <input type="text" value="" v-model="fullname"/>

</div>

var vm = new Vue({

        el: '#app',

        data: {

            firstname: '',

            lastname: '',

            fullname: ''

        },

        methods: {

            textChange(){

                this.fullname = this.firstname+ this.lastname

            }

        }

    });

来吧展示：

watch:{

            'firstname':function () {

                console.log('firstname被监听到了')

            }

        }

2.使用watch监听事件改变（姓名拼接案例）

将methods方法除掉，然后改用watch去监听事件的变化

watch:{

            //函数中有两个参数，newval和oldval

            //newval:最新的值

            //oldval:上一次的值

            'firstname':function (newval,oldval) {

                // console.log('firstname被监听到了')

                console.log('新值:'+newval +'-----' +'旧值:'+oldval)

            }

        }

watch方式实现姓名拼接

watch:{

      'firstname':function (newval,oldval) {

      this.fullname = newval + this.lastname

     //或者是

      // this.fullname = this.firstname + this.lastname

    },

     'lastname':function (newval,oldval) {

     this.fullname = this.firstname + this.lastname

     }

 }

3. 使用watch监听url地址的改变

需求：当组件进行切换时，在页面上显示一句话欢迎进入登录页面 / 注册页面

通过查看知道$router的path对应的就是url跳转的路由地址

所以我们可以通过watch去监听得到url地址

<div id="app">

    <router-link to="/login">点击登录</router-link>

    <router-link to="/res">点击注册</router-link>

    <router-view></router-view>

<!-- 当组件切换时，在页面上显示一句话 欢迎进入 登录页面 / 注册页面-->

   <h2>{{msg}}</h2>

</div>

<script>

    var login = {

        template:'<h2>登录组件</h2>'

    }

    var res = {

        template:'<h2>注册组件</h2>'

    }

    var router = new VueRouter({

        routes:[

            {path:'/login',component:login},

            {path:'/res',component:res}

        ]

    })

    var vm = new Vue({

        el: '#app',

        data: {

            //msg:'欢迎访问----'

            msg:''

        },

        created() { // 这个 created 生命周期函数，在页面刚被打开的时候会执行，同时，如果页面被刷新了，也会执行

            // console.log('okokok')

            const path = this.$route.path

            if (path === '/login') {

                this.msg = '欢迎进入登录页面'

            } else if (path === '/reg') {

                this.msg = '欢迎进入注册页面'

            }

        },

        router,

        watch: { //watch是一个对象，对象上是一些键值对

        // 在 watch 中，可以监听当前 vm 实例上所有的属性变化, 页面的刷新，不会触发 $router.path 的改变事件

            '$route.path': function (newval) {

                // console.log(newval)

                if (newval === '/login') {

                    this.msg = '欢迎进入登录页面'

                } else if (newval === '/reg') {

                    this.msg = '欢迎进入注册页面'

                }

            }

        }

    });

</script>

小结：根据$router的path的不同就能监听url地址的改变

$router属于this,而this就是当前的vm实例，通过访问监听

this当前实例身上的.path属性就能监听到地址的变化

data中的msg也是vm实例身上的,页面可以通过this来获取到，所以可以通过watch来监听path的变化，从而改变data身上的msg通过切换组件的不同展示不同的msg到页面上

二、computed计算属性的基本使用

1.使用computed计算属性实现姓名拼接案例

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            firstname: '',

            lastname: ''

        },

        computed: { // 计算属性区域

            //只要访问fullname，那么内部就会调用这个方法，return做一个拼接，一引用一次就会调用一次

            'fullname': function () {

            // 这个 fullname 就是就是计算属性

            // 在页面中，使用计算属性的时候，永远把它当作普通的属性来使用

            // 只要 计算属性的 function中，所依赖的任何数据发生变化了，则会触发 计算属性的重新求值

            // 计算属性的值，如果被第一计算后，没有发生过变化，则会 把 第一次的值，缓存起来，供后续使用，这样能够提高性能

                console.log('ok')

                return this.firstname + '-' + this.lastname

            }

        }

    });

</script>

  </script>

来吧展示：

上述案例存在的一个问题是，fullname只能获取到firstname和lastname的值，并不能给他们赋值，也就是即便删掉fullname文本框中的值，也不会改变firstname和lastname中的值

解决方法 ----> 通过computed计算属性的get和set方法去解决

2. computed计算属性的get和set方法的使用

 computed: { // 计算属性区域

        'fullname': {

          get() { // get 表示外界要引用 fullname 的值

            console.log('调用了fullname的get方法')

            return this.firstname + '-' + this.lastname

          },

          set(val) { // 外界重新为 fullname 赋值了

            const parts = val.split('-')

            this.firstname = parts[0] || ''

            this.lastname = parts[1] || ''

          }

        }

      }

字符串的 split() 方法的使用

小结：

修改前面的firstname和lastname就会调用get()方法，修改后面的fullname就会调用set()方法

页面一刷新就会直接调用get()方法

当修改fullname框中的值才会触发set()方法