Vue3中的setup执行时机与注意点说明
更新时间：2022年07月02日 10:07:25 作者：山竹回家了
这篇文章主要介绍了Vue3中的setup执行时机与注意点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
setup执行时机与注意点
setup执行时机在beforeCreate之前
在setup中是不能使用data和methods，因为还没初始化好
由于不能再setup函数中使用data和methods，所以Vue为了避免我们错误的使用，它直接将setup函数中的this修改成undefined.
setup只能同步，不能异步
Vue3.0 setup()函数用法
setup()函数作为在组件内部使用组合API的入口点
setup()函数在初始的prop解析后，组件实例创建之前被调用。对于组件的生命周期钩子，setup()函数在beforeCreate钩子之前调用。
如果setup()函数返回一个对象，该对象上的属性将被合并到组件模板的渲染上下文中。如：
setup() {
// 为目标对象创建一个响应式对象
const state = Vue.reactive((count: 0})
function increment() {
state.count++
}
// 返回一个对象，该对象上的属性可以在模板中使用
return {
state,
increment
}
}setup()函数返回的对象有两个属性
一个是响应式对象（即为原始对象创建的代理对象），另一个是函数。在DOM模板中，可以世界使用这两属性，如：
<view @click="addClick">count值：{{state.count}}</view>setup()函数可以接收两个可选的参数
第一个是已解析的props。通过该参数可以访问在props选项中定义的prop，如：
app.component('ButtonItem', {
props: ['buttonTitle'],
setup(props) {
console.log(props.buttonTitle)
}
})setup()函数接收的第二个可选的参数是一个context对象
该对象是一个普通的JavaScript对象，不是响应式的，可以完全的使用ES6的对象解构语法对context进行解构，另外还公开了3个组件属性，如：
const component = {
setup(props, context) {
// 属性（非响应式对象）
console.log(context.attrs)
// 插槽（非响应式对象）
console.log(context.slots)
// 发出的事件（方法）
console.log(context.emit)
}
}当setup()和选项API一起使用
在setup()函数内部不要使用this，因为setup()函数是在选项被解析之前调用的，在setup()函数内不能访问data、computed和methods组件选项。如下代码是错误范例：
setup() {
function onClick() {
console.log(this) // 并不是预期的this
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-pdf插件实现pdf文档预览方式(自动分页预览)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了vue+iview动态渲染表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-03-03
这篇文章主要介绍了Vue中SSR的作用及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue项目的屏幕自适应多个方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
element-UI el-table树形数据 修改小三角图标方式
这篇文章主要介绍了element-UI el-table树形数据 修改小三角图标方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
下面小编就为大家分享一篇Vue-cli项目获取本地json文件数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
XSS 攻击是页面被注入了恶意的代码,下面这篇文章主要给大家介绍了一次VUE项目中遇到XSS攻击的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
本文通过实例代码介绍对el-table表格的表头操作方法,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue.js中关于“{{}}”的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论