vue2 监听器的两种写法

在 Vue2 中，可以使用两种方式来定义监听器：

1. 使用 `watch` 属性来监听数据的变化，当数据发生变化时，执行相应的回调函数。

watch: {
  // 监听 firstName 数据的变化
  firstName: function (newVal, oldVal) {
    console.log('firstName changed from', oldVal, 'to', newVal)
  }
}

2. 使用 `$watch` 方法来监听数据的变化，当数据发生变化时，执行相应的回调函数。

// 监听 firstName 数据的变化
this.$watch('firstName', function (newVal, oldVal) {
  console.log('firstName changed from', oldVal, 'to', newVal)
})

相关问题

vue中计算属性两种写法

在Vue中，计算属性有两种常见的写法。下面我将为你介绍这两种写法。

1. 声明式写法（简写）：

computed: {
  // 声明一个计算属性，名为fullName
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

在这种写法中，我们直接在`computed`选项中声明计算属性，并以函数的形式定义其逻辑。计算属性的名称是`fullName`，我们可以通过`this.fullName`来访问它。

2. 对象式写法：

computed: {
  // 声明一个计算属性，名为fullName
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

在这种写法中，我们使用了对象的形式来声明计算属性。计算属性的名称仍然是`fullName`，但是我们使用了一个匿名函数来定义其逻辑。

无论是哪种写法，计算属性的作用都是根据依赖的数据进行计算，并返回一个新的值。计算属性会根据依赖的数据的变化自动更新。

希望这个解释对你有所帮助！如果还有其他问题，请随时提问。

vue3生命周期 两种写法

Vue 3 的生命周期有两种不同的写法：Options API 和 Composition API。

1. Options API：这是 Vue 2.x 中常用的写法，通过在组件选项中定义生命周期钩子函数来实现。常见的生命周期钩子函数包括 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount` 和 `unmounted` 等。

示例代码如下：

export default {
  beforeCreate() {
    // 组件实例刚刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  },
  created() {
    // 组件实例已经完全创建，数据观测 (data observer) 和 event/watcher 事件配置完成
  },
  beforeMount() {
    // 组件挂载之前被调用，相关的 render 函数首次被调用
  },
  mounted() {
    // 组件挂载完成后被调用，此时 DOM 已经渲染完毕
  },
  beforeUpdate() {
    // 组件更新之前被调用，发生在虚拟 DOM 打补丁之前
  },
  updated() {
    // 组件更新完成后被调用，此时 DOM 已经重新渲染
  },
  beforeUnmount() {
    // 实例销毁之前调用，在这一步，实例仍然完全可用
  },
  unmounted() {
    // 组件销毁后调用，此时实例完全被销毁
  }
}

2. Composition API：这是 Vue 3 中引入的新特性，可以更灵活地组织组件逻辑。使用 Composition API，我们可以使用 `setup` 函数来定义生命周期钩子函数。

示例代码如下：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // 组件挂载之前被调用
    })

    onMounted(() => {
      // 组件挂载完成后被调用
    })

    onBeforeUpdate(() => {
      // 组件更新之前被调用
    })

    onUpdated(() => {
      // 组件更新完成后被调用
    })

    onBeforeUnmount(() => {
      // 实例销毁之前调用，在这一步，实例仍然完全可用
    })

    onUnmounted(() => {
      // 组件销毁后调用，此时实例完全被销毁
    })
  }
}

这是 Vue 3 中两种常用的生命周期写法。可以根据实际需求选择合适的写法。