Vue中computed、methods、watch区别

1. computed计算属性

计算属性最常见的写法就是函数写法:

<template>
  <div class="home">
    {
   {
   formMsg}}
    <button @click="formMsg = '胡崽崽'">点击修改</button>
  </div>
</template>

<script>
export default {
   
  name: 'Home',
  data() {
   
    return {
   
      msg: 'hello'
    }
  },
  computed: {
   
    formMsg() {
   
    // 必须要有返回值，没有return值为undefined，计算属性作为属性({
   {formMsg}})去使用
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

当我们去点击按钮修改formMsg的值时，浏览器会报错
这是因为计算机属性不能直接赋值，它里面没有设置set属性，我们可以为其添加一个set属性

<template>
  <div class="home">
    {
   {
   formMsg}}	// 会显示：胡崽崽
    <button @click="formMsg = '胡崽崽'"