一.計算屬性（computed）

<template>  <div class="box">    <h1>計算屬性</h1>    <hr>    <!-- 直接渲染得到數據 -->    <p><input type="text" v-model="message"></p>    <!-- 對data的數據進行簡單的操作    這樣有一個不好的地方就是后期對頁面數據的維護不是那么方便 -->    <p>{{message.toUpperCase()}}</p>    <!-- 通過計算屬性改變mesage進行渲染 -->    <p>{{computedMessage}}</p>    <hr>    <!-- 通過事件來改變屬性 -->    <span>{{message}}</span><button @click="changeMessage()">點擊改變</button>    <hr>  </div></template><script>export default {  data() {    return {      message: 'Hello world!',      passw2: 'sss',    }  },  // computed屬性是return返回值，在使用的時候只使用函數名不是調用函數  computed:{    computedMessage(){      return this.message.split('')    }  },  methods:{    changeMessage(){      this.message = this.computedMessage+'altman'    }  },}</script>

這里需要注意的是computed中的函數名不能和所操作data中的數據一樣；computed中的函數名相當于是操作data數據后的新數據，在模塊中直接使用這個函數名即可實現對data中數據改變的渲染。

二.監聽器（watch）

首先確認 watch是一個對象，一定要當成對象來用。

對象就有鍵，有值。

第一種 鍵：就是你要監聽的那個數據，比如說$route，這個就是要監控路由的變化。或者是data中的某個變量。

值可以是函數：就是當你監控的家伙變化時，需要執行的函數，這個函數有兩個形參，第一個是改變后的新值，第二個是改變之前的值。

第二種  值也可以是函數名：不過這個函數名要用單引號來包裹。(不常用)

第三種情況厲害了(監聽的那個數據值是一個對象):

值是包括選項的對象：選項包括有三個。

用法一：基礎用法

<template>  <div class="box">    <h1>監聽器</h1>    <label>二次密碼:</label>    <input v-model="watchMsg" />  </div></template><script>export default {  data() {    return {      message: 'Hello world!',      watchMsg: '我是監聽操作',    }  },  watch:{    watchMsg(newVal,oldVal){      console.log('newVal:'+newVal,'oldVal:'+oldVal);    },  }}</script>