官方是这样说的:在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。 我们可以理解为:this未指向当前的组件实例,在setup被调用之前,data...
Vue3为什么setup()中不能使用this的原因:整个组件的处理过程种根本没有绑定this。 1.从处理节点开始(判断是否为component节点,还有html片段等),如果是component节点,执行processComponent函数。 2.processComponent函数中,挂载组件调用mountComponent方法 、 3.mountComponent方法中,创建组件实例,传入setupComponent方法,对组件...
在vue2中,我们可以在optionsApi中调用this来指向当前组件的实例,但是在vue3的setup中并不能这样做,因为setup位于组件创建成功后但是并没有解析data、computed、methods中间,所以他们无法从setup中调用this去获得 源码阅读 1.vue源码核心部分 2.setup位置 在runtime-core内的component文件中,我们发现setup仅在实例创建成功...
setup(props, { attrs, slots, emit }) { console.log(props.message); console.log(attrs.id, attrs.class); console.log(slots); console.log(emit); return{ title:"Hello Home", counter:100, }; }, methods: { btnClick() { this.$emit(""); }, }, }; 03_setup的返回值.vue <templa...
vue3的组合式api setup()中,是在ui创建之前初始化,this并没有初始化,所以在vue3中的setup中,this是不能使用的,可是iview的api中调用都是采用this.***进行调用,如何解决呢? 一、 背景 搭配 使用组合式 API 比等价情况下的选项式 API 更高效,对代码压缩也更友好。这是由于 形式书写的组件模板被编译为了一...
setup函数的返回值 setup不可以使用this App.vue <template> <home message="hahahaha" id="aaa" class="bbbb"></home> </template> import Home from "./Home.vue"; export default { components: { Home, }, }; 1. 2. 3. 4. 5...
1、setup和以前的api(data,methods,computed等)并不冲突,也是可以相互访问的,值得注意的是setup里面不能用this,并且在setup执行的时候组件实例还未创建完毕,故不也能使用data,methods,computed定义的变量和函数。如下混编示例:import { getCurrentInstance} from 'vue' setup() { const count = 10; // 非响应式的...
有人说不能使用this是因为setup在beforecreate之前执行,vue实例还没创建,那这样的话为啥setup能取代beforecreate和creatd呢?官方说setup是围绕beforeCreate和creatd的,不太理解,可以给我详细解释一下吗? 前端vue.js 有用关注3收藏 回复 阅读2.2k 1 个回答
由于我们不能在 setup函数中使用 data 和 methods,所以 Vue 为了避免我们错误的使用,直接将 setup函数中的this 修改成了 undefined 三、定义响应式数据 ref reactive vue3通过ref reactive来定义响应式数据 ref我们用来将基本数据类型定义为响应式数据,其本质是基于Object.defineProperty()重新定义属性的方式来实现(ref...