vue3的setup中的那些操作_scriptsetup无this-CSDN博客

本文详细介绍了Vue3中的setup函数，包括ref和reactive的区别与用法，以及如何通过setup进行数据定义、响应式处理、props和emit的使用。强调了响应式数据和对象的实现原理以及toRefs和computed的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一，setup中没有this

<script setup>
  import { ref } from 'vue'
 
  const divRef = ref(null)
 
  divRef.value
 
</script>

这里的ref(null)，ref用来创建一个支持vue的响应式数据，会将divRef用vue的Watcher处理一遍，通过divRef.value来修改值的数据，注意不能直接用=给divRef赋值，因为这样会改变divRef的引用地址
可以搜一下vue3中setup的ref用法

setup() 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑写在 setup 里就可以

从定义的角度：

ref() 用来定义：基本类型的变量

reactive()函数用来定义：更新复杂类型的变化(数组/对象)

从原理角度来说：

 1.ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）

  2.reactive是通过Proxy来实现响应式(数据劫持），并通过Reflect操作源对象内部的数据

从使用角度：

 1.ref定义的数据：操作数据需要.value,读取数据时候模版中直接读取不需要.value

  2.reactive定义数据：操作和读取均不需要.value

注： return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴漏的变量和方法

setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      ...toRefs(state)
    }
  }

ref 实现响应式数据
reactive 实现响应式对象数据
toRefs 结构后的数据转换为响应式数据
computed 转换为计算属性
watch 就是监听
provide 父子组件父传递数据
inject 父子组件子接收数据
onMounted vue生命周期
…

setup(props,{emit})
props.key 获取传过来的数据