当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue计算属性computed、事件、监听器watch的使用讲解

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

2019年05月28日  | 移动技术网IT编程  | 我要评论

火影忍者小樱滛乱图,家具沙发,3396小游戏

一.计算属性（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中的某个变量。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是改变后的新值，第二个是改变之前的值。

第二种  值也可以是函数名：不过这个函数名要用单引号来包裹。(不常用)

第三种情况厉害了(监听的那个数据值是一个对象):

值是包括选项的对象：选项包括有三个。

  •     第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
  •     第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
  •     第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

用法一：基础用法

<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>

用法二：handler方法和immediate属性

<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: {
      handler(newval,oldval){
        console.log('newval:'+newval,'oldval:'+oldval);
      },
      immediate:true,
    }
  }
}
</script>

注意到handler了吗，我们给 watchmsg绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了watchmsg之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

用法三：

deep属性

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性/数组：

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="obj.watchmsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello world!',
      obj:{
        watchmsg: '我是监听操作',
      }
    }
  },
  watch:{
    // 需要注意的是这里的监听对象也需要变化
    'obj.watchmsg': {
      handler(newval,oldval){
        console.log('newval:'+newval,'oldval:'+oldval);
      },
      immediate:true,
      deep:true,
    }
  }
}
</script>

2、数组的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{array}}</p>
    <button @click='addarray()'>点击改变数组</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello world!',
      array:['mu','zi','dig','big']
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    array:{
      handler(newval,oldval){
        console.log(newval+'--'+oldval)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    addarray() {
      this.array.push('66')
    }
  }
}
</script>

3、数组中对象的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <ul>
      <li v-for="(item,index) in arrayobj" :key="item.id">{{index}}--{{item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,index) in arrayobj" :key="item.id">{{index}}--{{item.name}}---{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrayobj:[
        {name:'张三',age:'23'},
        {name:'李四',age:'22'}
      ],
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    arrayobj:{
      handler(newval,oldval){
        console.log(newval+'--'+oldval)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    change(i) {
      // console.log(this.changevalue)
      this.arrayobj[i].age = this.arrayobj[i].age
    }
  }
}
</script>

4、对象具体属性的watch［活用computed］

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{obj.name}}</p>
    <input type="text" v-model="obj.name" name="" id="">
    <p>{{newname}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{name:'muzi',age:'23'},
    }
  },
  computed:{
    newname(){
      return this.obj.name.touppercase();
    }
  },
  watch:{
    newname(newval,oldval){
      console.log(newval+'--'+oldval)
    },
    // newname:{
    //   handler(newval,oldval){
    //     console.log(newval+'--'+oldval)
    //   },
    //   deep:true,
    //   immediate:true,
    // }
  },
}
</script>

从效果图上可以看出，计算属性最好使用在更改数据上然后进行渲染；先进行的计算属性再进行的监听。

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网