vue计算属性和侦听属性

最新推荐文章于 2024-05-02 11:47:29 发布

cshys201314

最新推荐文章于 2024-05-02 11:47:29 发布

阅读量86

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/cshys201314/article/details/103969138

版权

1、计算属性

任何复杂的业务逻辑，我们都应当使用计算属性。
在特定条件下，计算属性要优于方法。
计算属性具有依赖性，计算属性依赖data中的初始值，只有当初始值改变的时候，计算属性才会再次计算；
计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，它才会从新计算。

原始数据： {{ msg }} <br />
计算属性的值： {{ computedMsg }} - {{ computedMsg }} -{{ computedMsg }} <br />
方法实现： {{ reversemsgfn() }} - {{ reversemsgfn() }}- {{ reversemsgfn() }}


computed: { // 计算属性 ，计算属性可以依据data中的初始数据转换而来，可以像data中的数据一样使用，一般为函数，返回一个值
computedMsg () {
console.log('computed') // 执行一次
return this.msg.split('').reverse().join('')
}
},
methods: {
reversemsgfn () {
console.log('methods') // 执行3次
return this.msg.split('').reverse().join('')
}
}

2、侦听属性（侦听器）

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表单输入绑定</title>
</head>
<body>
  <div id="app">
   <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }}

  </div>
</body>
<script src="vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstname: '张',
      lastname: '三',
      fullname: '张三'
    },
    watch: {
      firstname (newVal, oldVal) {
        this.fullname = newVal + this.lastname
      },
      lastname (newVal, oldVal) {
        this.fullname = this.firstname + newVal
      }
    }
  })
</script>
</html>

cshys201314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue计算属性和侦听属性

1、计算属性任何复杂的业务逻辑，我们都应当使用计算属性。在特定条件下，计算属性要优于方法。计算属性具有依赖性，计算属性依赖data中的初始值，只有当初始值改变的时候，计算属性才会再次计算；计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，它才会从新计算。原始数据： {{ msg }} <br />计算属性的值： {{ computedMs...
复制链接

扫一扫