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

來吧展示：