精华内容
下载资源
问答
  • Vue3.0 获取 vue 实例

    千次阅读 2020-10-16 17:38:09
    import { createApp } from 'vue'
    import { createApp } from 'vue' 
    
    展开全文
  • getCurrentInstance方法只有在 development,即开发环境下才能获取到当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的

    上一篇文章:快速使用Vue3最新的15个常用API(1W5+字详解,建议收藏),我向大家介绍了关于Vue3常用的15个API的使用详情,帮助大家快速上手Vue3,也很高兴收到大家的支持,同样也有一些人提出了疑问,尤其是对于 如何获取当前组件实例 这个问题的讨论最为激烈,这里我们就对其进行一些补充

    • 公众号:前端印象
    • 不定时有送书活动,记得关注~
    • 关注后回复对应文字领取:【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

    在Vue2的各个组件中,我们频繁地使用 this ,即获取当前组件实例,是因为每个组件的数据变量、方法都要通过组件实例去获取。

    例如:

    <script>
    export default {
      name: 'App',
      data: {
      	return {
    		name: '前端印象',
    		age: 22
    	}
      },
      methods: {
    	increase() {
    		this.age += 1
    	}
      },
      mounted() {
      	this.increase()
      }  
    }
    </script>
    

    在上面这段代码中很清晰的看到,首先在 data 中声明了两个响应式数据,分别为 nameage;同时定义了一个方法 increase,该方法是将 age 的值 +1;在当前组件挂载后,调用 increase 方法

    无论是获取数据 age,还是获取方法 increase,我们都是从 this,即当前组件实例中获取的

    而到了Vue3,大部分甚至可以说全部的关键代码都集中写在了 setup 函数内,并且在该函数内是无法通过 this 获取到当前组件实例的,那是因为所有的变量、方法都可以直接使用

    例如:

    <script>
    import {ref, onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
      	const name = ref('前端印象')
      	const age = ref(22)
    
    	function increase() {
    		age.value += 1
    	}
    	
    	onMounted(() => {
    		increase()
    	})
    	
        return {name, age}
      }
    }
    </script>
    

    这段代码与上一段代码功能一模一样,但从始至终都没有通过组件实例去获取数据变量或方法,这无疑减少了很多的重复代码,例如多次使用 this,想必Vue3的初衷也不需要我们去获取当前组件实例

    但是上一篇文章讲到的 getCurrentInstance 这个方法确实是可以获取到组件实例的,如图

    在这里插入图片描述
    但这只有在 development,即开发环境下才能获取到当前组件的实例,换句话说就是这个方法只是在开发环境下用于调试使用的;

    那么在生产环境下是什么样的呢?我们把项目打包一下,并打印一下看看,如图所示:

    在这里插入图片描述
    很明显,在 ctx 中根本没有看到当前组件实例的影子,而只有一个 _,我们点进去看看里边是什么,如图所示

    在这里插入图片描述
    通过不断的点击,我们发现 _ 里面是无限循环的 getCurrentInstance 方法的返回结果,所以说该方法的返回结果在开发环境和生产环境下还是有所区别的

    那么,问题又来了,Vue3我们到底如何去获取组件实例呢?这里我想说哈,都这样了,还获取啥组件实例啊,不信我给你捋一遍

    1. 获取数据

    Vue2:

    <script>
    export default {
      name: 'App',
      data: {
      	return {
    		name: '前端印象',
    		age: 22
    	}
      },
      mounted() {
      	console.log(this.name)
      	console.log(this.age)
      }  
    }
    </script>
    

    Vue3:

    <script>
    import {ref} from 'vue'
    export default {
      name: 'App',
      setup() {
      	const name = ref('前端印象')
      	const age = ref(22)
    
    	console.log(name.value)
    	console.log(age.value)
    	
        return {name, age}
      }
    }
    </script>
    

    2. 使用方法

    Vue2:

    <script>
    export default {
      name: 'App',
      methods: {
    	show() {
    		console.log('show方法被调用')
    	}
      },
      mounted() {
      	this.show()
      }  
    }
    </script>
    

    Vue3:

    <script>
    import {onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
    	function show() {
    		console.log('show方法被调用')
    	}
    
    	onMounted(() => {
    		show()
    	})
      }
    }
    </script>
    

    3. 获取当前组件根元素

    Vue2:

    <template>
      <div id="app" ref="root">
    	<p class="child"></p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      mounted() {
      	const el = this.$refs.root
      	console.log(el)
      }  
    }
    </script>
    

    Vue3:

    <template>
      <div id="app" ref="root">
    	<p class="child"></p>
      </div>
    </template>
    
    <script>
    import {ref, onMounted} from 'vue'
    export default {
      name: 'App',
      setup() {
    	const root = ref(null)
    
    	onMounted(() => {
    		console.log(root.value)
    	})
      }
    }
    </script>
    

    4. 子组件向父组件通信

    Vue2:

    <script>
    export default {
      name: 'App',
      methods: {
    	change() {
    		this.$emit('valueChange', 3)
    	}
      } 
    }
    </script>
    

    Vue3:

    <script>
    export default {
      name: 'App',
      setup(props, context) {
    	function change() {
    		context.emit('valueChange', 3)
    	}
      }
    }
    </script>
    

    5. 获取Vuex对象

    Vue2:

    <script>
    export default {
      name: 'App',
      mounted() {
      	console.log(this.$store.state.name)
    	this.$store.commit('show')
      } 
    }
    </script>
    

    Vue3:

    <script>
    import {onMounted} from 'vue'
    import {useStore} from 'vuex'
    export default {
      name: 'App',
      setup(props, context) {
      	const store = useStore()
      	
    	onMounted(() => {
    		console.log(store.name)
    		store.commit('show')
    	})
      }
    }
    </script>
    

    总结:

    大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能,否则在项目打包后,一定会报错的。

    关注公众号「前端印象」,每日更新高质量前端技术文章,还能领取完整版JS版的数据结构与算法代码、近年常考面试题等福利

    展开全文
  • Vue3里常规挂载方法/属性以及调用 在Vue3的开发过程中,难免会在全局挂载方法或者属性。 挂载: // main.ts import App from './App.vue' import _ from 'lodash' const app = Vue.createApp(App) app.config....

    Vue3里常规挂载方法/属性以及调用

    在Vue3的开发过程中,难免会在全局挂载方法或者属性。

    挂载:

    // main.ts
    import App from './App.vue'
    import _ from 'lodash'
    const app = Vue.createApp(App)
    app.config.globalProperties._debounce = _.debounce
    

    使用:

    // App.vue
    setup({
    	const instance = getCurrentInstance()
    	instance.ctx._debounce(func, delay,)
    })
    

    上述使用会出现的问题

    上面的使用方法在开发模式下是完全ok的,一旦将代码打包部署上线后,就会报错
    原因是在开发模式和生产模式下的生成的instance实例不一样。

    让我们打印 console.log(getCurrentInstance())看看

    区别

    开发环境下
    生成环境下

    所以为什么报错就很明显,接下来就是找到一个可替代属性,我去看了一下官网描述。解决办法就出来了。

    解决办法

    instance.ctx替换成 instance.appContext.config.globalProperties

    展开全文
  • 主要介绍了vue递归获取父元素的元素实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue获取实例元素的三种方法

    千次阅读 2019-10-07 14:25:47
    vue在开发组件中,获取组件实例是一个非常有用的方法。组件可以通过 $refs、$parents、$children等方式获得实例引用 $refs在组件(或者dom上)增加ref属性即可 $parents获取子组件挂载的父组件节点 $children获取...

    vue在开发组件中,获取组件实例是一个非常有用的方法。组件可以通过 $refs、$parents、$children等方式获得实例引用

    • $refs在组件(或者dom上)增加ref属性即可
    • $parents获取子组件挂载的父组件节点
    • $children获取组件的所有子节点
    展开全文
  • 主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.js实例学习:获取DOM元素

    万次阅读 2019-02-19 23:51:00
    Vue获取DOM元素,我们可以用ref。 用法(和React一样): (1)在组件的DOM部分,任意标签中 写上:ref=&quot;xxx&quot; (2)通过组件对象 this.$refs.xxx 获取到元素 1、获取HTML标签的DOM 例1: &...
  • 本篇文章主要介绍了vue.js获取数据库数据实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • // 获取路由器实例 const router = useRouter() //使用 //router.push..... 等等方法 // route响应式对象,监控变化,传值 const route = useRoute //获取 处理route.query 等等 } } </sc.
  • VueVue实例创建整体流程

    千次阅读 2018-09-03 20:40:09
    上篇文章是Vue初始化加载的过程,主要的处理是对Vue实例方法以及静态方法的定义。 本篇是分析调用Vue构造函数的过程,实际上是主要分析大致流程、props、methods、data。 具体逻辑 使用Vue构造函数创建Vue实例,...
  • vue路由守卫内获取实例

    千次阅读 2019-01-23 09:53:01
    由于路由守卫是一个回调函数,this是不指向实例的,如下vm为实例 beforeRouteEnter:(to,from,next)=&gt;{ next((vm) =&gt; { var data=vm.$store.state.user if(data===""||data===undefined|...
  • 获取vue实例数据

    千次阅读 2018-12-17 17:19:32
    var app = new App({...}) 我们要获取app当中的data app.$data
  • 主要介绍了在Vue获取自定义属性方法:data-id的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue beforeRouteEnter 异步获取数据给实例问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue - vue.$ref获取元素实例

    千次阅读 2019-06-19 19:04:40
    vue中使用通过ref来获取dom元素 ,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例     当 v-for 用于元素或组件的时候,引用信息将是包含 DOM ...
  • vue的js文件中获取vue实例

    千次阅读 2019-04-02 16:59:00
    1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: '<App/>' 6 }) 7 export default vue 2.在需要使用的js中引入 1 import context ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,564
精华内容 24,625
关键字:

vue3获取实例

vue 订阅