vue计算属性computed、事件、监听器watch的使用讲解

一.计算属性（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>