重走vue之vue的计算属性和侦听属性

最新推荐文章于 2024-09-18 09:47:26 发布

季后的风

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量71

点赞数

分类专栏： vue 文章标签： html html5 vue.js javascript

本文链接：https://blog.csdn.net/qq_40708840/article/details/109340769

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

计算属性

我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性

在双大括号中直接使用表达式获取结果

<div id="example">
     {{ message.split('').reverse().join('') }} 
</div>

在Vue定义参数中添加computed属性，或者是在methods中添加方法

<div id="example"> 
    <p>
        Computed reversed message: {{ reversedMessage }}
    </p> 
    <p> {{reversedMessageMethod() }}</p>
</div>

computed: { 
    // 计算属性的 getter
     reversedMessage: function(){return this.message.split(‘’).reverse().join(‘’) } }
    methods: { 
          //计算属性的 getter 
          reversedMessageMethod: function(){return this.message.split(‘’).reverse().join(‘’) 
          } }

注意点:不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代

计算属性的setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

侦听属性

当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最有用的

watch: { 
    // 如果`question`发生改变，这个函数就会运行这里如果question是引用类型，只有当引用地址发生变化才能被监测 
    question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' }, 
    // deep为true表示深度监听，如果question为对象，deep表示question内部属性值变化也可以监听到 
    question: { 
        handler:function (newQuestion, oldQuestion) { 
            this.answer = 'Waiting for you to stop typing...' 
        } ,
     deep:true 
    } }

侦听属性的完整实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
        <br>
        a:<input type="text" v-model.number="a">
        <br>
        +
        <br>
        b:<input type="text" v-model.number="b">
        <br>
        =
        <br>
        <output>{{total}}</output>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "hello",
                a: '',
                b: '',
                total: 0
            },
            methods: {

            },
            //监听  侦听
            watch: {
                a(newValue, oldValue) {
                    this.total = newValue + this.b
                },
                b(newValue, oldValue) {
                    this.total = newValue + this.a
                }
            }
        })
    </script>
</body>

</html>