vue3 中的setup

setup 的运用和其意义
reactive, 创建一个响应式数据
ref, 用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI ref和reactice的最大区别是 ref 返回的是{value: xxx}
computed, 计算属性 有缓存
watchEffect 监听 没缓存

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  {{ name }} - {{ name2 }}
</template>

<script lang="ts">
import {defineComponent, PropType, reactive, ref, computed, watchEffect} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
//因为是object 使用接口定义类型
interface config {
  name: string
}
export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  //只会执行一次
  setup(props, {slots, attrs, emit}){
    // let name =  "wml"
    // const state = reactive({
    //   name: 'wml'
    // })
    //在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI
    // ref和reactice的最大区别是 ref 返回的是{value: xxx}
    const namrRef = ref('jok')
    setInterval(() => {
      // state.name += '1'
      namrRef.value += '1'
    }, 1000)
    // 不要在computed里面做任何赋值操作。
    //计算属性
    const computedNameRef = computed(() => {
      // return namrRef.value += '2'  这种是错误的
       return namrRef.value + '2'
    })
    // 如果里面的值发生变化就会（只监听watchEffect里面的值）
    //监听
    watchEffect(()=>{
      console.log(namrRef.value)
    })
    //那么如果想返回多个参数的时候 state还是响应式的 reactice 的应该怎么办，就使用ref
    // return state
    return {
      //返回的之后不用返回ref的value 因为vue会自己判断如果是ref的话会处理
      name: namrRef,
      name2: computedNameRef
    }
    // return {name: state.name} 这种方法是不能触发setInterval的函数的 因为state声明的时候是reactive的对象，如果这样定义他就不是响应式的了
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>