setup

• 理解：Vue3.0中一个新的配置向，值为一个函数
• setup是所有Composition API（组合API） ”表演的舞台“
• 组件中所有用到的:数据、方法等等，均要配置在setup中
• setup函数的两种返回值：
  • 若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）
  • 若返回一个渲染函数，则可以自定义渲染内容（了解）

使用setup函数后可以直接再函数内定义变量修改变量和方法，不用在data中定义数据，再去metheds中写方法，注意每次都要返回数据和方法

export default {

  data() {

    return {

    }

  },

  setup() {

函数内部的变量、函数是局部的

这个函数的返回值可以被当前组件的任意地方使用

这个函数内部不要使用this来操作组件数据

setup返回的对象中的数据与Data中的数据重名了，setup的优先级更高

Setup在组件加载期间，只会运行一次

    let a = "a的值"

    let msg = "msg的值"

    let change = function () {

      console.log(11111)

      this.msg = "修改msg的值"

    }

    return { msg, a, change }

  }

}

 

语法糖写法：在script标签中写setup就不用再反复return

<script setup>

  var msg="msg的值哟！"

  var a="a的值"

  var change =function(){

    console.log(333333)

  }

</script>

 

 

 

 

注意点

 

• 尽量不要和Vue2.x配置混用
• Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法
• 但在setup中不能访问到Vue2.x配置(data，methods，computed......)
• 如有重名，setup优先
• setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性