vue3
文章平均质量分 57
xiaoLiang o
一个人必须不停地写作,才能不被茫茫人海淹没。
展开
-
【vue3系列】vue3之生命周期(带图)
Vue3之生命周期主要Vue生命周期事件被分为两个钩子,分别在事件之前和之后调用,vue应用程序中有4个主要事件(8个钩子):创建 ---- 在组建创建时执行挂载 ---- DOM被挂载时执行更新 ---- 当响应数据被修改时执行销毁 ---- 在元素被销毁之前立即执行在【options API】中,生命周期钩子是被暴露在vue实例上的选项,我们只需要调用使用即可。在【composition API】中,我们需要将生命周期钩子导入项目,然后才能使用。import {onMounted原创 2021-12-16 16:49:52 · 57336 阅读 · 1 评论 -
【Vue3系列】Vue3之reactive、ref和toRefs
Vue3之reactive、ref和toRefs在vue2中,定义数据都是在data中,但在vue3中可以使用reactive和ref来进行数据定义。refref是用来创建基础类型的响应式数据,模板默认调用value显示数据,方法中修改需要修改value的值才能修改。ref可以用于模板和reactive,不仅可以用于响应式还可以用于模板的DOM元素。ref是一个对象,不丢失响应式,用value属性来存储值,通过.value属性的get和set来实现响应式。//通过ref,可以原创 2021-12-13 15:25:37 · 1873 阅读 · 4 评论 -
【vue3系列】Vue3的setup
Vue3的setupsetup选项是一个接收props和context的函数是一个新的组件选项,作为Composition-API的入口点,只会被执行一次,用于建立数据与逻辑的连接。注意点在执行setup函数时,还没执行created生命周期方法,因此在setup函数中,无法使用data和methods的变量和方法。不能在setup函数中使用data和methods,在setup中使用this是无法操作的,因为setup 在生命周期beforeCreate和created之间执行,调用发生在 d原创 2021-12-10 17:28:14 · 1316 阅读 · 0 评论 -
【vue3系列】vue3—Composition-API的一些疑问解答
vue3 Composition-API获取组件实例在options api里面使用this来获取实例在setup里this指向window的,我们可以通过 getCurrentInstance()这个接口来获取组件实例setup() { // getCurrentInstance()可以获取组件实例 const instance = getCurrentInstance() console.log(instance); onMounted(()=>{ // 组件原创 2021-08-06 16:27:50 · 605 阅读 · 0 评论 -
【vue3系列】vue3快速入门教程
Vue3入门根实例初始化不同2.x中通过new Vue()的方法来初始化import App from './App.vue'new Vue({ store, render:h => h(App)}).$mount('#app')3.x中vue不再是一个构造函数,通过createApp方法初始化import App from './App.vue'createApp(App).use(store).mount('#app')ref或者rea原创 2021-10-13 18:28:44 · 1476 阅读 · 0 评论