vue3没有this怎么办-静态百科

在Vue3中，可以使用Composition API来代替this。Composition API是一种新的API风格，它将逻辑代码组织为函数，而不是像Vue2那样将它们分散在不同的生命周期钩子中。通过使用Composition API，我们可以轻松地将逻辑代码复用，使代码更加可读和易于维护。此外，Composition API还提供了一些新的特性，例如ref和reactive，使得数据的响应式处理更加方便。因此，虽然Vue3中没有this，但是使用Composition API可以轻松地解决这个问题。

vue3没有this怎么办

1. 使用vue3时，this指向组件实例的方式被废弃了。
2. 这是因为vue3使用了Composition API，通过使用setup函数来替代之前的选项API，setup函数中的参数context可以代替this，包含了组件实例的所有属性和方法。
3. 如果需要访问组件实例中的属性或方法，可以使用ref或reactive来创建响应式数据，并将其传递给子组件或其他函数中使用。
同时也可以使用provide/inject来实现跨层级组件间的数据传递。

vue3没有this怎么办

在Vue3项目中可以使用this.$router.push等方法进行路由的跳转，但是在Vue3的setup函数里，并没有this这个概念，因此如何使用路由方法：

1.// 在新的vue-router里面尤大加入了一些方法，比如这里代替this的useRouter，具体使用如下：

//引入路由函数

import { useRouter } from "vue-router";

//使用

setup() {

//初始化路由

const router = useRouter();

router.push({

path: "/"

});

return {};

}

2.在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取:

</template>

import { onMounted, ref } from 'vue'

export default {

setup(){

const root = ref(null)

onMounted(()=>{

console.log(root.value);

})

return {

root

}

</script>

//第二种方法，也可以通过getCurrentInstance来获取

</template>

import { onMounted, ref, getCurrentInstance } from 'vue'

export default {

setup(){)

const {proxy} = getCurrentInstance()

onMounted(()=>{

console.log(proxy.$refs.root);

})

return {

}

</script>

3.关于element在vue3的使用方法，没有this.$message等方法解决方案

</template>

import { getCurrentInstance } from 'vue'

export default {

setup () {

const instance = getCurrentInstance() // vue3提供的方法，创建类似于this的实例

const doLogin = () => {

instance.proxy.$message({ type: 'error', text: '登录失败' }) // 类似于this.$message()

}

return { doLogin }

// 如果想试用this.$message，须在mounted钩子函数中，setup中没有this实例，

//但vue3.0中还是建议在setup函数中进行逻辑操作

mounted () {

this.$message({ type: 'error', text: '登录失败' })

}

</script>

vue3没有this怎么办

先不管vuejs是怎么实现的，你贴的代码里面的this永远指向外层的作用域是因为“箭头函数”。箭头函数好用，但是不要乱用，很多同学不知道箭头函数的特性，到处都用实际上带来了很多问题，但是这些问题又在某种程度上被babel之类的编译器抹掉了，所以实际上写了一堆有bug的代码自己却不知道。

箭头函数有两个特性：函数体内不创建 this 变量，所以你套一万层也没用，因为他自己根本就没有this，所以最后你用的this全都是外面的this，这就让箭头函数有了仿佛可以支持词法层面的this的特性。

箭头函数函数体内不创建 arguments 变量，所以你在箭头函数内部也用不了arguments。一些JS的新特性以及babeljs、coffe之类的预编译工具确实可以带来很多方便，但是使用之前一定要对其特性有所了解，否则写错了都不知道。

vue3没有this怎么办

相关文章