Vue3新特性学习

组合式API

setup语法糖

.vue文件中使用方法：

<script setup> </script>

setup() 写法

不使用setup语法糖时：

需要使用setup()钩子，需要返回值将数据暴露给模板使用

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
  mounted() {
    console.log(this.count) // 0
  }
}
</script>

使用setup语法糖的写法

script中的变量、函数以及import引入的内容等可以直接在模板中使用

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

props 声明

不使用语法糖时

使用props选项声明

export default {
  props: ['foo'],//使用数组，也可以使用对象
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

使用语法糖时

使用defineProps()宏函数来声明

<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>

emits

不使用语法糖时

子组件向父组件传递信号，
在模板中，使用$emit('signal') 发出信号
在脚本中，使用emits:['signal'] 声明信号
在脚本中，使用ctx.emit()发出信号，ctx为setup(props,ctx)函数的第二个参数

使用语法糖时

子组件向父组件传递信号，
在模板中，使用$emit('signal') 发出信号
在脚本中，使用defineEmits(['signal'])宏函数声明信号
在脚本中，使用emit()发出信号

继续更新

---