数据

data中return的数据都可以在模板中使用

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
        }
    },
    template: `
        <div>{{message}}</div>
    `
})
const vm = app.mount('#root')

修改data中变量值的方法：

• vm.$data.message = 'bye'
• vm.message = 'bye world'

方法

注意：

• 方法中this指向为vue组件的实例(也就是 Vue.createApp()返回的对象)
• 不能在methods中使用箭头函数的方法来声明函数，否则this指向就变成了window(箭头函数自己没有this)

vue中的方法不是只可以绑定事件，还可以把调用函数的返回作为表达式放到模板的插值表达式中

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
        }
    },
    methods:{
        formatString(string) {
            return string.toUpperCase()
        }
    },
    template: `
        <div @click="handleClick">{{formatString(message)}}</div>
    `
})
const vm = app.mount('#root')

计算属性

基本使用

计算属性是经过data中关联变量值计算得到的变量，它是属性，而不是方法，同在data中定义的变量一样，只不过它的值是动态的可变的

计算属性定义在computed对象中

eg: 商品的价格和数量计算商品的总价

为了让代码更具有语义化，就不将price和count的乘积放到模板字符串中展示了，而是使用变量total表示总价，但是下面的vue不支持下面total的写法

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            count: 2,
            price: 5,
            total: count * price
        }
    },
    template: `
        <div>{{total}}</div>
    `
})
const vm = app.mount('#root')

vue为我们提供了计算属性来解决类似上面的问题

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            count: 2,
            price: 5,
            // 相当于在这声明了total
        }
    },
    computed:{
            total() {
                return this.price * this.count
            }
    },
    template: `
        <div>{{total}}</div>
    `
})
const vm = app.mount('#root')

当total关联的变量count 和 price 的值发生变化时，则total就自动重新计算，这就是计算属性的作用

计算属性和方法的区别

使用方法重新实现一遍上面的效果

const app = Vue.createApp({
      data() {
          return {
              message: 'hello world',
              count: 2,
              price: 5,
          }
      },
      computed:{
              total() {
                  return this.price * this.count
              }
      },
      methods:{
          getTotal() {
              return this.price * this.count
          }
      },
      template: `
          <div>{{getTotal()}}</div>
      `
  })
const vm = app.mount('#root')

乍一看好像和计算属性实现的效果一样啊

修改下代码或许就能看出它们之间的差异：

使用计算属性实现

const app = Vue.createApp({
   data() {
       return {
           message: 'hello world',
           count: 2,
           price: 5,
       }
   },
   computed:{
           total() {
               return Date.now() + this.count
           }
   },
   methods:{
       getTotal() {
           return Date.now() + this.count
       }
   },
   template: `
       <div>{{message}} --- {{total}}</div>
   `
})
const vm = app.mount('#root')

message值未修改时的时间戳

message值修改后的时间戳

我们发现修改message的值页面重新渲染，但是计算属性不会重新执行

使用方法实现

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            count: 2,
            price: 5,
        }
    },
    computed:{
            total() {
                return Date.now() + this.count
            }
    },
    methods:{
        getTotal() {
            return Date.now() + this.count
        }
    },
    template: `
        <div>{{message}} --- {{getTotal()}}</div>
    `
})
const vm = app.mount('#root')

message值未修改时的时间戳

message值修改后的时间戳

使用方法后，当我们修改messgae的值后我们发现返回的时间戳变了，说明getTotal()方法被重新执行了一次

总结： 计算属性和方法的区别

• 当计算属性依赖的变量发生变更时，才会重新执行计算
• 只要页面重新渲染，方法就会被重新执行和计算

计算属性的特色是内部带有缓存机制,因此在渲染的时候它会更高效

侦听器watch

基础使用

一般遇到异步的情况可以使用侦听器watch去解决，当侦听器中的变量值发生变化时，侦听器中与变量对应的函数会自动执行

使用watch监听变量的改变，并做一些异步的操作

使用方法：在watch对象中重新定义data中的变量，同计算属性一样，也要写成函数的形式

eg: 监听data中的price，如果它发生变化，2秒后就打印一个值

const app = Vue.createApp({
        data() {
            return {
                message: 'hello world',
                count: 2,
                price: 5,
            }
        },
        watch:{
            price() {
                setTimeout(() => {
                    console.log('data中的price发生了变化');
                }, 2000);
            }
        },
        computed:{
                total() {
                    return Date.now() + this.count
                }
        },
        methods:{
            getTotal() {
                return Date.now() + this.count
            }
        },
        template: `
            <div>{{message}} --- {{getTotal()}}</div>
        `
    })
const vm = app.mount('#root')

使用侦听器实现之前计算属性的例子

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world',
            count: 2,
            price: 5,
            newTotal: 10
        }
    },
    watch:{
        price(current,prev) {
            this.newTotal = current * this.count
        }
    },
    computed:{
            total() {
                return Date.now() + this.count
            }
    },
    methods:{
        getTotal() {
            return Date.now() + this.count
        }
    },
    template: `
        <div>{{message}} --- {{newTotal}}</div>
    `
})
const vm = app.mount('#root')

price值修改之前

price值修改之后

从上面可以发现，当price发生变化时watch侦听器中的price函数会自动执行

侦听器watch实际上是侦听器底层的实现逻辑

那么侦听器watch和计算属性的区别？

如果在侦听器中不做一些异步操作，那么同计算属性比较，实现方式就显得冗余

总结：

• computed计算属性和methods中方法都能实现的功能，建议使用computed，因为计算属性有缓存性能更佳
• computed计算属性和侦听器watch都是实现的功能，建议使用computed，因为计算属性更加简洁(侦听器的优势是监听数据变化后做一些异步操作)
• 在实际开发中能用computed计算属性实现的功能，就有计算属性，实现不了的再使用watch侦听器和methods方法