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

来吧展示:

在这里插入图片描述

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页