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()方法

来吧展示：