vue3+setup写法

原创

已于 2022-09-22 09:11:19 修改 · 5.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

于 2022-04-02 15:42:39 首次发布

本文介绍了Vue3的Composition API中的setup函数，它是beforeCreate和created生命周期的前置阶段。在setup中，变量和方法需要return出去才能在模板中使用。接着讲解了如何使用ref和reactive创建响应式数据，以及它们的区别。ref适用于基本类型数据，而reactive用于对象或数组。此外，文章还提到了setup中父子组件的传值方式以及计算属性和监听器的使用。

setup函数是 Composition API（组合API）的入口
在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

<script>
 export default {
   
   
  name: 'App',
  setup(){
   
   
   let name = 'm'
   //返回一个对象
   return {
   
   
    name
   }
  }
 }
</script>

//如果大家不喜欢return这样的写法的话
//可以用vue3新语法糖<script setup>就相当于自动帮你返回了定义的变量与方法
<script setup>
 export default {
   
   
  name: 'App',
  setup(){
   
   
   let name = 'm'
  }
 }
</script>

setup函数就相当一个vue2生命周期中的beforeCreate和created，但它执行的顺序还要快，setup在beforeCreate,created前，也就是它里面的this打印出来是undefined。

ref与reactive
在vue3怎么让定义的变量变为响应式数据呢，很简单用ref与reactive就可以了


## vue2.x写法

<script >
export default{
   
   
  data(){
   
   
    return{
   
   
      inputValue:'我是响应的值',
      user:{
   
   
	      name: "",
	      address: ""
    }
  }
}
</script>
------------------------------------------------------------------------<