Vue—计算属性和监听属性 computed和watch的区别

简介: Vue—计算属性和监听属性 computed和watch的区别

@TOC

计算属性

为什么需要计算属性?

生活中常常会使用到各种复杂逻辑计算,若全部放在逻辑表达式里,会让模板过于繁重且难以维护,于是我们需要把一些响应式数据的复杂逻辑放在专门的计算模块中。

基本使用

下面是一个简单的例子,其首先在data中声明author,author中包含name和books,然后利用计算属性判断books属性长度是否大于0,若大于0则输出其值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="computed-basics" class="demo">
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage }}</span>
  </div>
<script>
Vue.createApp({
  data() {
    return {
      author: {
        name: 'John Doe',
        books: ['Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery']
      }
    }
  },
  computed: {
    // a computed getter
    publishedBooksMessage() {
      // `this` points to the vm instance
      if(this.author.books.length > 0)
        return 'Yes!'+this.author.books;
      else
        return 'No'
    }
  }
}).mount('#computed-basics')
</script>
</body>
</html>

计算属性的关键字为computed,其首先声明publishedBooksMessage函数,你可以像普通属性一样将数据绑定到模板中的计算属性。Vue 知道 vm.publishedBookMessage 依赖于 vm.author.books,因此当 vm.author.books 发生改变时,所有依赖 vm.publishedBookMessage 的绑定也会更新。

computed和methods区别

可以看到computed可以达到和methods同样的效果。都可以通过在表达式中调用方法。

但是不同的是,computed是基于它的响应依赖关系缓存,computed是属性调用,而methods是函数调用,

通俗的来说就是,计算属性(computed)在系统刚运行的时候调用一次,之后只要值不改变,dom中的值不再去调用函数取值,而是从缓存中获取,速度会很快,,比如上例中,每次author.books发生变化时,都会调用一次计算属性。而方法选项methods仅仅刚加载时调用一次,不管值有没有改变,一旦dom中要取值,则会再次调用方法

下面的例子可以帮助理解不同。

<body>
  <div id="computed-basics" class="demo">
    <h1>{{message}}</h1>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
  </div>
<script>
Vue.createApp({
  data() {
    return {
      message: '我是消息,'
    }
  },
  methods: {
        methodTest() {
            return this.message + '现在我用的是methods'
        }
    },
  computed: {
    // a computed getter
    computedTest() {
            return this.message + '现在我用的是computed'
        }
  }
}).mount('#computed-basics')
</script>
</body>
</html>

methods定义的方法是以函数调用的形式来访问的

test2-1,test2-2,test2-3是反复地将methodTest方法运行了三遍,如果我们碰到一个场景,需要1000个methodTest的返回值,那么毫无疑问,这势必造成大量的浪费

更恐怖的是,如果你更改了message的值,那么这1000个methodTest方法每一个又会重新计算。

computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值,如上例,在Vue实例化的时候,computed定义computedTest方法会做一次计算,返回一个值

在随后的代码编写中,只要computedTest方法依赖的message数据不发生改变,computedTest方法是不会重新计算的

也就是说test3-1,test3-2是直接拿到了返回值,并不是computedTest方法重新计算的结果,而是直接从缓存拿来的结果

在使用时:对于任何复杂逻辑和一些重复的函数,你都应当使用计算属性computed,可以大量节省资源。

计算属性的 Setter

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

其中getter方法用于获取,setter方法用于修改。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app-test" class="demo">
  </div>
  <script>
    const app = {
      data() {
        return {
          name: 'Google',
          url: 'http://www.google.com'
        }
      },
      computed: {
        site: {
          // getter
          get: function () {
            return this.name + ' ' + this.url
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    }
    vm = Vue.createApp(app).mount('#app-test')
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    document.write('<br>------ 更新数据 ------<br>');
    // 调用 setter, vm.name 和 vm.url 也会被对应更新
    vm.site = '百度 https://www.baidu.com';
    document.write('name: ' + vm.name);
    document.write('<br>');
    document.write('url: ' + vm.url);
    </script>
</body>
</html>

当调用 setter对vm.site进行修改后, vm.name 和 vm.url 也会被对应更新

监听属性

当需要在数据变化时执行异步或开销较大的操作时, Vue 通过 监听(watch )选项提供了一个更通用的方法来响应数据的变化。

基本使用

通过使用 watch 实现计数器,为counter添加监听,每次触发点击事件时,运行function(counter),跳出提示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id = "app-test">
  <p style = "font-size:25px;">计数器: {{ counter }}</p>
  <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
    <script>
      const app = {
        data() {
          return {
            counter: 1
          }
        }
      }
      vm = Vue.createApp(app).mount('#app-test')
      vm.$watch('counter', 
      function(counter) {
        alert('计数器值变为 :' + counter + '!');
      });
      </script>
</body>
</html>

在这里插入图片描述

更多关于watch的可以查阅官方文档

computed和watch的区别

使用 watch 选项允许我们执行异步操作 (访问一个 API),并设置一个执行该操作的条件。这些都是computed属性无法做到的。如下面这个例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="watch-example" class="demo">
    <p>
      Ask a yes/no question:
      <input v-model="question" />
    </p>
    <p>{{ answer }}</p>
  </div>
  <style>
    .demo {
      font-family: sans-serif;
      border: 1px solid #eee;
      border-radius: 2px;
      padding: 20px 30px;
      margin-top: 1em;
      margin-bottom: 40px;
      user-select: none;
      overflow-x: auto;
    }
  </style>
  <!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
  <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
  <script>
    const watchExampleVM = Vue.createApp({
      data() {
        return {
          question: '',
          answer: 'Questions usually contain a question mark. ;-)'
        }
      },
      watch: {
        // whenever question changes, this function will run
        question(newQuestion, oldQuestion) {
          if (newQuestion.indexOf('?') > -1) {
            this.getAnswer()
          }
        }
      },
      methods: {
        getAnswer() {
          this.answer = 'Thinking...'
          axios
            .get('https://yesno.wtf/api')
            .then(response => {
              this.answer = response.data.answer
            })
            .catch(error => {
              this.answer = 'Error! Could not reach the API. ' + error
            })
        }
      }
    }).mount('#watch-example')
  </script>
</body>
</html>

在这里插入图片描述

除上以外,computed和watch的区别主要有:

1、是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。

2、computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,就必须添加immediate属性,设置为true(immediate:true)

3、使用场景:computed 和 watch 的使用场景并不一样,computed 的话是通过几个数据的变化,来影响一个数据,而 watch,则是可以一个数据的变化,去影响多个数据。

4、是否调用缓存:computed中的函数所依赖的属性没有发生变化,调用时会从缓存中读取(如上文所说),而watch不调用缓存。

目录
打赏
0
0
0
0
70
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
178 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
361 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
233 77
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
149 17
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
173 17
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
105 10
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
128 8
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
79 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问