vue setup基本使用

setup基本结构

setup(props, {slots,attrs,emit}) {
    const name = 'name'
    return {
            // 模板中要绑定的值
      name
    }
  }

此时name只会在初次创建的时候进行赋值，如果中间想要改变name的值，那么需要借助composition api中的
reactive。

reactive

setup(props, {
    slots,
    attrs,
    emit
  }) {
    const state = reactive({
      name: 'name'
    })
    setTimeout(() => {
      state.name = 'name2'
    }, 1000)
    return {
      state
    }
  }

此时，在1秒后，能在页面上看到我们所期望的'name2'

<div>
  <h1>{{state.name}}</h1>
</div>

由于在页面上使用reactive对象，我们需要写类似上面的内容，可能我们会想如下的操作

<div>
  <h1>{{name}}</h1>
</div>

 setup(props, {
    slots,
    attrs,
    emit
  }) {
    const state = reactive({
      name: 'name'
    })
    setTimeout(() => {
      state.name = 'name2'
    }, 1000)
    return {
      ...state
    }
  }

虽然这样不用写state了，但是此时页面无法达到我们预期的'name2'，因为state使用...展开运算符后，里面的属性不再是reactive了。

ref

<template>
<div>
  <h1>{{username}}</h1>
</div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref
} from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const state = reactive({
      name: 'name'
    })
    const username = ref('username')
    setTimeout(() => {
      username.value += '1'
    }, 1000)
    return {
      username
    }
  }
});
</script>

使用ref也能达到我们预期的'username1',并且在模板中,vue进行了处理，我们可以直接使用username而不用写username.value.

ref和reactive的关系:

ref是一个{value:'xxxx'}的结构，value是一个reactive对象

computed

同之前的computed

<template>
<div>
  <h1>{{username}}</h1>
  <h1>{{userInfo}}</h1>
</div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  reactive,
  ref
} from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const state = reactive({
      name: 'name'
    })
    const username = ref('username')
    const userInfo = computed(() => {
      return `username:${username.value}`
    })
    setTimeout(() => {
      username.value += '1'
    }, 1000)
    return {
      username,
      userInfo
    }
  }
});
</script>

watchEffect

用于有副作用的操作，会自动收集依赖。

和watch区别

无需区分deep，immediate，只要依赖的数据发生变化，就会调用

setup返回render函数

1. setup只会在组件创建的时候执行一次，后面只会调用render函数，因此一些赋值应该放在render函数中，而不是在setup中