methods computed的区别及使用场景

computed和methods的区别
我们先来看两个列子来体会其中的区别和作用
该列子来自于B站;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中的数据、方法、计算属性</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script>
      // app Vue应用
      const app = Vue.createApp({
        // 根组件的配置
        // 数据
        data() {
          return {
            message: 'Hello 哈默',
            // 数量
            count: 10,
            // 单价
            price: 5
          };
        },
  
        methods: {
          onClick() {
            console.log('click', this.message)
          },
          formatString(string) {
            return string.toUpperCase();
          },
          getTotalPrice: function() {
            console.log('方法计算');
            return this.count * this.price;
          }
        },
        template: `
{{ getTotalPrice() }} {{ message }}
`
}); // 根组件 vm const vm = app.mount('#root'); </script> </body> </html>

展示的效果
请添加图片描述
打印的结果:方法计算
当我们在控制台上修改message的值,执行vm.message=‘bye’;
展示的效果就是
请添加图片描述
控制台的打印效果
methods computed的区别及使用场景_第1张图片
你会发现方法计算这几个字重新被打印一遍了,最后的结果也会重新计算一遍(总价);结果并没有缓存;
综上所诉:methods中的方法不能缓存;
缓存就是:相同的结果,不用重新计算,直接拿缓存里的结果,这个意思;

接下来我们看一下子computed方法
上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中的数据、方法、计算属性</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script>
      // app Vue应用
      const app = Vue.createApp({
        // 根组件的配置
        // 数据
        data() {
          return {
            message: 'Hello 哈默',
            // 数量
            count: 10,
            // 单价
            price: 5
          };
        },
        // 计算属性 缓存
        computed: {
          total: function() {
            console.log('计算属性计算');
            return this.count * this.price;
          }
        },
        template: `
{{ total }} {{ message }}
`
}); // 根组件 vm const vm = app.mount('#root'); </script> </body> </html>

展示的效果
请添加图片描述
打印的效果:
请添加图片描述
当你改变message的时候
展示的效果:
请添加图片描述
打印的结果
请添加图片描述
你发现 计算属性计算并没有重新打印;就说明computed都没有执行;
自然而然的conputed就没有重新计算
综上所诉:conmputed的是可以缓存的
当我们改变他的依赖属性的时候;
methods computed的区别及使用场景_第2张图片
展示的效果也变了
请添加图片描述
只有改变了他的所依赖的变量时才会发生改变;
conoputed才会重新计算;
使用场景:使用computed的还是绝大多数的,因为有缓存的效果,
不会因无关数据的变化就引起变化;只有少数才会用methods

methods
我们有时候需要对特定的DOM元素添加事件(类似于点击事件).methods应该是一个包含所需方法的对象;
当我们在methods方法中定义所需要的方法时候,应该尽量避免使用箭头函数
当我们在定义的事件方法内部的时候,类似于在内部遍历数组,这个时候使用this会更加方便,应该箭头函数的this方向会通过作用链访问上级的this指向,而这个this指向恰好是Vue实例

computed
对于任何包含响应式数据的复杂逻辑,我们通常用计算属性来解决
通俗的说:当一个数据,依赖于另一些数据计算而来的结果

你可能感兴趣的:(vue,vue)