文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

关于Vue的 watch、computed和methods的区别汇总

2024-04-02 19:55

关注

1 前言

创建一个Vue实例时,可以传入一个选项对象


const vm = new Vue({
  data: {
    msg: 'hello'
  },
  computed: {},
  methods: {},
  watch: {}
})

这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但不限于datamethods、computed、watch等等

其中methodscomputedwatch都能通过函数来对数据进行处理或作出响应,这三者有差异,但很容易混淆

2 基础用法

script引入vue.js,下面的代码都在如下html中运行


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Methods</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    
  </body>
  <script>
    
  </script>
</html>

2.1 methods 方法

methods选项中的定义的函数称为方法,在Vue实例化的过程中,methods对象中的方法将被混入到Vue实例中,成为Vue实例的方法。可以直接通过Vue实例访问这些方法


<body>
  <div id="example">
    <!-- 显示:a:1 -->
    <p>a:{{ plus() }}</p> 
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    methods: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // 查看控制台输出的vm,可以看到它有一个方法是:plus: ƒ (),⚠️注意是方法
  console.log(vm.plus()); // 直接通过vm实例访问方法,输出:1
</script>


需要主动调用methods中的函数才能执行,a的值改变并不能让页面中的<p>a:{{plus()}}</a>跟着更新

2.2 computed 计算属性

computed选项中定义的函数称为计算属性,在Vue实例化的过程中,computed对象中的计算属性将被混入到Vue实例中,成为Vue实例的同名属性。


<body>
  <div id="example">
    <!-- 显示:a:1 -->
    <p>a:{{ plus }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    computed: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // // 查看控制台输出的vm,可以看到它有一个属性是:plus:1,⚠️注意是属性
</script>

乍一看好像computedmethods功能一样,确实在这个例子中二者展示效果相同

事实上通过打印vm实例以及访问方式已经体现出二者的一个不同之处:

另外,和方法不同的是,计算属性能够跟着它依赖的数据变化而进行响应式更新,即a变化时,plus属性也会更新

2.3 watch 侦听器

watch选项中的键值对称为侦听器或者说监听属性/监听属性,键是需要观察的表达式,值是对应的回调函数(值还可以是其他形式,此处不展开)

Vue实例化的过程中,这些需要侦听的变量会被记录下来,当这些变量发生变化的时候,对应的回调函数就会执行


<body>
  <div id="example">
    <!-- 显示:a:1 -->
    <p>a:{{ a }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    watch: {
      a: function () {
        console.log("a发生了变化"); // 因为a的值变了,回调函数执行
        console.log(this.a);
      },
    },
  });
  vm.a = 1; // 这里直接手动改变a的值
</script>

3 三者的区别

3.1 方法 VS 计算属性

除了2.2中已经提到的两点区别之外,还有最重要的区别是:

下面用表格的形式对这两者的区别进行总结:

methods computed
Vue实例化后成为vm实例的什么 成为vm实例上的方法 成为vm实例上的属性
能否根据依赖的数据进行响应式更新 不能,需要主动调用方法
能否缓存 不能,每次调用重新执行 能,依赖的数据不变,会从缓存中取值

3.2 计算属性 VS 侦听器

如果某个值需要通过一个或多个数据计算得到,就使用计算属性

侦听属性主要是监听某个值的变化,然后进行需要的逻辑处理;此外当需要在数据变化时执行异步或开销较大的操作时,侦听属性就比较有用,具体例子可见vue文档-侦听器

到此这篇关于关于Vue的 watchcomputedmethods的区别汇总的文章就介绍到这了,更多相关Vuewatchcomputedmethods的区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯