一.选项式api与组合式api的区别
选项式api
组合式api
像一个函数把某个功能的每一个部分封装在一起
二.setup的概述
1.选项式写法
2.组合式写法
1.setup()函数
对象简写
name确实修改了，但不是响应式的
html
<template>
<div>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</div>
</template>
<script>
import { shallowReactive } from 'vue';
// export default {
// name:'Person',
// data(){
// return{
// name:'张三',
// age:18,
// tel:'13888888888888'
// }
// },
// methods:{
// showTel(){
// alert(this.tel);
// }
// }
// }
export default {
name:'Person',
setup(){
//数据
let name='张三' //此时的name并不是响应式
let age=18 //age也不是响应式
let tel='123334442' //tel也不是响应式
//方法
function changeName(){
name='赖全烙'
}
function changeAge(){
age+=1;
}
function showTel(){
alert(tel);
}
return{name,age,tel,changeAge,changeName,showTel}
}
}
</script>
<style lang="scss" scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin-right: 10px;
}
</style>2. setup的返回值
setup的返回值不一定得是对象，可以是一个渲染函数 函数里直接返回内容
返回的页面
3.setup与选项式api(面试)
setup和选项式api能不能同时存在
答案是 能
data可以读取setup的内容吗
可以，setup的生命周期更早
3.setup的语法糖
这样写的话就能把重点都放在写数据上了
html
<template>
<div>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</div>
</template>
<script>
import { shallowReactive } from 'vue';
export default {
name:'Person',
// setup(){
// //数据
// let name='张三' //此时的name并不是响应式
// let age=18 //age也不是响应式
// let tel='123334442' //tel也不是响应式
// //方法
// function changeName(){
// name='赖全烙'
// }
// function changeAge(){
// age+=1;
// }
// function showTel(){
// alert(tel);
// }
// return{name,age,tel,changeAge,changeName,showTel}
// }
}
</script>
<script setup>
//数据
let name='梁安邦'
let age=13
//方法
function changeName(){
name='赖全烙'
}
function changeAge(){
age+=1;
}
function showTel(){
alert(tel);
}
</script>
<style lang="scss" scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin-right: 10px;
}
</style>1.defineOptions()
如何解决需要写两个script的问题，原本一个script来写组件，一个来写选项式api，现在只需要defineOptions
html
<template>
<div>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看联系方式</button>
</div>
</div>
</template>
<script>
import { shallowReactive } from 'vue';
// export default {
// name:'Person',
// setup(){
// //数据
// let name='张三' //此时的name并不是响应式
// let age=18 //age也不是响应式
// let tel='123334442' //tel也不是响应式
// //方法
// function changeName(){
// name='赖全烙'
// }
// function changeAge(){
// age+=1;
// }
// function showTel(){
// alert(tel);
// }
// return{name,age,tel,changeAge,changeName,showTel}
// }
// }
</script>
<script setup>
defineOptions({
name: 'Person234', // 组件名
inheritAttrs: false, // 其他选项
// ...
})
//数据
let name='梁安邦'
let age=13
//方法
function changeName(){
name='赖全烙'
}
function changeAge(){
age+=1;
}
function showTel(){
alert(tel);
}
</script>
<style lang="scss" scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin-right: 10px;
}
</style>注意没有写组件名的时候默认以文件名为组件名
