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粘贴复制功能的实现过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令），这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下2023-11-11
vue前端重构computed及watch组件通信等实用技巧整理
这篇文章主要为大家介绍了vue前端重构computed及watch组件通信等实用技巧整理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法
这篇文章主要给大家介绍了关于vue3+ts+vite打包后静态资源404无法加载js和css问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
本篇文章主要介绍了详解Vue应用部署到服务器的正确方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
本文主要介绍了vue-router4动态路由刷新404/白屏的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本文主要介绍了vue单页面改造多页面应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最新评论