setup与选项式API

setup与选项式API

setup能否和选项式API中的data、methods同时存在

• 直接在代码中实验一下

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button><hr><h2>{{ da }}</h2><button @click="dat">点击methods的打印值</button></div>
</template>
<script lang="ts">
import { convertCompilerOptionsFromJson } from 'typescript'
import { ref } from 'vue'export default{name: 'Person',data(){return {da: "data中的数据"}}, methods: {dat(){console.log("methods中的方法");}},setup() {let name = ref('张三')let age = ref(23)let tel = ref(17766668888)function changeName() {name.value = "zhangsan"}function changeAge() {age.value += 1}function showTel() {alert(tel.value)}return {name,age,changeName,changeAge,showTel}}}
</script>

• 确实是可以同时存在的，但是不建议这么做，相信也没有人会这么做；

data中能不能读取到setup中的数据

• 也是直接用代码来实验

<h2>{{ db }}</h2><button @click="dat">点击methods的打印值</button></div>
</template>
<script lang="ts">
import { convertCompilerOptionsFromJson } from 'typescript'
import { ref } from 'vue'export default{name: 'Person',data(){return {da: "data中的数据",db: this.name,}}, 

• 说明也是可以读到的，这能读取到也说明了，setup的加载是比data要更加的优先的，所有data能读取到setup里面的内容

但是setup是无法读取到选项式API中data的数据的！

总结

• 其实很好理解，因为vue3的设计就考虑到了向前兼容，所有setup是可以和选项式API的语法共存的；
• setup读取不到data里面的数据刚刚也说了，因为setup初始化是比data要快的；

一些注意事项

• 如果setup的数据和data中的数据同名，那么setup中的数据会被覆盖，因为setup加载的更快嘛；
• data如果想要修改setup的值，需要是用value，不然就不是响应式的了；