Vue3 watch setup

<template>
  <button @click="change">count is: {
    
    {
    
     state.count }}</button>
</template>

<script>
import {
    
     reactive, watch } from 'vue'
export default {
    
    
  setup () {
    
    
    let state = reactive({
    
    count: 0})
    let change = () => state.count++;
    watch(state, () => {
    
    
      console.log(state, '改变')
    })
    return {
    
     state, change }
  }
}
</script>

watch 第一个参数可以传递参数，也可以传递函数。

<template>
  <button @click="change">count is: {
    
    {
    
     state.count }}</button>
</template>

<script>
import {
    
     reactive, watch } from 'vue'
export default {
    
    
  setup () {
    
    
    let state = reactive({
    
    count: 0})
    let change = () => state.count++;
    watch(() => state.count, (oldVlaue, newValue) => {
    
    
      console.log(oldVlaue, newValue, '改变')
    })
    return {
    
     state, change }
  }
}
</script>

<template>
  <button @click="change">count is: {
    
    {
    
     state.count }}</button>
</template>

<script>
import {
    
     reactive, watchEffect } from 'vue'
export default {
    
    
  setup () {
    
    
    let state = reactive({
    
    count: 0})
    let change = () => state.count++;
    watchEffect(() => {
    
    
      console.log(state.count, '改变')
    })
    return {
    
     state, change }
  }
}
</script>

1、watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。

2、watch 可以访问侦听状态变化前后的值，而 watchEffect 没有。

3、watch 是属性改变的时候执行，而 watchEffect 是默认会执行一次，然后属性改变也会执行。

(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点
(2)之前的data、声明周期、自定义函数都放置在内
(3)创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用

1、使用
export default{
setup(props,context){

	props:
		组件传递的参数,不要使用解构赋值,会使得参数失去响应性
	
	context:
		上下文对象            对应之前的
		    context.attrs    this.$attrs 
		    context.slots	 this.$slots
		    context.emit	 this.$emit	

		    ...
	
}

}

猜你喜欢