vue3
秃头小宝贝@
前端开发
展开
-
vue3中reactive定义的引用类型直接赋值导致数据失去响应式
vue3中reactive定义的引用类型直接赋值导致数据失去响应式<script setup>import {reactive,onMounted} from 'vue'const userMenu=reactive([])onMounted(()=>{ userMenu=[1,2,3]})</script><template> <div>示例:{{userMenu}}</div></template&.原创 2022-04-06 23:07:43 · 10152 阅读 · 1 评论 -
vue3路由配置
步骤:1.安装router2.创建router文件夹,并配置路由和相关路由页面3.在main.js引入1.安装路由命令行 在Windows下输入npm install -g @vue/cli2.创建router文件夹,并配置路由和相关路由页面在src目录下,新建一个router目录,在router下新建一个index.jsindex.js文件代码如下:import { createRouter, createWebHashHistory } from..原创 2022-04-03 11:23:28 · 782 阅读 · 0 评论 -
getCurrentInstance
getCurrentInstancegetCurrentInstance支持访问内部组件实例。WARNINGgetCurrentInstance只暴露给高阶使用场景,典型的比如在库中。强烈反对在应用的代码中使用getCurrentInstance。请不要把它当作在组合式 API 中获取this的替代方案来使用。import { getCurrentInstance } from 'vue'const MyComponent = { setup() { const ...原创 2022-03-30 21:58:54 · 24212 阅读 · 3 评论 -
Vue中watch和watchEffect
1.watchEffect立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。const count = ref(0)watchEffect(() => console.log(count.value))// -> logs 0setTimeout(() => { count.value++ // -> logs 1}, 100)watchEffect函数 watch的套路是:既要指明监视的属性,也要指明监视的回调。原创 2022-03-30 19:58:45 · 278 阅读 · 0 评论 -
Vue的project和inject实现响应式
project和inject主要用于父孙、父子组件间的通信,但是是非响应式的,我们可以通过ref/reactive将数据变成响应式使用 Provide在setup()中使用provide时,我们首先从vue显式导入provide方法。这使我们能够调用provide来定义每个 property。provide函数允许你通过两个参数定义 property:name (<String>类型) value使用MyMap组件后,provide 的值可以按...原创 2022-03-30 19:13:31 · 2440 阅读 · 0 评论