vue-next（vue3.0）学习笔记（2）

watch

完全等效于vue2.0的this.$watch

• watch 需要侦听特定的数据源，并在回调函数中执行副作用
• 默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调

可以侦听单个数据源

// 侦听器的数据源可以是一个拥有返回值的getter函数，也可以是ref
const state = reactive({ count: 0 });
watch (
	() => state.count,
	(count, prevCount) => {
		console.log(count,prevCount)
	}
)
const count = ref(0)
watch(count, (count, prevCount) => {
  console.log(count,prevCount)
});

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数
相对于watch而言可以在刚开始的时候就可以执行，而watch只能在数据变化的时候执行

export default {
  props: {
    title: String,
  },
  setup(props) {
    watchEffect(() => {
      console.log(`title is: ` + props.title);
    });
  }
};

新生命周期函数

可以直接导入 onXXX 一族的函数来注册生命周期钩子

• 这些生命周期钩子注册函数只能在 setup() 期间同步使用
• 在卸载组件时，生命周期钩子内部同步创建的侦听器和计算状态也将删除

vue2.0-------------- vue3.0
beforeCreate ->使用setup()
created ->使用setup()
beforeMount ->onBeforeMount
mounted->onMounted
beforeUpdate->onBeforeUpdate
updated->onUpdated
beforeDestory->onBeforeUnmount
destroyed->onUnmounted
errorCaptured->onErrorCaptured